JS原型和原型链

先看如下代码，创建一个People的类，然后实例化一个对象出来。

class Student {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHi() {
    console.log(` 自我介绍 : 我是 ${this.name} 年龄 ${this.age}`);
  }
}

let xialuo = new Student('夏洛', 19);

image.png

原型（对象属性）

• Javascript规定，每一个class都有一个prototype显示原型。
• 注意必须是函数，上面可以看到，实例化出来的对象，是没有prototype的属性的。
• 每个实例对象都有自己的隐式原型。__proto__。
• 对象的隐式原型__proto__和函数的显示原型prototype是一样的。

image.png

执行流程。

• 对象调用sayHi的方法的时候，会先从自己的属性和方法上找。
• 如果找不到，就往隐式原型__proto__找。其实这个步骤就是叫做原型链。

为了体现出原型链，我们在多创建一个类出来。

class People {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  eat(){
    console.log(` 我是一个人类 我是${this.name} 我可以吃饭`)
  }
}

class Student extends People {
  constructor(name, age) {
    super(name, age);
    this.job = '学生'
  }

  sayHi() {
    console.log(` 自我介绍 : 我是 ${this.name} 年龄 ${this.age} 我职业是 ${this.job}`);
  }
}

let xialuo = new Student('夏洛', 19);

image.png

• 当我们打印出xialuo的隐式原型的时候，可以发现，里面的构造函数就是类。所以当xialuo调用eat的方法时候，会先从自己的属性方法上找，如果没有，依次在隐式原型中查找。

image.png

• 展开到最底层的时候，会发现最后的根节点是Object的类型。所以我们去使用toString，或者hasOwnpropetry的时候，能访问的到。

image.png

• 创建xialuo这个对象的时候，我们说过它可以调用sayHi这个方法，或者是eat的方法。但是xialuo.proto也有sayHi的方法。那就延伸一个疑问。这两个打印出来分别会是什么？

• 我们知道，this的指向一般是指向调用者。也就是xialuo.sayHi();的this指向的是xialuo这个对象，xialuo这个对象是有自己的name和age。xialuo.proto.sayHi()的this指向的是xialuo.proto，这个是没有name和age属性的，因此打印出来是undefined。

xialuo.sayHi();
xialuo.__proto__.sayHi()

image.png