JavaScript中原型与原型链

Posted 2021-06-10 lime2019

javascript常被描述为一种基于原型的语言（prototype-based language）

JavaScript中原型与原型链

• 1. 原型
• 2. 原型链
• 3. 原型、原型链、继承
• • 3.1 prototype与__proto__的区别
• 4. instanceof
• 5. 四种拓展原型链的方法

1. 原型

每一个对象拥有一个原型对象，对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。
准确地说，这些属性和方法定义在Object的构造器函数(constructor functions)之上的prototype属性上，而非对象实例本身。

JavaScript中函数可以拥有属性，每一个函数都有一个特殊的属性称为原型（prototype）。

2. 原型链

在 ES2015/ES6 中引入了 class 关键字，但那只是语法糖，JavaScript 仍然是基于原型的。其本身并不提供class实现。

在继承中，JavaScript只有一种结构——对象。每一个实例对象都有一个私有属性（__proto__）指向它的构造函数的原型对象（prototype）。该原型对象也有自己的原型对象，层层向上直到一个对象的原型对象为null（根据定义null没有原型），作为这个原型链中最后一个环节。

3. 原型、原型链、继承

每个Class都有显示原型（prototype）；
每个实例都有隐式原型（__proto__）；
实例的__proto__指向对应Class的prototype。

基于原型的执行规则：

• 获取属性或者执行方法时；
• 首先在自身的属性和方法中寻找；
• 如果找不到，则自动去__proto__中寻找；

3.1 prototype与__proto__的区别

prototype与__proto__的区别:

• prototype是函数才有的属性；
• __proto__是每一个对象都拥有的属性，也可以理解为构造器的原型（但是通过Object.create()创建的对象不适用于此）

具体可以参考三张图搞懂JavaScript的原型对象与原型链此文。

4. instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

MDN中instanceof

instanceof语法为：

object instanceof constructor

参数：

• object
  • 某个实例对象（不能为空对象，JS中空对象优先作为语句）；
• constructor
  • 某一个构造函数；

根据文档中对于instanceof的描述：instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。可知instanceof是基于原型链来实现的。

5. 四种拓展原型链的方法

MDN:四种拓展原型链的方法