JavaScript继承与原型链

1. 继承和原型链是什么？
   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. 使用不同的方法来创建对象和改变原型链
   2.1 使用语法结构创建对象

   const o = { a: 1 };// 新创建的对象 o 以 Object.prototype 作为它的 [[Prototype]]// Object.prototype 的原型为 null。// 其原型链如下所示：// o --> Object.prototype ---> nullconst b = ["yo", "whadup", "?"];// 数组继承了 Array.prototype（具有 indexOf、forEach 等方法）// 其原型链如下所示：// b ---> Array.prototype ---> Object.prototype ---> nullfunction f() {return 2;}// 函数继承了 Function.prototype（具有 call、bind 等方法）// 其原型链如下所示：// f --> Function.prototype ---> Object.prototype ---> nullconst 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 ---> nullconst b = Object.create(a);// b ---> a ---> Object.prototype ---> nullconsole.log(b.a); // 1 (inherited)const c = Object.create(b);// c ---> b ---> a ---> Object.prototype ---> nullconst 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 ---> nullconsole.log(square.area); // 4square.sideLength = 3console.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 valconsole.log(obj.barProp); // bar val

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

参考mdn和阮一峰日志