JavaScript 原型链

本文被收录到:

JavaScript 教程

JavaScript 是互联网上最流行的编程语言。使用 JavaScript 可以开发网站、APP、小程序、游戏和服务器端。写这个教程是为了提高自己的 JavaScript 编程水平,而最好的学习方法就是“费曼学习法”,以教代学,以输出倒逼输入。最近日渐成熟的 AI 工具,刚好成为我写这个教程锦上添花。

目录

JavaScript 中的原型链(Prototype Chain)是实现继承的一种机制,它通过对象之间的原型关系连接起来形成的一条链式结构。这种机制允许一个对象可以访问到其原型对象上的属性和方法,进而可以一直向上查找,直到找到该属性或方法或者到达原型链的末端(null)。理解原型链对于深入学习JavaScript的面向对象编程至关重要。

基本概念

  1. 原型对象(prototype object):每个函数都有一个prototype属性,这个属性是一个对象,称为原型对象。原型对象的作用是包含可以由特定类型的所有实例共享的属性和方法。

  2. 原型链(prototype chain):当试图访问一个对象的属性或方法时,如果该对象本身没有这个属性或方法,JavaScript 引擎会继续在其原型对象上查找,如果原型对象也没有,则继续在原型对象的原型上查找,以此类推,形成一条链条,直到找到该属性或方法,或者查找到null(表示原型链的终点)。

  3. 构造函数(Constructor Function):用于创建特定类型的对象的函数。使用new关键字调用构造函数时,会自动为新创建的对象设置原型对象,即该构造函数的prototype属性所指向的对象。

  4. __proto__属性:每个JavaScript对象(除null外)都有一个内部属性[[Prototype]],可以通过非标准但广泛支持的__proto__访问器来访问。它指向该对象的原型对象。

示例

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

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

function Student(name, grade) {
    Person.call(this, name); // 继承Person属性
    this.grade = grade;
}

// 设置Student的原型为Person的实例,实现继承
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student; // 修复constructor指向

Student.prototype.study = function() {
    console.log("I am studying in grade " + this.grade);
};

var student = new Student("Alice", 10);
student.sayHello(); // 输出 "Hello, my name is Alice"
student.study();   // 输出 "I am studying in grade 10"

在这个例子中,Student的原型被设置为Person.prototype的一个副本,从而建立了原型链。这样,Student的实例就可以访问Person原型上的方法(如sayHello),同时也拥有自己的方法(如study)。

总结

原型链是JavaScript中实现继承的核心机制,它通过对象之间的原型链接,使得一个对象可以访问到其原型以及原型的原型上的属性和方法,从而实现了属性和方法的复用。理解和掌握原型链对于进行高效的面向对象编程至关重要。

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
真诚赞赏,手留余香
赞赏
搜神记
766 文章
4 教程
8 项目
随机推荐
Photoshop 使用插件支持 webp 格式的文件
WordPress 添加自定义接口
CSS3 实现 Switch 开关
JavaScript 私有方法和私有属性
JavaScript 原生拖放
BoarAPI 框架
CSS 滚动条样式修改
WordPress 数据库表结构