原型链与继承：探索JavaScript的封装世界

前端

2023-11-12 09:20:41

原型链的魔力：揭示 JavaScript 中对象的继承

原型链：对象之间的纽带

在 JavaScript 的奇异世界中，每个对象都有一个秘密武器——原型链。这是一个幕后的结构，将对象连接起来，就像一串闪烁的圣诞灯一样。原型链允许对象从其祖先那里继承属性和方法，就像皇室成员继承王位一样。

当您访问对象的属性或方法时，JavaScript 首先在该对象本身中寻找。如果找不到，它将沿着原型链向上游走，直到找到所需的属性或方法。这种查找过程被称为原型链上溯。

继承的艺术：从父级到子级的传承

原型链的魔法在于，它使我们能够轻松实现对象的继承。就像人类家庭中的父母和孩子一样，JavaScript 对象可以通过将另一个对象设置为其原型来创建父子关系。这样，子对象就可以继承父对象的全部财产，包括属性和方法。

我们可以使用 Object.create() 方法或 proto 属性来设置对象的原型。让我们举个例子：

const parent = {
  name: '父对象',
  age: 42
};

const child = Object.create(parent);

console.log(child.name); // '父对象'
console.log(child.age); // 42

child.name = '子对象';

console.log(child.name); // '子对象'
console.log(parent.name); // '父对象'

在这个例子中，我们创建了一个父对象 parent 和一个子对象 child。child 对象继承了 parent 对象的所有属性和方法。当我们访问 child 对象的 name 属性时，JavaScript 会首先在 child 对象本身中寻找。由于 child 对象没有 name 属性，因此它会沿着原型链向上寻找，并在 parent 对象中找到了 name 属性。

封装的秘密：模块化设计的关键

原型继承与封装的概念携手同行。封装就像一个魔术盒子，将对象的属性和方法隐藏起来，只向外界展示必要的接口。通过封装，我们可以提高代码的可维护性和安全性。

在 JavaScript 中，我们可以使用闭包来实现对象的封装。闭包是可以在外部函数中访问内部函数变量的函数。

function createEncapsulatedObject() {
  const name = '私有属性';

  return {
    getName: function() {
      return name;
    }
  };
}

const encapsulatedObject = createEncapsulatedObject();

console.log(encapsulatedObject.name); // undefined
console.log(encapsulatedObject.getName()); // '私有属性'

在这个例子中，我们创建了一个名为 createEncapsulatedObject() 的函数，它返回一个封装的对象。在这个对象中，name 属性是私有的，不能直接从外部访问。但是，我们可以通过 getName() 方法来访问 name 属性。

类的引入：ES6 的新利器

ES6 中引入的类是一种语法糖，它使我们能够使用更简洁的语法来定义类。类在底层仍然使用原型链来实现继承。

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

  greet() {
    console.log(`你好，我是${this.name}，我今年${this.age}岁。`);
  }
}

class Child extends Parent {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }

  goToSchool() {
    console.log(`我叫${this.name}，我今年${this.age}岁，我正在${this.school}上学。`);
  }
}

const parent = new Parent('父对象', 42);
const child = new Child('子对象', 18, '清华大学');

parent.greet();
child.greet();
child.goToSchool();