一段代码两张图,帮你理解 JS 中的原型链继承

创建一个 Animal 类,Dog 类继承与 Animal 类,同时实例化一个 Dog 类为 dog,查看其显式原型与隐式原型之间的关系:

class Animal {
  constructor(name) {
    this.name = name
  }
  eat() {
    console.log("吃东西");
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name)
  }
  brak() {
    console.log("wang!");
  }
}

var dog = new Dog("huahua")
dog.eat() // 吃东西
dog.brak() // wang!


console.log(dog.__proto__); // Dog {}
console.log(Dog); // [Function: Dog]
console.log(Dog.prototype); // Dog {}
console.log(Dog.prototype.__proto__); // Animal {}
console.log(Dog.__proto__); // [Function: Animal]
console.log(Dog.__proto__.prototype); // Animal {}
console.log(Dog.__proto__.__proto__); // [Function]
console.log(Animal.prototype.__proto__); // {}

将以上的显式原型(prototype)与隐式原型(__proto__)转换为如下的可视关系:

原型链.png

网上流行的一张图:

发布了48 篇原创文章 · 获赞 28 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/u012925833/article/details/102802099