一次性搞懂js中的原型与原型链

164 阅读2分钟

Xnip2018-11-19_15-57-40.jpg | center | 747x479

构造函数:function Foo ( ) { };

实例对象:let f1=new Foo;
  1. 谈到继承时,JavaScript 只有一种结构:对象
  2. 每个函数都有 prototype 属性,除了 Function.prototype.bind(),该属性指向原型。

prototype

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

函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 f1 的原型。prototype带有__proto__和constructor

proto

每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向了创建该对象的构造函数的原型。

console.log(f1._proto_ === Foo.prototype) // true

constructor

每个原型都有一个 constructor 属性指向关联的构造函数

由于实例对象可以继承原型对象的属性,所以实例对象也拥有constructor属性,同样指向原型对象对应的构造函数。

console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false

原型链

JS在创建对象(不论是普通对象还是函数对象)的时候,都有一个叫做__proto__的内置属性,用于指向创建它的函数对象的原型对象prototype。以上面的例子为例:

console.log(fo.__proto__  === Foo.prototype)  //true

同样Foo.prototype也有proto属性

console.log(Foo.prototype.__proto__ === Object.prototype)  //true

Object.prototype对象也有proto属性,但它比较特殊,为null

console.log(Object.prototype.__proto__ === null)

我们把这个有proto串起来的直到Object.prototype.proto为null的链叫做原型链。原型链的形成是真正是靠proto 而非prototype

总结

  • 每个构造函数都有一个原型对象

    Foo.prototype
    
  • 原型对象都包含一个指向构造函数的指针

    Foo.prototype.constructor === Foo
    
  • 实例都包含一个指向原型对象的内部指针

    fo.__proto__  === Foo.prototype
    

更多文章请前往语雀