无需繁复，抛却拘束：前端告别js原型的道路

2024-01-01 13:57:33

解锁前端新境界，原型链不再困扰

在前端开发中，JavaScript 原型无疑是绕不开的知识盲区。它一直被认为是前端进阶必备的基础概念之一，却常常被认为晦涩难懂，是学习前端时最难以掌握的知识点之一。但其实，我们完全可以摒弃这种复杂的传统思想，开辟一条属于自己的前端之旅，让原型链不再成为前进路上的绊脚石。

首先，我们需要重新定义对JavaScript原型的认识。原型并不神秘，它是JavaScript赋予每个函数和对象的内置属性，本质上与其他属性并无本质差别。就像我们可以通过对象.属性这种方式访问对象的属性一样，我们也可以通过对象.__proto__这种方式访问对象的原型。

深入理解函数prototype和对象proto的本质

JavaScript中所有的引用类型，包括函数、对象和数组，都拥有一个叫做__proto__的属性，指向其原型对象。而函数还拥有一个prototype属性，指向其显式原型。这其实很容易理解，函数的prototype属性就是函数的构造函数的__proto__属性。

举个例子，我们可以使用以下代码查看数组的__proto__属性：

console.log(Array.__proto__ === Function.prototype); // true

这告诉我们，数组的原型是函数的prototype。同理，我们可以使用以下代码查看函数的prototype属性：

console.log(Array.prototype.__proto__ === Object.prototype); // true

这告诉我们，函数的prototype的原型是对象的__proto__。

JavaScript class的诞生，书写代码更简洁

值得一提的是，JavaScript中class的诞生，极大简化了面向对象编程的代码编写。class本质上只是一个语法糖，它将繁琐的构造函数和prototype属性的定义整合到了一起，让代码更加简洁易读。

以下是一个使用class定义对象的示例：

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

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

const person = new Person('John', 25);
console.log(person.getName()); // John
console.log(person.getAge()); // 25