正文

JavaScript面向对象入门：从实例到原型，轻松掌握类与继承的奥秘

/0 浏览量
0624

JavaScript 是一种非常灵活的编程语言，它拥有多种编程范式，其中面向对象编程（OOP）是非常重要的一种。在 JavaScript 中，我们可以通过多种方式来实现面向对象的编程，包括使用构造函数、原型链以及 ES6 引入的类（class）。本文将带您从实例到原型，逐步深入了解 JavaScript 的面向对象编程，轻松掌握类与继承的奥秘。

实例与构造函数

在 JavaScript 中，创建对象的一个常见方法是使用构造函数。构造函数是一种特殊的函数，用于创建对象。当我们调用构造函数时，它会创建一个新的空对象，并将其作为 this 的上下文。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

在上面的代码中，Person 是一个构造函数，它接收两个参数：name 和 age。我们通过 new 关键字创建 person1 和 person2 两个实例，它们都继承自 Person 构造函数。

原型链

在 JavaScript 中，每个对象都有一个原型（prototype）属性。当我们尝试访问一个对象的属性或方法时，如果该对象自身没有该属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法为止。

console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

在上面的代码中，__proto__ 是一个非标准的属性，用于访问对象的原型。通过这个属性，我们可以看到 person1 和 person2 的原型都是 Person.prototype。

我们可以给原型添加方法，这样所有实例都可以访问到这些方法。

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

person1.sayHello(); // Hello, my name is Alice and I am 25 years old.
person2.sayHello(); // Hello, my name is Bob and I am 30 years old.

在上面的代码中，我们在 Person.prototype 上添加了一个 sayHello 方法，这样 person1 和 person2 都可以访问到这个方法。

类与继承

ES6 引入了类（class）的概念，这使得面向对象编程在 JavaScript 中更加简洁和直观。在类中，我们可以定义构造函数、方法以及静态方法。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person1 = new Person('Alice', 25);
const person2 = new Person('Bob', 30);

在上面的代码中，我们定义了一个 Person 类，它有一个构造函数和一个 sayHello 方法。与构造函数类似，我们使用 new 关键字创建类的实例。

JavaScript 支持多种继承方式，其中最常用的是原型链继承、构造函数继承和组合继承。

原型链继承

function Child(name, age, gender) {
  Person.call(this, name, age);
  this.gender = gender;
}

Child.prototype = new Person();

const child1 = new Child('Alice', 25, 'Female');
child1.sayHello(); // Hello, my name is Alice and I am 25 years old.

在上面的代码中，我们使用原型链继承的方式让 Child 类继承 Person 类的方法。

构造函数继承

function Child(name, age, gender) {
  Person.call(this, name, age);
  this.gender = gender;
}

const child1 = new Child('Alice', 25, 'Female');
child1.sayHello(); // Hello, my name is Alice and I am 25 years old.

在上面的代码中，我们使用构造函数继承的方式让 Child 类继承 Person 类的属性和方法。

组合继承

function Child(name, age, gender) {
  Person.call(this, name, age);
  this.gender = gender;
}

Child.prototype = new Person();

const child1 = new Child('Alice', 25, 'Female');
child1.sayHello(); // Hello, my name is Alice and I am 25 years old.

在上面的代码中，我们使用组合继承的方式结合了原型链继承和构造函数继承的优点。

总结

本文介绍了 JavaScript 面向对象编程的基本概念，包括实例、构造函数、原型链、类和继承。通过本文的学习，您可以轻松掌握 JavaScript 的面向对象编程，并在实际项目中灵活运用。希望本文对您有所帮助！

-- 展开阅读全文 --