前端高频面试题之——原型链

[原文地址]https://www.jianshu.com/p/10bb679b9044

JavaScript中的构造函数
原型是什么
面向对象语言中，类派生实例，JavaScript的函数可以作为构造器(构造函数)，由函数派生实例。

function Person (name,gender) {
this.name = name;
this.gender = gender;
this.say = function () {
console.log('hello Im ’ + this.name)
}
}

var laowang = new Person(‘老王’,‘男’);
laowang.say() // hello Im 老王
此外，函数还自带一个prototype属性，你会发现Person.prototype是一个对象

console.log(Person.prototype) // {constructor:f}
这就是函数的原型对象，对原型对象添加属性，所有通过该函数实例化的对象，都可访问：

Person.prototype.sayGoodbye = function () {
console.log(‘see you next time!’)
}

var laoli = new Person (‘老李’,‘男’)
var xiaohong = new Person(‘小红’,‘女’)

laoli.sayGoodbye() //‘see you next time!’
xiaohong.sayGoodbye() //‘see you next time!’
原型对象属性与对象自身属性的区别：
上面代码中，say是自身属性，sayGoodbye是原型对象属性。看看下面的对比就明白了：

laoli.say === xiaohong.say // false
laoli.sayGoodbye === xiaohong.sayGoodbye // true

laoli.sayGoodbye === Person.prototype.sayGoodbye // true，小红亦然
函数say，放在对象里，每次实例化都要新声明一个函数，然而在prototype中的sayGoodbye只有一个，看图一目了然：

prototype.png
所以将公用的属性、方法放入原型对象中，才会避免多余的资源开销；

原型链是什么
小红、老李2个实例都有一个属性：

proto
他指向构造函数（Person）的原型对象：

xiaohong.proto === Person.prototype // true
laoli.proto === Person.prototype // true
所以，我们访问laoli.sayGoodbye ,可以理解成是通过laoli.__proto__找到了sayGoodbye方法，才得以访问。
完善刚才的图：

prototype.png
我们之前说过,一个函数的prototype叫啥？原型对象，既然原型对象也是对象，当然也能引用__proto__：

laoli.proto.proto === Object.prototype // true
可以看到，所有的对象，沿着proto一直引用下去，最终都会指向Object.prototype，所以laoli也可以访问Object.prototype中的属性，如toString、hasOwnProperty等；

小结：
访问一个对象的属性时，首先访问自身属性，自己没有，找__proto__中的属性，__proto__也没有，继续往__proto__的__proto__找（爸爸的爸爸叫爷爷），一直到Object.prototype为止；

还没完
别忘了，JavaScript中，万物皆对象，函数Person也不例外，它是由Function构造出来的，而Function，其实也是一个函数实例，他跟数组实例、对象实例等其他非基本数据类型，全部由Object构造

(function a (){}) instanceof Object // true
[1,2,3,4] instanceof Object // true
({a:1,b:2}) instanceof Object // true
明白了吧，实际上，不管是声明数字、字符串、数组、对象包括函数，全是new出来的，详见JavaScript数据类型的构造（原始类型通过valueOf转换）：

‘abc’ 等价于 new String(‘abc’).valueOf()
true 等价于 new Boolean(true).valueOf()
123 等价于 new Number(123).valueOf()
[1,2,3,4] 等价于 new Array(1,2,3,4)
function (a,b){return a+b} 等价于 new Function(‘a’,‘b’,‘return a+b’)
…

关于null
Object的祖宗，也是所有对象实际的祖宗（太极生两仪）要把这个东西写清楚又是另一个大坑，日后再谈。

作者：Kagashino
链接：https://www.jianshu.com/p/10bb679b9044
来源：简书