JS基础进阶-揭秘原型与原型链

前端

2023-10-15 08:47:22

JavaScript，这门风靡全球的编程语言，以其灵活性、多样性以及广泛的应用场景而闻名。今天，我们将深入JavaScript的底层机制，探索原型与原型链，揭开这门语言奥妙的一角。

原型揭秘

在JavaScript中，每个对象都拥有一个称为原型的特殊属性。原型对象本身也是一个对象，它扮演着类的角色，而实例对象则扮演着对象的角色。原型对象定义了实例对象的默认行为和属性。

原型链的构建

当访问实例对象中不存在的属性或方法时，JavaScript会沿原型链向上查找。原型链是一条连接实例对象与其原型对象的链条，依次向上追溯。如果在原型对象中找到了所需要的属性或方法，那么它就会被返回。

继承的秘密

基于原型的继承机制是JavaScript区别于传统面向对象语言的关键所在。在基于类的继承中，子类通过继承父类的属性和方法来获得新的功能。而在JavaScript中，实例对象通过继承原型的属性和方法来实现继承。

妙用原型

理解了原型与原型链之后，我们就可以充分利用JavaScript的灵活性，实现一些高级用法：

动态添加属性和方法： 我们可以使用Object.defineProperty()方法动态地为对象添加新的属性或方法。
方法重写： 如果实例对象中存在与原型对象同名的方法，则实例对象中的方法将覆盖原型对象中的方法。
函数扩展： 函数也是对象，因此我们可以为函数添加新的属性和方法，从而扩展函数的功能。

运用实例

让我们通过一个示例来理解原型与原型链的实际应用：

// 创建一个Person原型对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 为Person原型对象添加一个sayHello方法
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name + " and I am " + this.age + " years old.");
};

// 创建一个Student实例对象
function Student(name, age, major) {
  // 使用call方法继承Person原型
  Person.call(this, name, age);
  this.major = major;
}

// 为Student原型对象添加一个study方法
Student.prototype.study = function() {
  console.log("I am studying " + this.major + ".");
};

// 创建一个student实例对象
const student = new Student("John Doe", 20, "Computer Science");

// 调用study方法
student.study(); // I am studying Computer Science.

// 调用sayHello方法
student.sayHello(); // Hello, my name is John Doe and I am 20 years old.