JavaScript学习笔记（二十二）原型及原型链_1小时掌握javascript原型与原型链 qianfeng(2)

function Person() {}
​
var p1 = new Person()
​
console.log(p1.proto === Person.prototype) // true

* + 我们发现实例化对象的 `__proto__` 和所属的构造函数的 `prototype` 是一个对象空间
	+ 我们可以通过构造函数名称来向 `prototype` 中添加成员
	+ 对象在访问的时候自己没有，可以自动去自己的 `__proto__` 中查找
	+ 那么，我们之前构造函数的缺点就可以解决了
		- 我们可以把函数放在构造函数的 `prototype` 中
		- 实例化对象访问的时候，自己没有，就会自动去 `__proto__` 中找
		- 那么也可以使用了

function Person() {}
​
Person.prototype.sayHi = function () {
console.log(‘hello Person’)
}
​
var p1 = new Person()
p1.sayHi()

* + `p1` 自己没有 `sayHi` 方法，就会去自己的 `__proto__` 中查找
	+ `p1.__proto__` 就是 `Person.prototype`
	+ 我们又向 `Person.prototype` 中添加了 `sayHi` 方法
	+ 所以 `p1.sayHi` 就可以执行了
* 到这里，当我们实例化多个对象的时候，每个对象里面都没有方法
	+ 都是去所属的构造函数的 `protottype` 中查找
	+ 那么每一个对象使用的函数，其实都是同一个函数
	+ 那么就解决了我们构造函数的缺点

function Person() {}
​
Person.prototype.sayHi = function () {
console.log(‘hello’)
}
​
var p1 = new Person()
var p2 = new Person()
​
console.log(p1.sayHi === p2.sayHi)

* + `p1` 是 `Person` 的一个实例
	+ `p2` 是 `Person` 的一个实例
	+ 也就是说 `p1.__proto__` 和 `p2.__proto__` 指向的都是 `Person.prototype`
	+ 当 `p1` 去调用 `sayHi` 方法的时候是去 `Person.prototype` 中找
	+ 当 `p2` 去调用 `sayHi` 方法的时候是去 `Person.prototype` 中找
	+ 那么两个实例化对象就是找到的一个方法，也是执行的一个方法
* 结论
	+ 当我们写构造函数的时候
	+ **属性我们直接写在构造函数体内**
	+ **方法我们写在原型上**


### **原型链**


* 我们刚才聊过构造函数了，也聊了原型
* 那么问题出现了，我们说构造函数的 `prototype` 是一个对象
* 又说了每一个对象都天生自带一个 `__proto__` 属性
* 那么 **构造函数的 prototype** 里面的 `__proto__` 属性又指向哪里呢？


#### **一个对象所属的构造函数**


* 每一个对象都有一个自己所属的构造函数
* 比如： 数组

// 数组本身也是一个对象
var arr = []
var arr2 = new Array()

* + 以上两种方式都是创造一个数组
	+ 我们就说数组所属的构造函数就是 `Array`
* 比如： 函数

// 函数本身也是一个对象
var fn = function () {}
var fun = new Function()

* + 以上两种方式都是创造一个函数
	+ 我们就说函数所属的构造函数就是 `Function`


#### **constructor**


* 对象的 `__proto__` 里面也有一个成员叫做 `**constructor**`
* 这个属性就是指向当前这个对象所属的构造函数


#### **链状结构**


* 当一个对象我们不知道准确的是谁构造的时候，我们呢就把它看成 `Object` 的实例化对象
* 也就是说，我们的 **构造函数 的 prototype 的****`__proto__`** 指向的是 `Object.prototype`
* 那么 `Object.prototype` 也是个对象，那么它的 `__proto__` 又指向谁呢？
* 因为 `Object` 的 js 中的顶级构造函数，我们有一句话叫 **万物皆对象**
* 所以 `Object.prototype` 就到顶了，`Object.prototype` 的 `__proto__` 就是 null


#### **原型链的访问原则**


* 我们之前说过，访问一个对象的成员的时候，自己没有就会去 `__proto__` 中找
* 接下来就是，如果 `__proto__` 里面没有就再去 `__proto__` 里面找
* 一直找到 `Object.prototype` 里面都没有，那么就会返回 `undefiend`


#### **对象的赋值**




**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**