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

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的祖宗，也是所有对象实际的祖宗（太极生两仪）要把这个东西写清楚又是另一个大坑，日后再谈。