JS -- (10) 原型到原型链

95 阅读2分钟
(1) 原型

每个函数都有一个 prototype 属性,而函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型。【即构造函数的原型和实例对象的原型指向同一个对象】

1>那如何理解该原型对象呢?

可以理解为每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象,这个对象就是我们所说的原型,每一个对象都会从原型"继承"属性。

2155.png

2>那原型对象能否指回构造函数和实例对象呢?

  • 指向实例倒是没有,因为一个构造函数可以生成多个实例,
  • 但是原型指向构造函数倒是有的,constructor 属性

2156.png

3>那原型对象还有没有原型呢?

  • 有,因为原型对象也是一个对象,那么如果我们用 new Object()进行创建,那么此时原型的原型就是 Object 构造函数的原型对象!!!如下:

2157.png

4>那 Object原型的原型又是什么呢?会一直原型下去么?

  • No!!Object.prototype. _ _ proto _ _ = null
  • 就停止了
(2) 原型链

每个实例对象,都有自己的原型对象,而这个原型对象,也是一个创建出来的对象(即也是实例对象),那么它也会有自己的原型对象...... 就这样一层一层由原型对象串连起来的线,就是原型链,如上图的蓝色的那条线!!!

(3) 基于原型链的变量查找机制

当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。

栗子:

function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin
(4) 关于实例对象和原型对象的一些子方法:
  • instanceof 判断实例对象是不是某个原型对象的实例?

     - 实例a  instanceof   原型b
    
  • .isPrototypeOf() 判断实例对象是不是某个原型对象的实例?

      - 原型对象A . isPrototypeOf( 实例1 ) == > 判断实例 1 是不是原型对象 A 的实例
    
  • getPrototypeOf() 获得实例的原型对象

       - 实例. getPrototypeOf()
    
  • setPrototypeOf() 重写一个实例对象的原型继承关系

(5) 补:

constructor属性

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

当获取 person.constructor 时,其实 person 中并没有 constructor 属性,当不能读取到constructor 属性时,会从 person 的原型( _ _proto _ _) 也就是 Person.prototype 中读取,正好原型中有该属性,所以:person.constructor 等价于 Person.prototype.constructor,所以结果为 true!!!