javascript之原型和原型链

82 阅读2分钟

构造函数创建对象

  • 使用构造函数创建一个对象
function Person () {} 
const person = new Person();
person.height = 176;

console.log(person.height) // 176

在这个例子中,Person就是一个构造函数,构造函数经过New实例化后创建实例对象person


prototype

每一个函数都有一个prototype属性,例如上面例子中的构造函数Person

function Person () {} 
Person.prototype.name = 'zhangsan'
const person1 = new Person();
const person2 = new Person();

console.log(person1.name) // zhangsan
console.log(person2.name) // zhangsan

  • 通过如上的例子我们可以看到函数的prototype(构造函数也是函数)指向的是一个对象,这个对象正式调用该构造函数而创建的实例的原型,也就是这里的prototype就是person1和person2的原型。那什么是原型呢?

每一个javascript对象在创建的时候(除null外);都会关联到一个对象,这个对象就是我们说的原型,每一个对象都会从原型上继承属性


proto

每一个javascript对象(切记是对象) 都具有一个属性,叫做__proto__,这个对象会执行该对象的原型

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

console.log(Person.prototype === person.__proto__) // true 

constructor

每个原型都有一个constructor属性指向关联的构造函数(Person === Person.prototype.constructor)

  • 综上我们已经得出
Person.prototype === person.__proto__;
Person.prototype.constructor === Person
Object.getPrototypeOf(person) // 获取对象的__proro__

实例与原型

当读取实例(对象)的属性时,如果在当前实例找不到,就会向上(沿着原型链)一直找,一直找到最顶层为止;

function Person() {}
Person.prototype.name = '张三';
var person = new Person();
person.name = '李四';

console.log(person.name) // 李四

delete person.name; // 这里把李四删除掉
console.log(person.name) // 会从原型链上找到张三

原型的原型

原型也是一个对象,既然是对象;我们就可以用最原始的方式创建它,即:

const obj = new Object()
obj.name = '张三'
console.log(obj.name)

其实原型对象就是通过new Object生成的,结合前面的内容object__proto__指向的是构造函数的prototype,所以最终得出如下关系图:

1623811087376-screenshots.png