(二)、JavaScript原型对象
原型对象
JavaScript 的原型机制是一种非常强大和灵活的面向对象编程概念,它使用一个对象作为另一个对象的模板,从而实现继承。在 JavaScript 中,每个对象都有一个原型对象,它定义了该对象的属性和方法,并且充当着该对象的模板。
原型对象的定义
在 JavaScript 中,我们可以通过使用构造函数来创建一个对象,构造函数中的 this 指向的是当前对象本身。同时,JavaScript 也提供了一种特殊的构造函数,称之为 Object 构造函数,它用来创建一个新的空对象。
当我们使用 Object 构造函数创建一个新的对象时,JavaScript 会自动为该对象创建一个原型对象,该原型对象会包含一些基本的属性和方法,例如 toString()、valueOf() 等。
除了使用 Object 构造函数创建对象之外,我们还可以通过使用原型对象来定义对象的属性和方法。JavaScript 中,每个对象都有一个 proto 属性,它指向该对象的原型对象。通过修改原型对象的属性和方法,我们可以影响到所有继承自该原型对象的对象。
例如,我们可以通过如下方式定义一个构造函数和它的原型对象:
// 定义一个构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 定义 Person 的原型对象
Person.prototype.sayHello = function() {
console.log('Hello, my name is ' + this.name + ', and I am ' + this.age + ' years old.');
};
在上面的例子中,我们定义了一个构造函数 Person,它包含两个属性 name 和 age。同时,我们还定义了一个 sayHello 方法,并将它添加到了 Person 的原型对象中。
原型对象的原理
当我们使用 new 关键字调用构造函数创建一个新的对象时,JavaScript 会自动为该对象创建一个 proto 属性,并将该属性指向构造函数的原型对象。
例如,当我们使用如下代码创建一个 Person 对象时:
var person = new Person('John', 30);
JavaScript 会先创建一个新的空对象,然后将该对象的 proto 属性指向 Person 构造函数的原型对象。接着,JavaScript 会调用 Person 构造函数,并将 this 指向该新创建的对象,最后将 name 和 age 属性添加到该对象中。
当我们调用 person 对象的 sayHello 方法时,JavaScript 首先会查找该对象本身是否具有该方法,由于 person 对象本身并没有该方法,因此 JavaScript 会查找 person 对象的 proto 属性指向的原型对象中是否具有该方法,如果有,就会调用该方法。如果原型对象中也没有该方法,JavaScript 会继续查找原型对象的 proto 属性指向的父原型对象,直到找到该方法为止,或者查找到原型链的末端仍未找到该方法,此时 JavaScript 会抛出一个 TypeError 异常。
在 JavaScript 中,每个对象都有一个原型链,它由一些原型对象构成,这些原型对象通过它们的 proto 属性连接在一起。当我们访问一个对象的属性或方法时,JavaScript 会按照如下的顺序查找该属性或方法:
首先查找该对象本身是否具有该属性或方法; 如果对象本身没有该属性或方法,则查找该对象的原型对象是否具有该属性或方法; 如果原型对象也没有该属性或方法,则查找原型对象的原型对象是否具有该属性或方法; 依次类推,直到找到该属性或方法为止,或者查找到原型链的末端仍未找到该属性或方法,此时 JavaScript 会抛出一个 TypeError 异常。 通过原型链,JavaScript 实现了对象的继承机制,这种继承机制既简单又灵活。当我们修改一个原型对象的属性或方法时,所有继承自该原型对象的对象都会受到影响,从而实现了代码的复用。
例如,我们可以通过如下方式定义一个新的构造函数 Student,并继承自 Person:
// 定义一个新的构造函数 Student
function Student(name, age, major) {
// 调用父类构造函数,并传入参数
Person.call(this, name, age);
this.major = major;
}
// 设置 Student 的原型对象为 Person 的实例,从而继承 Person 的属性和方法
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
// 定义 Student 的新方法
Student.prototype.study = function() {
console.log('I am studying ' + this.major);
};
在上面的例子中,我们首先使用 call 方法调用了父类 Person 的构造函数,并传入了相应的参数。然后,我们将 Student 的原型对象设置为 Person 的实例,并修改该原型对象的 constructor 属性,以便它指向 Student 构造函数。
通过如上的方式,我们实现了一个新的构造函数 Student,并继承自 Person。同时,我们还为 Student 添加了一个 study 方法,以便它具有自己的行为。
总结
JavaScript 的原型机制是一种非常强大和灵活的面向对象编程概念,它通过一个对象作为另一个对象的模板,实现了继承。每个对象都有一个原型对象,它定义了该对象的属性和方法,并充当着该对象的模板。
JavaScript 中,每个对象都有一个 proto 属性,它指向该对象的原型对象。通过修改原型对象的属性和方法,我们可以影响到所有继承自该原型对象的对象。
JavaScript 的原型机制通过原型链实现了对象的继承机制,这种继承机制既简单又灵活,可以在不修改已有对象的基础上,对它们进行扩展和修改,从而实现了代码的复用。
在开发 JavaScript 应用程序时,我们可以使用原型机制来实现对象之间的继承和组合,从而使代码更加简洁、易于维护和扩展。
在使用原型机制时,我们需要注意以下几点:
对象的原型对象可以是另一个对象或 null。 当我们访问对象的属性或方法时,JavaScript 会按照原型链的顺序查找该属性或方法。 对象的原型对象可以通过 proto 属性访问和修改。 我们可以通过修改原型对象的属性和方法,影响到所有继承自该原型对象的对象。
共享资源关注公众号获取
本文由 mdnice 多平台发布