原型——全面剖析，一次彻底弄懂👌

2024-02-09 13:35:31

原型是编程中一个非常重要的概念，尤其是在面向对象编程中。它允许我们创建可重用的对象和代码，从而使我们的代码更具模块化和可维护性。在本文中，我们将全面剖析原型，让您一次彻底弄懂它。

什么是原型？

原型（prototype）是所有引用类型都有的一个内置属性，它指向一个普通对象。当一个对象在查找一个属性的时候，它会先在自身中查找，如果没有找到，它就会沿着原型链向上查找，直到找到该属性或者到达原型链的末端。

每个引用类型都有一个隐式的原型（__proto__属性），该原型指向它的构造函数的prototype属性。例如，所有对象都有一个隐式的原型，该原型指向Object.prototype。

console.log(Object.prototype); 
// expected output: {}

原型链

原型链 （prototype chain）是对象的属性查找路径。当一个对象在查找一个属性时，它会沿着原型链向上查找，直到找到该属性或者到达原型链的末端。

例如，以下代码会输出"prototype_property"：

var obj = {
  property: "obj_property"
};

obj.__proto__.prototype_property = "prototype_property";

console.log(obj.prototype_property); 
// expected output: "prototype_property"

构造函数

构造函数 （constructor）是用于创建对象的函数。当一个构造函数被调用时，它会创建一个新的对象，并将其原型设置为构造函数的prototype属性。

例如，以下代码会创建一个具有"name"属性的新对象：

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

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

var person = new Person("John");

person.greet(); 
// expected output: "Hello, my name is John!"

继承

继承（inheritance）是面向对象编程中的一种机制，它允许一个对象从另一个对象继承属性和方法。在JavaScript中，继承是通过原型链来实现的。

例如，以下代码会创建一个新的对象，该对象继承了Person对象的属性和方法：

function Student(name, major) {
  Person.call(this, name); 
  this.major = major;
}

Student.prototype = Object.create(Person.prototype);

Student.prototype.study = function() {
  console.log(`I am studying ${this.major}!`);
};

var student = new Student("John", "Computer Science");

student.greet(); 
// expected output: "Hello, my name is John!"
student.study(); 
// expected output: "I am studying Computer Science!"

类

在ES6中，引入了新的class，它允许我们使用更简洁的语法来定义类和对象。

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

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

class Student extends Person {
  constructor(name, major) {
    super(name);
    this.major = major;
  }

  study() {
    console.log(`I am studying ${this.major}!`);
  }
}

var student = new Student("John", "Computer Science");

student.greet(); 
// expected output: "Hello, my name is John!"
student.study(); 
// expected output: "I am studying Computer Science!"