理解原型和原型链

2,461 阅读2分钟

构造函数、实例、原型、原型链

构造函数

构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写。另外就是调用方式的不同,普通函数是直接调用,而构造函数需要使用new关键字来调用。

function Person() {};
var person = new Person();

实例

实例就是通过构造函数创建出来的对象。

原型

每当定义一个函数数据类型(普通函数、类)时候,都会天生自带一个prototype属性,这个属性指向函数的原型对象,并且这个属性是一个对象数据类型的值。

原型与构造函数的关系就是,构造函数内部有一个名为 prototype 的属性,通过这个属性就能访问到原型:

原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中。

原型链

指从一个实例对象开始往上找,这个实例对象的__proto__属性所指向的则是这个实例对象的原型对象,如果用person表示这个实例,则原型对象表示为person.proto。同时,这个原型对象顾名思义也是一个对象,而且它也有上一级的原型对象,相对于上一级原型对象而言,它也是一个实例对象,那么它也拥有__proto__属性,它的__proto__属性也指向它的原型对象,后面也以此类推,一直到Object.prototype这个原型为止,Object.prototype为原型链的末尾点。

person通过调用两次__proto__属性就已经到达Object,Object是一个构造函数,Object拥有属性prototype,可以指向它的原型。第三次调用的时候已经返回空,表明Object.prototype为原型链的末端。

Person是构造函数, Person.prototype 是原型对象, person是实例, 实例可以通过_proto_找到原型对象。

Example

function A() {}
A.prototype.type = 'AAA'

function B() {}
B.prototype = new A()

b = new B()
console.log(b.__proto__.__proto__.type) //AAA
console.log(B.prototype.__proto__ == b.__proto__.__proto__) //true
console.log(A.prototype == b.__proto__.__proto__) //true
console.log(A.prototype == B.prototype.__proto__) //true
console.log(b.__proto__.__proto__.type == A.prototype.type) //true
    

如果感觉对你有帮助,那就收藏❤❤吧!