要想理解什么是原型和原型链,必须先清楚这两个概念_proto_、prototype。
_proto_隐式原型,对象独有;
prototype 显示原型,函数独有;
函数也是一种对象,所以函数也有隐式原型。
原型
- 每个对象都有一个隐式原型_proto_;
- 每个函数都有一个显示原型prototype;
- 对象的隐式原型_proto_指向它构造函数的显示原型prototype;
function Father(){
this.colors = ['red','green']
}
Father.prototype.getColors = function(){
return this.colors
}
function Child(){}
let child = new Child()
console.log(child.getColors()) // ['red','green']
实例化对象child._proto_指向它构造函数的 Father.prototype。
即child.proto= Father.prototype
一个对象的隐式原型指向该对象构造函数的显示原型。在显示原型上定义的属性和方法,通过隐式原型传递给了该构造函数的实例。这样实例就可以访问到构造函数的方法和属性了。
原型链
- 访问一个对象的属性时,会先在该对象本身去找;
- 如果没找到,则会去它的隐式原型_proto_去找,即它构造函数的prototype;
- 如果构造函数的prototype也没有,会沿着构造函数的prototype的_proto_继续找;
- 这样一层一层,直到Object.prototype._proto_指向null;
QA1: 原型链的终点是什么?
原型链的终点是null。
QA2: ES6 的 Class的原型本质是什么?
Class 的原型本质是函数 function。
//ES6构造函数
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
getInfo(){
console.log(this.name + this.age);
}
}
const man = new Person('hanmeimei',22)
man.getInfo() //hanmeimei 22
ES6 Class 构造函数原理和 js 构造函数的原理相同,只要理清楚一种,一通百通。

本文详细介绍了JavaScript中的原型和原型链概念,包括对象的隐式原型_proto_和函数的显示原型prototype。通过实例展示了原型如何使实例访问构造函数的属性和方法。还探讨了原型链的工作原理,当查找对象属性时,如何沿着原型链向上搜索,直至找到Object.prototype._proto_指向null。此外,提及了ES6中Class的原型本质是函数,并指出其与传统构造函数的相似性。
5009

被折叠的 条评论
为什么被折叠?



