彻底理解什么是原型链，prototype和__proto__的区别及常见面试汇总

原型prototype

我们所创建的每一个函数，解析器都会给函数增加一个prototype属性，这个属性就对应着我们的原型对象。
如果函数作为普通函数调用，prototype没有任何作用；如果函数通过构造函数的形式调用时，它所创建的对象都后有一个隐含的属性指向该构造函数的原型对象，我们可以通过__proto__来访问属性。
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中原型中。

prototype的作用

设置对象共有的属性和方法
使用构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型中，这样就既不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些方法和属性了。

    function IntroInfo(name, sport) {
      this.name = name
      this.sport = sport
    }
    IntroInfo.prototype.play = function() {
      console.log(this.name + '喜欢' + this.sport)
    }
    // 调用
    let lucy = new IntroInfo('Lucy', '羽毛球')
    lucy.play() // Lucy喜欢羽毛球

对象的方法及属性查找

1、自身找：自身有则直接用，自身没有则去原型对象中查找
2、原型对象找：原型对象有则直接用，原型对象没有则去原型的原型中查找
3、原型的原型中查找：直到找到Object的原型，如果没有则返回undefined，因为Object的原型为null。
如果创建的实例对象不想使用其原型对象中的方法，可以直接给对象添加方法。还是以IntroInfo为例：

    function IntroInfo(name, sport) {
      this.name = name
      this.sport = sport
    }
    IntroInfo.prototype.play = function() {
      console.log(this.name + '喜欢' + this.sport)
    }
    // 调用
    let lucy = new IntroInfo('Lucy', '羽毛球')
    // 给实例对象添加play方法，调用lucy.play() 时按照对象属性及方法查找规则，便会调用实例对象上的play() 方法
    lucy.play = function() {
      console.log('lucy不喜欢' + this.sport)
    }
    lucy.play() // lucy不喜欢羽毛球

构造函数、构造函数创建的实例对象与原型对象关系

    function IntroInfo(name, sport) {
      this.name = name
      this.sport = sport
      console.log(this)
    }
    IntroInfo.prototype.play = function() {
      console.log(this)
      console.log(this.name + '喜欢' + this.sport)
    }
    // 调用
    let lucy = new IntroInfo('Lucy', '羽毛球')
    lucy.play = function() {
      console.log('lucy不喜欢' + this.sport)
    }
    lucy.play() // Lucy不喜欢羽毛球
    console.log(lucy.__proto__)
    console.log(IntroInfo.prototype)
    console.log(IntroInfo.prototype === lucy.__proto__) // true

构造函数.prototype 及实例对象.__proto__ 指向同一个对象

总结构造函数、实例对象、原型对象关系：

构造函数、实例对象、原型对象关系

常用面试

1.为什么实例对象可以调用原型中的方法？
因为构造函数.prototype = 实例对象.__proto__，且构造函数.prototype指向它的原型对象，所以实例对象.__proto__也指向原型对象，属于间接关系，因此可以调用原型中的方法。
如何验证？
用console.dir(实例对象)，保存的是构造函数中的属性和方法及__proto__，__proto__中保存的是原型对象中设置的属性和方法，因此实例对象可以直接用构造函数中的属性和方法及构造函数原型对象中的属性和方法。
还是以上面的例子来验证。

    function IntroInfo(name, sport) {
      this.name = name
      this.sport = sport
    }
    IntroInfo.prototype.play = function() {
      console.log(this.name + '喜欢' + this.sport)
    }
    // 调用
    let lucy = new IntroInfo('Lucy', '羽毛球')
    console.dir(lucy)

实例对象的属性和方法

2.原型作用：数据共享，继承。（JS是通过原型继承的）
目的：节省空间

原型链

JavaScript里任何东西都是对象，任何一个对象内部都有另一个对象叫__proto__，即原型，它可以包含任何东西让对象继承。当然__proto__本身也是一个对象，它自己也有自己的__proto__，这样一级一级向上，就构成了一个__proto__链，即原型链。当然原型链不会无限向上，它有个终点，可以称为原型链的顶端，或者root，它是一个特殊的对象，它的__proto__为null。
obj.__proto__.__proto__......__proto__ === null;

4.构造函数的this和构造函数原型对象中的this都是实例对象

    function IntroInfo(name, sport) {
      this.name = name
      this.sport = sport
      console.log(this)
    }
    IntroInfo.prototype.play = function() {
      console.log(this)
      console.log(this.name + '喜欢' + this.sport)
    }
    let lucy = new IntroInfo('Lucy', '羽毛球')
    lucy.play() // Lucy喜欢羽毛球

image.png

js是一门动态语言，如果一个变量没有定义过则报错，但是如果采用的是对象.属性，相当于增加了这个属性，但是未赋值，因此是undefined
查看对象是否含有某方法或属性
方法一：使用in检查对象中是否含有某个属性时，范围是对象及原型，范围较广
方法二：也可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true，范围小

hasOwnProperty()
- 这个方法可以用来检查对象自身中是否含有某个属性
- 语法：对象.hasOwnProperty("属性名")

方法三：判断对象.属性是否为undefined
方法四：遍历Object.Keys，查看属性是否存在

文中有不足或者读者有疑问或更好的见解，欢迎留言讨论。
如果觉得该篇文章对您有帮助，别忘了留下您的足迹，点个赞❤噢

彻底理解什么是原型链，prototype和proto的区别及常见面试汇总