js深入之从原型到原型链

83 阅读1分钟

构造函数创建对象

function A {
}
let a=new A();
a.name="abc";
console.log(a.name);

在这个例子中A就是一个构造函数,我们使用new创建了一个实例对象a

prototype

每个函数都有一个prototype属性

function A {
}
A.prototype.name="张三"
let a1=new A();
let a2=new A();
console.log(a1.name,a2.name)

prototype指向的是调用该函数创建的实例的原型,也就是例子中a1,a2的原型。 每一个对象(null除外)创建的时候,都会关联另外一个对象,这个对象就是原型,每个对象都会从原型“继承”属性

3bdfe951-d6de-4e73-ae8b-8db05e5d54bf.jpeg

_proto_

每个对象(除了null)都有一个__proto__属性,这个属性指向该对象的原型

function A {
}
let a=new A();
console.log(a.__proto__===A.prototype)

a8d6b4f1-e328-44f6-8c7b-421bcfe8ac22.jpeg

constructor

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

function A {
}
console.log(A.prototype.constructor===A)

4e507f00-af31-4942-bf0a-ffc0c89cd49c.jpeg

function A {
}
let a=new A();
console.log(A.prototype.constructor===A)
console.log(a.__proto__===A.prototype)
console.log(a.contructor===A.prototype.constructor)
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(a) === A.prototype)

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

function A {
}
A.prototype.name="test";
let a=new A();
a.name="aaa";
console.log(a.name);//aaa
delete a.name;
console.log(a.name);//test

原型的原型,其实是有Object构造函数生成

a15399d7-b5ff-4fbc-afa3-9026ca9cddb7.jpeg

原型链

红色部分就代表了原型链的形成

dd4ff7f1-95d8-4007-9c1e-551d3ea83545.jpeg