告别原型链困惑：JavaScript面向对象编程实战指南
项目地址: https://gitcode.com/GitHub_Trending/ja/javascript-questions 你是否也曾在JavaScript面向对象编程中迷失方向？为什么使用class语法创建的对象和直接用构造函数创建的对象行为不同？为什么修改一个对象的属性会影响到其他对象？本文将通过实际代码示例，帮你彻底搞懂JavaScript中原型（Prototype）、类（Class）与继承（Inheritance）的核心概念，让你在面试和工作中都能游刃有余。
读完本文后，你将能够：
- 理解原型链（Prototype Chain）的工作原理
- 区分构造函数和类的创建方式
- 掌握继承的多种实现方法及各自优缺点
- 解决实际开发中常见的面向对象问题
一、原型：JavaScript对象的秘密武器
1.1 什么是原型？
在JavaScript中，每个对象都有一个特殊的内置属性——原型（Prototype）。这个属性指向另一个对象，而被指向的对象也有自己的原型，这样就形成了一条原型链（Prototype Chain）。当我们访问一个对象的属性时，如果该对象本身没有这个属性，JavaScript就会沿着原型链向上查找，直到找到这个属性或者到达原型链的末端（null）。
1.2 原型链的实际应用
让我们通过zh-CN/README-zh_CN.md中的第3题来理解原型链的工作原理：
const shape = {
radius: 10,
diameter() {
return this.radius * 2
},
perimeter: () => 2 * Math.PI * this.radius
}
shape.diameter() // 输出：20
shape.perimeter() // 输出：NaN
为什么diameter方法能正确返回结果，而perimeter方法却返回NaN？这是因为diameter是一个普通函数，其中的this指向调用它的对象（即shape）；而perimeter是一个箭头函数，箭头函数没有自己的this，它的this指向定义时所在的词法环境（这里是全局对象window或global），而全局对象中没有radius属性，所以返回NaN。
1.3 函数也是对象
在JavaScript中，函数也是一种特殊的对象。我们可以像给普通对象添加属性一样给函数添加属性：
function bark() {
console.log('Woof!')
}
bark.animal = 'dog' // 合法！
这在zh-CN/README-zh_CN.md的第10题中得到了验证。虽然这种做法在实际开发中并不常见，但它展示了JavaScript中函数的灵活性。
二、构造函数与类：创建对象的两种方式
2.1 构造函数
构造函数是一种用于创建对象的特殊函数。通过new关键字调用构造函数可以创建一个新对象，并且这个新对象的原型会指向构造函数的prototype属性。
让我们看看zh-CN/README-zh_CN.md的第11题：
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const member = new Person("Lydia", "Hallie");
Person.getFullName = function () {
return `${this.firstName} ${this.lastName}`;
}
console.log(member.getFullName()); // 抛出TypeError
为什么会抛出错误？因为getFullName方法被直接添加到了Person构造函数上，而不是添加到Person.prototype上。因此，member实例无法访问到这个方法。正确的做法是将方法添加到原型上：
Person.prototype.getFullName = function () {
return `${this.firstName} ${this.lastName}`;
}
这样，所有通过Person构造函数创建的实例都能共享这个方法，这也是原型链的一个重要应用。
2.2 ES6类语法
为了让JavaScript的面向对象编程更接近传统的面向对象语言，ES6引入了class语法。不过需要注意的是，JavaScript中的class只是基于原型的语法糖，它并没有改变JavaScript的原型继承本质。
下面是一个使用class语法的例子：
class Chameleon {
static colorChange(newColor) {
this.newColor = newColor
return this.newColor
}
constructor({ newColor = 'green' } = {}) {
this.newColor = newColor
}
}
const freddie = new Chameleon({ newColor: 'purple' })
freddie.colorChange('orange') // 抛出TypeError
这是zh-CN/README-zh_CN.md中的第8题。colorChange是一个静态方法（通过static关键字定义），静态方法属于类本身，而不属于类的实例，所以通过实例调用静态方法会抛出错误。
三、继承：代码复用的艺术
3.1 原型链继承
原型链继承是JavaScript中最基本的继承方式。它通过将子类的原型设置为父类的实例来实现继承。
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
Animal.call(this, name); // 调用父类构造函数
}
Dog.prototype = Object.create(Animal.prototype); // 设置原型链
Dog.prototype.constructor = Dog; // 修复构造函数指向
Dog.prototype.speak = function() {
console.log(`${this.name} barks.`);
};
const dog = new Dog('Buddy');
dog.speak(); // 输出：Buddy barks.
3.2 class语法的继承
使用ES6的class语法可以更简洁地实现继承：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
class Dog extends Animal {
constructor(name) {
super(name); // 调用父类构造函数
}
speak() {
console.log(`${this.name} barks.`);
}
}
const dog = new Dog('Buddy');
dog.speak(); // 输出：Buddy barks.
这里的extends关键字用于指定父类，super关键字用于调用父类的构造函数或方法。
四、常见问题与解决方案
4.1 忘记使用new关键字
当我们忘记使用new关键字调用构造函数时，会发生什么？
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const sarah = Person('Sarah', 'Smith'); // 没有使用new
console.log(sarah); // 输出：undefined
这是zh-CN/README-zh_CN.md中的第12题。当不使用new关键字调用构造函数时，函数内部的this指向全局对象（浏览器中是window，Node.js中是global），而函数默认返回undefined，所以sarah的值是undefined。
为了避免这种错误，我们可以在构造函数中添加检查：
function Person(firstName, lastName) {
if (!(this instanceof Person)) {
return new Person(firstName, lastName);
}
this.firstName = firstName;
this.lastName = lastName;
}
这样，无论是否使用new关键字，都能创建正确的对象。
4.2 原型链的性能问题
虽然原型链实现了方法的共享，但在原型链过长时，属性查找可能会影响性能。此外，如果我们错误地修改了原型链上的属性，可能会影响所有继承自该原型的对象。
解决方法是：
- 保持原型链简洁
- 避免在运行时修改原型链
- 使用
hasOwnProperty方法检查属性是否属于对象本身：
const obj = { a: 1 };
console.log(obj.hasOwnProperty('a')); // true
console.log(obj.hasOwnProperty('toString')); // false，toString来自原型链
五、总结与展望
通过本文的学习，我们深入理解了JavaScript中的原型、类和继承的概念。我们了解到：
- 每个对象都有一个原型，形成原型链
- 构造函数和
class语法都是创建对象的方式，本质上都是基于原型 - 继承可以通过原型链实现，
class语法的extends关键字让继承更简洁 - 正确理解
this的指向对于面向对象编程至关重要
JavaScript的面向对象模型虽然与传统的面向对象语言有所不同，但它的灵活性和强大功能使得它在Web开发中占据了重要地位。随着JavaScript的不断发展，我们有理由相信它的面向对象特性会越来越完善。
如果你想进一步提升自己的JavaScript面向对象编程技能，建议深入学习以下内容：
- ES6及以上版本中与类相关的新特性（如私有字段、静态字段等）
- 设计模式在JavaScript中的应用
- TypeScript如何增强JavaScript的面向对象特性
记住，实践是掌握这些概念的最佳途径。多编写代码，多阅读优秀的开源项目（如zh-CN/README-zh_CN.md中提供的问题），你的JavaScript技能一定会不断提升！
希望本文能帮助你更好地理解JavaScript的面向对象编程。如果你有任何问题或建议，欢迎在评论区留言讨论。别忘了点赞、收藏本文，关注我获取更多JavaScript相关的优质内容！
下期预告：我们将深入探讨JavaScript中的异步编程模式，包括回调函数、Promise、async/await等，敬请期待！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
