正文

JS实现面向对象原理详解，从原型到Class，一步步学透彻

/0 浏览量
0530

JavaScript 是一种基于原型的编程语言，这意味着它使用原型来继承属性和方法。虽然现在有了 class 关键字来简化面向对象的代码，但理解原型和类背后的原理对于深入理解 JavaScript 仍然至关重要。

原型链

在 JavaScript 中，每个对象都有一个原型（prototype）属性，它指向创建该对象的函数的 prototype 属性。如果对象的原型属性不存在，则原型链会一直向上查找，直到找到 Object.prototype。

原型查找

当访问一个对象的属性或方法时，JavaScript 引擎会首先检查该对象自身是否有这个属性或方法。如果没有，它会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（Object.prototype）。

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

Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

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

console.log(person1.sayHello()); // Hello, my name is Alice
console.log(person2.sayHello()); // Hello, my name is Bob

在上面的例子中，person1 和 person2 都继承自 Person.prototype，因此它们都可以访问 sayHello 方法。

原型继承

原型继承是 JavaScript 中实现面向对象编程的一种方式。通过将一个对象的原型设置为另一个对象，可以实现继承。

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(`My name is ${this.name}`);
};

function Dog(name, breed) {
  Animal.call(this, name); // 继承 Animal 的构造函数
  this.breed = breed;
}

Dog.prototype = new Animal(); // 继承 Animal 的原型
Dog.prototype.constructor = Dog; // 修复 constructor 属性

const dog = new Dog('Buddy', 'Labrador');
dog.sayName(); // My name is Buddy

在上面的例子中，Dog 通过设置其原型为 Animal 的实例来实现对 Animal 的继承。

类（Class）

ES6 引入了 class 关键字，它为 JavaScript 提供了一种更简洁、更易读的面向对象语法。

类的定义

类是通过构造函数和原型链实现的语法糖。以下是如何使用 class 定义一个 Person 类：

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person('Alice');
person.sayHello(); // Hello, my name is Alice

在上面的例子中，Person 类具有一个构造函数和一个 sayHello 方法。通过使用 new 关键字，我们可以创建 Person 类的实例。

类的继承

类可以通过扩展另一个类来实现继承。以下是如何使用 class 实现继承：

class Dog extends Person {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

  sayBreed() {
    console.log(`I am a ${this.breed}`);
  }
}

const dog = new Dog('Buddy', 'Labrador');
dog.sayHello(); // Hello, my name is Buddy
dog.sayBreed(); // I am a Labrador

在上面的例子中，Dog 类通过 extends 关键字继承自 Person 类。super 关键字用于调用父类的构造函数。

总结

JavaScript 的面向对象编程是通过原型链和类实现的。理解原型链和类背后的原理对于深入理解 JavaScript 仍然至关重要。通过使用 class 关键字，我们可以更简洁、更易读地实现面向对象编程。

-- 展开阅读全文 --