Javascript之旅 对象的原型链之由来

(一)对象的原型链由来

在 JavaScript 中,每个对象都有一个原型对象。原型对象充当着对象的模板,它包含了常用的属性和方法,子对象可以通过原型链继承这些属性和方法。 每个对象都可以通过__proto__属性访问它的原型对象,对象的原型对象也可以拥有自己的原型对象,这就是所谓的原型链。

但是,面对大量对象,JavaScript 在内存中会保存很多原型对象,这样会导致内存浪费。为了解决这个问题,JavaScript 引入了 prototype 属性,用来指定一个构造函数的原型对象,这样所有通过该构造函数创建的对象都会共享一个原型对象,从而达到节约内存的效果。

(二)实现原型继承的两种方式

在 JavaScript 中,实现原型链有两种方式:构造函数式和对象字面量。

1.构造函数式

构造函数式是定义一个函数作为构造函数,再通过 new 关键字创建一个对象的方式,实现原型继承。

例如:

// 构造函数式原型链继承
function Animal() {
  this.species = 'mammal'
}
function Cat(name, color) {
  Animal.call(this)   // 把 Animal 的实例属性添加到 Cat 中
  this.name = name
  this.color = color
}
let cat1 = new Cat('Tom', 'black')
console.log(cat1.species)  //输出 mammal

在这个例子中, Animal 和 Cat 是两个构造函数,用 call 方法将 Animal 的实例属性添加到 Cat 中,从而实现原型链继承。

2.对象字面量

对象字面量是直接使用对象字面量表示对象,通过指定原型对象属性来实现原型继承。

例如:

let animal = {
  species: 'mammal'
}
let cat = {
  name: 'Tom',
  color: 'black'
}
cat.__proto__ = animal; // 指定 cat 对象的原型对象为 animal 对象
console.log(cat.species);  //输出 mammal

在这个例子中, animal 对象是一个具有 species 属性的普通对象, cat 对象继承了 animal 对象的所有属性,因为它的原型对象被指定为 animal 对象。

(三)总结

在 JavaScript 中,原型链是实现原型继承的关键,每个对象都有一个__proto__属性,用于访问它的原型对象。原型链的继承方式有两种,一种是通过构造函数式,另一种是通过对象字面量。无论是哪种方式,只要实现了正确的继承方式,就可以达到代码复用和内存节省的目的。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Javascript之旅 对象的原型链之由来 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JS中的算法与数据结构之队列(Queue)实例详解

    JS中的算法与数据结构之队列(Queue)实例详解 什么是队列? 队列是一种线性数据结构,它是一种先进先出的数据结构(FIFO),即最先进队列的元素也最先出队列。 队列有两个基本操作:入队和出队。入队将元素添加到队列的末尾,而出队则是从队列的前端删除元素。 队列的实现方式 我们可以用数组和链表来实现队列,这里我们介绍一下使用数组来实现队列的方式。 用数组实现…

    JavaScript 2023年5月27日
    00
  • javascript实现可键盘控制的抽奖系统

    需要实现一个可键盘控制的抽奖系统,我们可以采用JavaScript语言编写代码。下面,我将详细介绍实现步骤: 步骤一:创建HTML页面 首先,我们需要在HTML页面中创建一个大转盘和一个按键,用户可以通过这个按钮来控制转盘的停止。 <!DOCTYPE html> <html> <head> <meta charset…

    JavaScript 2023年6月11日
    00
  • JavaScript 短路运算的实现

    JavaScript 短路运算的实现 在 JavaScript 中,短路运算又称为逻辑运算符的“短路求值”,它可以用于简化代码并提高效率。本文将详细讲解JavaScript短路运算的实现。 什么是短路运算? 短路运算是指当使用逻辑运算符 && 和 || 时,如果左手边的逻辑表达式已经能够确定最终的结果,则不再执行右侧的表达式。如果左侧的表达式…

    JavaScript 2023年6月10日
    00
  • JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8

    这个错误提示通常是由于 HTML 文件中的字符编码指定错误导致的。下面是一些可能的原因和解决方案: 编码不匹配:HTML 文件头部的 charset 设置与 JavaScript 文件头部的 charset 不一致。如果 HTML 文件是以 UTF-8 编码保存的,而 JavaScript 文件是以 GB2312 编码保存的,则在运行 JavaScript …

    JavaScript 2023年5月19日
    00
  • JS判断元素是否在数组内的实现代码

    判断一个元素是否在一个数组内,是在JS编程中非常常见的问题,一般通过indexOf()函数、includes()函数、for循环等方式实现。 indexOf()函数实现 indexOf() 函数返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。我们可以利用这一特点来实现判断元素是否在数组内。 const arr = [1, 2, 3, 4…

    JavaScript 2023年5月27日
    00
  • js实现字符串和数组之间相互转换操作

    为了实现字符串和数组之间相互转换操作,可以使用JavaScript提供的一些内置方法和自定义函数。 字符串转数组 split()方法 使用split()方法可以将一个字符串按照指定字符或正则表达式分割成一个数组。该方法的基本语法如下: string.split(separator, limit) 其中,separator表示分隔符,可以是一个字符串或正则表达…

    JavaScript 2023年5月27日
    00
  • 详解javascript中的变量提升和函数提升

    什么是变量提升和函数提升 在JavaScript中,当我们定义变量和函数时,会发生“变量提升”和“函数提升”的现象。变量提升指的是当声明一个变量时,JavaScript会将该声明提升至作用域顶部,也就是在代码中变量声明语句前使用该变量也不会报错。 同理,函数提升指的是在定义函数时,JavaScript也会将该函数提升至作用域顶部,因此在函数定义之前使用该函数…

    JavaScript 2023年5月27日
    00
  • weui框架实现上传、预览和删除图片功能代码

    下面我将详细讲解使用weui框架实现上传、预览和删除图片功能的完整攻略。 1. 准备工作 首先需要引入weui框架和jQuery库,可以使用以下代码: <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css&q…

    JavaScript 2023年5月19日
    00
合作推广
合作推广
分享本页
返回顶部