JavaScript原型、原型链

2024-02-03 10:03:56

JavaScript中的原型

在JavaScript中，原型（prototype）是对象继承的基础。当创建一个函数时，JavaScript会自动创建一个prototype属性，指向一个对象。这个对象被称为该函数的原型对象（prototype object）。

例如：

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

当我们调用Person函数时，JavaScript会为其创建一个prototype属性，指向一个对象。这个对象包含了一个名为constructor的属性，指向Person函数本身。

Person.prototype.constructor === Person // true

原型对象还包含其他属性和方法，这些属性和方法可以被函数创建的所有对象共享。

原型链

原型链（prototype chain）是JavaScript中对象继承的机制。当我们访问一个对象的属性或方法时，JavaScript会首先在该对象中查找。如果找不到，则会沿着原型链向上查找，直到找到该属性或方法。

例如：

const person = new Person('John Doe', 30);

console.log(person.name); // 'John Doe'
console.log(person.age); // 30
console.log(person.constructor); // [Function: Person]

在上面的示例中，我们首先访问了person对象的name属性，name属性存在于person对象中，因此JavaScript直接返回了它的值。

然后我们访问了person对象的age属性，age属性也存在于person对象中，因此JavaScript也直接返回了它的值。

最后我们访问了person对象的constructor属性，constructor属性不存在于person对象中，因此JavaScript沿着原型链向上查找，直到在Person函数的原型对象中找到了它。

使用原型链实现继承

在JavaScript中，我们可以使用原型链实现继承。

例如：

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

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

在这个示例中，我们创建了一个Student函数，它继承了Person函数。

首先，我们在Student函数中调用了Person函数，并传递了name和age参数。这样，Student函数就继承了Person函数的属性和方法。

然后，我们使用Object.create()方法创建了一个新的对象，并将其赋值给Student.prototype。这样，Student函数的原型对象就继承了Person函数的原型对象。

最后，我们设置了Student.prototype.constructor属性，指向Student函数本身。这样，Student函数的原型对象就指向了正确的构造函数。

现在，我们就可以使用Student函数创建对象了。

const student = new Student('John Doe', 30, 'Computer Science');

console.log(student.name); // 'John Doe'
console.log(student.age); // 30
console.log(student.major); // 'Computer Science'
console.log(student.constructor); // [Function: Student]