正文

揭秘JS原型机制：从零开始理解原型链与继承奥秘

/0 浏览量
0417

JavaScript（JS）作为一门广泛使用的编程语言，其原型机制是其核心特性之一。理解原型链与继承对于深入掌握JavaScript至关重要。本文将从零开始，逐步揭开JavaScript原型机制的神秘面纱。

原型与原型链

在JavaScript中，每个函数都有一个原型（prototype）属性，该属性是一个对象，用于存储所有实例共享的属性和方法。当我们创建一个函数时，JavaScript引擎会自动为该函数创建一个原型对象。

原型对象

原型对象是一个普通对象，它包含所有实例共享的属性和方法。当我们访问一个对象的属性或方法时，如果该对象自身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到为止。

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

const person1 = new Person('Alice');
const person2 = new Person('Bob');

console.log(person1.sayName()); // Alice
console.log(person2.sayName()); // Bob

在上面的例子中，Person 函数有一个原型对象，该对象包含一个 sayName 方法。当创建 person1 和 person2 实例时，它们都继承了 sayName 方法。

原型链

原型链是JavaScript对象之间的一种连接关系。当我们访问一个对象的属性或方法时，如果该对象自身没有这个属性或方法，JavaScript引擎会沿着原型链向上查找，直到找到为止。

console.log(person1.sayName()); // Alice
console.log(person1.hasOwnProperty('sayName')); // false
console.log(Person.prototype.hasOwnProperty('sayName')); // true

在上面的例子中，person1 实例没有 sayName 属性，但仍然可以访问它。这是因为 person1 继承了 Person 函数的原型对象，而 Person 函数的原型对象中包含 sayName 方法。

继承

JavaScript中的继承是通过原型链实现的。我们可以使用 extends 关键字来实现函数之间的继承。

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

Student.prototype = new Person();
Student.prototype.constructor = Student;

Student.prototype.sayGrade = function() {
  console.log(this.grade);
};

const student1 = new Student('Alice', '10A');
console.log(student1.name); // Alice
console.log(student1.grade); // 10A
console.log(student1.sayName()); // Alice
console.log(student1.sayGrade()); // 10A

在上面的例子中，Student 函数通过原型链继承了 Person 函数的属性和方法。同时，我们为 Student 函数添加了一个新的方法 sayGrade。

总结

通过本文的介绍，相信你已经对JavaScript的原型机制有了更深入的了解。原型链与继承是JavaScript的核心特性，对于编写高效、可维护的代码至关重要。希望本文能帮助你更好地掌握JavaScript这门语言。

-- 展开阅读全文 --