javaScript中对象的原型链

前言

原型链相关知识反复记忆，老易混淆，而此知识点在面试中及为重要，在日常工作中也能让我们更清楚的认识各个属性在父子对象之间的传递,也为我们深入学习js继承等概念奠定基础。

原型链理解

1、为什么会有原型和原型链

javaScript大量使用对象（甚至可以说，万物皆对象），而如何将这些对象关联起来，于是就有了原型和原型链的由来。

2、什么是原型

JS中的对象有一个内部属性Prototype，这个属性所对应的就是该对象的原型。
下面我们看下在js中对应的数组，对象，函数

var a = [1, 2, 3];
var b = {
	name: "张三",
	age: 18,
};
function c(){
	console.log("ccc")
};
console.log("a===", a);
console.log("b===", b);
console.log("c===", c);

然后打开浏览器查看打印信息,会发现

a，b都会有个__proto__属性，而c除此之外会有个prototype属性。（在mac电脑上__proto__为[[prototype]]）
而__proto__称作 隐式原型
prototype称作 显式原型

所以可以说：
所有引用类型（函数，数组，对象）都拥有__proto__属性
所有函数除了有__proto__之外，还有prototype属性.
而__proto__和prototype也都是一个对象，所以它们也会有一个__proto__属性

原型对象和原型链及关系

每创建一个函数，该函数会自动带一个prototype属性，该属性是一个指针，指向的对象就是该函数的原型对象.

// 构造函数
function Person(name, age){
	thisname=name;
	this.age=age;
}
// 向构造函数的原型对象上加方法
Person.protype.sayHi = function() {
	console.log(`Hi,${this.name}`)
}
// 向原型链上增加属性
Person.prototype.hobby = "打篮球";
//向构造函数上增加个属性
Person.sex = "女";

const person1 = new Person("Zs", 20);
const person2 = new Person("Ls", 30);
console.log("person1.name:", person1.name, "person1.age:", person1.age); // person1.name: Zs person1.age: 20
console.log("person1.name:", person1.name, "person1.age:", person1.age); // person2.name: Ls person2.age: 30
console.log(person1.sex) // undefined，因为不是在原型链上，所以无法拿到。至于该属性为什么不是实例自己的属性，可以看new关键字的特性
person1.sayHi(); // Hi,Zs 可以正常访问原型链上的方法
person2.sayHi(); // Hi, Ls
console.log(person1.hobby); // 打篮球 实例可以正常拿到构造函数原型对象上的属性
console.log(person1.__proto__ === Person.prototype) // true
console.log(person2.__proto__ === Person.prototype) // true
console.log(person1.__proto__.constructor === Person) // true
console.log(Person.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true

结合上述代码，可以得出结论：
每个实例对象上都有个__proto__属性，该属性指向该实例构造函数的prototype，即构造函数的原型对象，而构造函数也会有一个__proto__属性，该属性指向它构造函数的原型对象（本例中为Object.prototype）,同理，object的原型对象也会有__proto__属性，指向空对象null，所以__proto__属性会将实例，原型对象连接成一条链路，这就是原型链。实例查找属性时，就会沿着这条原型链逐级向上查找，当找到null还未发现时，就会得到undefind。
而构造函数的原型对象上有个constructor属性，指向该构造函数本身。