什么是Javascript原型链?
在JavaScript中,每个实例对象(object)都有一个私有属性(__proto__)指向它的构造函数的原型对象(prototype ),该原型对象也有一个私有属性(__proto__)指向该原型对象的原型对象(prototype),层层向上直到一个对象的原型对象为 null。null 没有原型,并作为这个原型链中的最后一个环节。
原型链的作用
JavaScript 对象有一个指向一个原型对象的链(原型链)。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
代码图例
/**
* 我们先写一个构造函数,并通过该构造函数得到一个实例对象
*/
// 构造函数Person
function Person(job) {
this.job = job;
this.habit = ["eat", "drink", "sleep"];
}
// 新增方法
Person.prototype.printHabit = function () {
console.log(this.habit);
};
Person.prototype.printJob = function () {
console.log(this.job);
};
// 通过new来实例化一个person对象
const person = new Person("people");
接下来我门开始解析概念:
每个实例对象(object)都有一个私有属性(__proto__)
我们打印一下这个person对象
console.log(person);
通过上图我们可以看到person对象具有了 habit 、job 两个属性,以及它的私有属性__proto__,这个私有属性指向了一个Object,根据概念,实例都有一个私有属性__proto__。
ps:这个Object实际上就是person的构造函数的原型对象,接下来我们看下一句:
每个实例对象(object)都有一个私有属性(__proto__)指向它的构造函数的原型对象(prototype )
我们打印一下person实例的__proto__
console.log(person.__proto__)
通过上图可以看到这个对象具有两个方法:printhabit、printJob,这两个方法其实就是我们刚才代码中写在Person的prototype上的方法,现在大致就可以得出,person的私有属性__proto__指向它的构造函数Person的prototype。我们通过代码再来验证下实例person的__proto__是不是指向Person的prototype
console.log(person.__proto__ === Person.prototype)
从验证结果可以看出实例person的__proto__是指向了Person的prototype
在构造函数Person的原型对象中又一个construtor属性,这个属性是指向构造函数Person的,我们通过代码验证一下
console.log(Person.prototype.constructor === Person)
通过上面一系列的验证结果我们可以得到以下结论关系:
构造函数Person通过new来实例化对象person,实例person的私有属性__proto__和构造函数Person的prototype指向同一个对象,这个对象就是构造函数Person的原型对象,而原型对象的constructor又指向了该原型对象的构造函数Person
关系图如下:
以上就是一层原型链的推倒结论,感兴趣的同学可以接着往下推导,到最后的关系图如下: