JavaScript继承与原型链

继承和原型链是什么？
1.1 在继承中，子类继承父类的特征和行为，使得子类对象具有父类的实例域和方法。这意味着子类可以使用父类的方法和属性，使用继承的目的是为了更好设置实例的公共属性和方法，如下例子：

  // 以类的形式说明继承，直观一点
  // 父类
  class Animal {
      
      
    constructor() {
      
      
      this.area = '广东'
    }
    helloMethod () {
      
      
      return `它是${
        
        this.area}的动物`
    }
  }
  // 子类，子类继承了父类的属性和方法
  class Dog extends Animal {
      
      
    constructor(name) {
      
      
      super() // 调用父类的构造函数
      this.name = name
    }
    introduce () {
      
      
      return `${
        
        this.name}是一只狗`
    }
  }
  const dog1 = new Dog('咕咕')
  console.log(dog1.introduce()); // 咕咕是一只狗--introduce是自身实例的方法
  console.log(dog1.name); //  咕咕--name是自身实例的属性
  console.log(dog1.area); //  广东--area是继承了父类的属性
  console.log(dog1.helloMethod()); //  它是广东的动物--helloMethod是继承了父类的方法

1.2 原型链：是javascript中实现对象间继承和代码重用的一种机制。
JavaScript 只有一种结构：对象（广义的对象，不单指object）。每个对象都有一个私有属性指向另一个名为原型（prototype）的对象。原型对象也有一个自己的原型，层层向上直到一个对象的原型为 null。根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最后一个环节。

当你试图访问一个对象的属性时，如果在该对象本身中找不到该属性，就会在其原型中搜索该属性，如果仍然找不到，那么就会搜索原型的原型，以此类推，直到找到一个名字匹配的属性或到达原型链的末尾（即原型为null的对象）。

使用不同的方法来创建对象和改变原型链
2.1 使用语法结构创建对象

const o = {
      
       a: 1 };
// 新创建的对象 o 以 Object.prototype 作为它的 [[Prototype]]
// Object.prototype 的原型为 null。
// 其原型链如下所示：
// o ---> Object.prototype ---> null

const b = ["yo", "whadup", "?"];
// 数组继承了 Array.prototype（具有 indexOf、forEach 等方法）
// 其原型链如下所示：
// b ---> Array.prototype ---> Object.prototype ---> null

function f() {
      
      
  return 2;
}
// 函数继承了 Function.prototype（具有 call、bind 等方法）
// 其原型链如下所示：
// f ---> Function.prototype ---> Object.prototype ---> null

const p = {
      
       b: 2, __proto__: o };
// 可以通过 __proto__ 字面量属性将新创建对象的
// [[Prototype]] 指向另一个对象。
// （不要与 Object.prototype.__proto__ 访问器混淆,Object.prototype.__proto__添加原型链方法已经不推荐使用）
// 其原型链如下所示：
// p ---> o ---> Object.prototype ---> null

2.2 使用构造函数

function Family (name) {
      
      
  this.nameOfFamily = `${
        
        name}的家庭成员`
  this.persons = []
}
// 在Family原型链上添加addPerson方法，供后续创建的实例访问此公共的方法
Family.prototype.addPerson = function (name) {
      
      
  this.persons.push(name)
}

const family = new Family('李四')
  family.addPerson('李四')
  family.addPerson('李四的妹妹')
  console.log(family.nameOfFamily); // 李四的家庭成员
  console.log(family.persons); // ['李四', '李四的妹妹']
  
const family1 = new Family('王五')
  family1.addPerson('王五')
  family1.addPerson('王五的弟弟')
  console.log(family1.nameOfFamily); // 王五的家庭成员
  console.log(family1.persons); // ['王五', '王五的弟弟']

2.3 使用 Object.create()

const a = {
      
       a: 1 };
// a ---> Object.prototype ---> null

const b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1 (inherited)

const c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

const d = Object.create(null);
// d ---> null（d 是一个直接以 null 为原型的对象）
console.log(d.hasOwnProperty);
// undefined，因为 d 没有继承 Object.prototype

2.4 使用类class

  class Polygon {
      
      
    constructor(height, width) {
      
      
      this.height = height;
      this.width = width;
    }
  }

  class Square extends Polygon {
      
      
    constructor(sideLength) {
      
      
      super(sideLength, sideLength);
    }

    get area() {
      
      
      return this.height * this.width;
    }

    set sideLength(newLength) {
      
      
      this.height = newLength;
      this.width = newLength;
    }
  }

  const square = new Square(2);
  // square ---> Square.prototype ---> Polygon.prototype ---> Object.prototype ---> null
  console.log(square.area); // 4
  square.sideLength = 3
  console.log(square.area); // 9

2.5 使用 Object.setPrototypeOf()

const obj = {
      
       a: 1 };
const anotherObj = {
      
       b: 2 };
Object.setPrototypeOf(obj, anotherObj);
// obj ---> anotherObj ---> Object.prototype ---> null

2.6 使用 proto 访问器（性能不佳且已被弃用）

  const obj = {
      
      };
  // 请不要使用该方法：仅作为示例。
  obj.__proto__ = {
      
       barProp: "bar val" };
  obj.__proto__.__proto__ = {
      
       fooProp: "foo val" };
  console.log(obj.fooProp); // foo val
  console.log(obj.barProp); // bar val

除非是为了与新的 JavaScript 特性兼容，否则永远不应扩展原生原型。

参考mdn和阮一峰日志

JavaScript继承与原型链

猜你喜欢