浙江省住建和城乡建设厅官方网站近期的新闻热点

大白话JavaScript原型链查找机制与继承实现原理

答题思路

1. 原型与原型链概念引入：先解释什么是原型（prototype）和原型链，让大家对这两个核心概念有基础认识。原型是 JavaScript 中实现继承的一种方式，每个对象都有一个内部属性 [[Prototype]] 指向它的原型对象，多个对象通过 [[Prototype]] 连接起来就形成了原型链。
2. 原型链查找机制讲解：说明当访问一个对象的属性或方法时，JavaScript 引擎是如何在原型链上进行查找的。从对象本身开始，如果没找到，就顺着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（Object.prototype）。
3. 继承实现原理阐述：介绍几种常见的继承实现方式，如原型链继承、构造函数继承、组合继承、寄生组合继承等，解释它们是如何利用原型链来实现继承的。
4. 代码示例与解释：通过具体的代码示例，详细解释每一步的操作和原理，让读者能更好地理解原型链查找机制和继承的实现。

回答范文

原型与原型链基本概念

在 JavaScript 里，每个对象都有一个隐藏的属性 [[Prototype]]，这个属性指向另一个对象，这个被指向的对象就是该对象的原型。当你访问一个对象的属性或方法时，JavaScript 首先会在这个对象本身查找，如果没找到，就会去它的原型对象里找，原型对象还有自己的原型，以此类推，直到找到或者到达原型链的顶端（Object.prototype），这一连串的原型对象就构成了原型链。

// 创建一个普通对象 person
const person = {name: 'John',sayHello: function() {console.log(`Hello, my name is ${this.name}`);}
};// 创建一个新对象 student，将 person 作为它的原型
const student = Object.create(person);
student.age = 20;// 当我们访问 student 的 name 属性时，首先会在 student 本身查找
// 发现 student 本身没有 name 属性，就会去它的原型 person 里查找
console.log(student.name); // 输出: John// 调用 sayHello 方法，同样先在 student 本身查找，没找到就去原型里找
student.sayHello(); // 输出: Hello, my name is John

原型链查找机制

当访问一个对象的属性或方法时，JavaScript 引擎会按照以下步骤在原型链上查找：

1. 检查对象本身是否有该属性或方法。
2. 如果没有，检查对象的原型对象是否有该属性或方法。
3. 重复步骤 2，直到找到该属性或方法，或者到达原型链的顶端（Object.prototype）。
4. 如果到达原型链顶端还没找到，返回 undefined。

// 创建一个对象 animal
const animal = {eat: function() {console.log('Eating...');}
};// 创建一个对象 dog，将 animal 作为它的原型
const dog = Object.create(animal);
dog.bark = function() {console.log('Woof!');
};// 访问 dog 的 eat 方法，dog 本身没有 eat 方法，会去它的原型 animal 里找
dog.eat(); // 输出: Eating...// 访问 dog 的 bark 方法，dog 本身有 bark 方法，直接调用
dog.bark(); // 输出: Woof!// 访问 dog 的 fly 方法，dog 本身和它的原型都没有 fly 方法，返回 undefined
console.log(dog.fly); // 输出: undefined

继承实现原理

原型链继承

原型链继承是最基本的继承方式，通过将子类的原型指向父类的实例来实现。

// 定义一个父类构造函数 Animal
function Animal() {this.species = 'Animal';
}// 给 Animal 的原型添加一个方法
Animal.prototype.showSpecies = function() {console.log(`Species: ${this.species}`);
};// 定义一个子类构造函数 Dog
function Dog() {}// 将 Dog 的原型指向 Animal 的一个实例，实现继承
Dog.prototype = new Animal();// 创建一个 Dog 的实例
const myDog = new Dog();// 访问继承来的属性和方法
myDog.showSpecies(); // 输出: Species: Animal

构造函数继承

构造函数继承是在子类构造函数中调用父类构造函数，通过 call 或 apply 方法来实现。

// 定义一个父类构造函数 Person
function Person(name) {this.name = name;
}// 给 Person 的原型添加一个方法
Person.prototype.sayName = function() {console.log(`My name is ${this.name}`);
};// 定义一个子类构造函数 Student
function Student(name, age) {// 在 Student 构造函数中调用 Person 构造函数Person.call(this, name);this.age = age;
}// 创建一个 Student 的实例
const myStudent = new Student('Alice', 20);// 可以访问继承来的属性
console.log(myStudent.name); // 输出: Alice// 但是不能访问 Person 原型上的方法
// myStudent.sayName(); // 会报错，因为 Student 实例没有继承 Person 原型上的方法

组合继承

组合继承结合了原型链继承和构造函数继承的优点，既可以继承父类的属性，又可以继承父类原型上的方法。

// 定义一个父类构造函数 Parent
function Parent(name) {this.name = name;
}// 给 Parent 的原型添加一个方法
Parent.prototype.sayName = function() {console.log(`My name is ${this.name}`);
};// 定义一个子类构造函数 Child
function Child(name, age) {// 构造函数继承，继承父类的属性Parent.call(this, name);this.age = age;
}// 原型链继承，继承父类原型上的方法
Child.prototype = new Parent();
// 修正构造函数指向
Child.prototype.constructor = Child;// 创建一个 Child 的实例
const myChild = new Child('Bob', 15);// 可以访问继承来的属性和方法
myChild.sayName(); // 输出: My name is Bob
console.log(myChild.age); // 输出: 15

寄生组合继承

寄生组合继承是对组合继承的优化，避免了组合继承中多次调用父类构造函数的问题。

// 定义一个父类构造函数 SuperClass
function SuperClass(name) {this.name = name;
}// 给 SuperClass 的原型添加一个方法
SuperClass.prototype.sayName = function() {console.log(`My name is ${this.name}`);
};// 定义一个子类构造函数 SubClass
function SubClass(name, age) {// 构造函数继承，继承父类的属性SuperClass.call(this, name);this.age = age;
}// 寄生组合继承的核心函数
function inheritPrototype(subType, superType) {// 创建一个新对象，该对象的原型是父类的原型const prototype = Object.create(superType.prototype);// 将新对象的构造函数指向子类prototype.constructor = subType;// 将子类的原型指向新对象subType.prototype = prototype;
}// 调用寄生组合继承函数
inheritPrototype(SubClass, SuperClass);// 创建一个 SubClass 的实例
const mySubClass = new SubClass('Charlie', 25);// 可以访问继承来的属性和方法
mySubClass.sayName(); // 输出: My name is Charlie
console.log(mySubClass.age); // 输出: 25

通过以上的介绍和代码示例，你应该对 JavaScript 原型链查找机制和继承实现原理有了更深入的理解。不同的继承方式有不同的优缺点，在实际开发中可以根据具体需求选择合适的继承方式。