揭开Js 对象、原型、继承的奥秘，轻松掌握面向对象编程

2023-12-02 13:30:37

在探讨JavaScript的面向对象编程之前，需要理解几个核心概念：对象、原型以及继承。这些构成了JS中实现OOP（面向对象编程）的基础。

对象基础

JavaScript是一种基于对象的语言，几乎一切都能看作是对象的形式存在。一个简单的对象例子如下：

let person = {
  name: 'Alice',
  age: 25,
  greet: function() { return `Hello, my name is ${this.name}`; }
};

这里定义了一个person对象，具有name, age和一个方法greet()。每个属性或方法都是这个对象的一部分。

原型（Prototype）

原型是理解JavaScript继承的关键所在。每一个JS对象都有一个内部的[[Prototype]]链接，指向另一个对象，这个被指向的对象称为它的原型。当访问某个对象的属性或方法时，若该对象自身没有定义，则会沿着其[[Prototype]]链向上查找，直到找到或者到达链底（即null）。

let person = {
  name: 'Alice'
};

let student = Object.create(person);
student.greet = function() { return `Hello, I'm ${this.name}, a student.`; };

console.log(student.__proto__ === person); // 输出true，显示student的原型是person对象。

在这个例子中，student的对象通过Object.create()创建，并将person设置为其原型。因此student.greet()可以访问到从person继承来的属性。

掌握JavaScript中的继承

在JS里，继承可以通过构造函数、原型链或ES6的class关键字来实现。

构造函数与原型链方式

通过构造函数和原型链的方式进行继承较为传统。以下面的例子为例：

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

Person.prototype.greet = function() { return `Hello, I'm ${this.name}`; };

function Student(name, grade) {
  Person.call(this, name); // 调用父类构造函数
  this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

let alice = new Student('Alice', '10th');
console.log(alice.greet()); // 输出Hello, I'm Alice

这里，Person作为基类，通过call()方法让子类Student可以使用基类的构造函数。原型链则确保了学生实例可以访问到greet()方法。

使用ES6 Class

ES6引入了class语法，使得继承更加直观：

class Person {
  constructor(name) { this.name = name; }
  greet() { return `Hello, I'm ${this.name}`; }
}

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

let alice = new Student('Alice', '10th');
console.log(alice.greet()); // 输出Hello, I'm Alice