通过class进一步理解原型和原型链

js里没有类的概念，但我们在编程中还想采用类的这种思想。我们之前的做法是声明一个函数，在用new关键字去创建这个函数的实例，这样我们就得到了一个“类”；

function persion(){}
persion.prototype.name = "xiaoming"
let Persion1 = new persion();

　　我们把上面创建类的方法也称作构造函数，在es6中，它为我们提供了一个新的语法 class ，可以用class关键字创建一个“类”。

class Persion{
      constructor(name,age){
        this.name = name
        this.age = age
      }
    }
let xiaoming = new Persion("xiaoming",20)
 console.log(xiaoming)

　　打印结果如下：

 

 学习过另一篇原型和原型链的同学看到这里会发现，用class声明的原型和用function声明的原型构造出来的实例是一模一样的，对没错，class实际上就是一个function，是创建类的一个语法糖，和构造函数创建实例一样，在new 一个class实例的时候也发生了下面几件事：创建一个实例，this指向原型本身，并返回this。

我们再来看上面用class原型生成实例的打印结果，Persion实例有隐式属性__proto__，指向了它的原型Persion的prototype,Persion同时也是一个对象，是由Object构造的，最终原型链又指向了Object。

用class我们可以很方便的实现继承，使用extends关键字

    class Persion{
      constructor(name,age){
        this.name = name
        this.age = age
      }
    }
    class Student extends Persion{
      constructor(name,age){
        super(name,age)
      }
    }
    let xiaoming = new Student("xiaoming",20);
    console.log(xiaoming)

　　打印结果如下

 

 

 

我们可以看到，使用extends继承也是可以通过原型链逐级查找到Object对象的。

这时候如果我们在Persion上添加一个方法say，尝试打印继承了Persion的Student原型生成的实例xiaoming的say（）方法。

 class Persion{
      constructor(name,age){
        this.name = name
        this.age = age
      }
      say(){
        console.log("hi")
      }
    }
    class Student extends Persion{
      constructor(name,age){
        super(name,age)
      }
    }
    let xiaoming = new Student("xiaoming",20);
    console.log(xiaoming)
    xiaoming.say();//hi

　　在控制台看出，xiaoming.say（）成功执行了，这就印证了原型链逐级查找的特点，首先xiaoming在自己内部查找say方法，但是没有查到，这时候自动向下继续查找say方法，这时候查到了Persion原型上有这个方法，那么就相当于xiaoming有了say方法

 

 

总结：1 实例的__proto__===原型的prototype

　　　2 原型链具有逐级查找特性

　　   3 xiaoming能调到say方法，persion和people都能调到say方法，这时候可以用xiaoming.hasOwnProperty（‘say’）判断，返回false  

 

ps：补充一个知识点，用 a instanceof b 可以判断a是不是b生成的实例，或者叫b是不是a的原型，只要b在a所处的上游原型链上，就返回true

　　举个🌰：xiaoming instanceof Student  //true
　　　　　　xiaoming instanceof People　　//true

　　　　　　xiaoming instanceof Object　　//true

　　　　　　xiaoming instanceof Array //false