JavaScript 原型与原型链的特点,使用场景及案例

embedded/2024/9/23 14:43:18/

在 JavaScript 中,原型(prototype)原型链(prototype chain) 是核心的概念,它们是 JavaScript 实现继承的基础。下面将详细解释这些概念、它们的特点、使用场景及案例。


1. 原型(Prototype)

概念:
  • 每个 JavaScript 对象(包括函数)都有一个隐藏的内部属性叫做 [[Prototype]],这个属性指向另一个对象,这个对象就是它的原型
  • 当你创建一个对象时,该对象会从它的原型对象继承属性和方法。构造函数创建的每个对象实例都有一个隐式的原型引用。
关键点:
  • 所有的 JavaScript 对象都有原型,除了一些特殊情况(如 Object.prototype 的原型是 null)。
  • 原型是用来实现对象属性和方法共享的机制。通过原型,多个对象可以共享相同的属性和方法,节省内存。
  • 通过 constructor.prototype 可以访问构造函数的原型对象。
案例:
javascript">function Person(name) {this.name = name;
}// 在原型上添加一个方法
Person.prototype.greet = function() {console.log(`Hello, my name is ${this.name}`);
};const john = new Person('John');
john.greet(); // 输出:Hello, my name is John// 实例对象 john 的原型指向 Person.prototype
console.log(john.__proto__ === Person.prototype); // true

在这个例子中,Person 构造函数的所有实例(如 john)都共享 greet 方法,因为它们的原型对象是 Person.prototype


2. 原型链(Prototype Chain)

概念:
  • 原型链 是指对象通过其 [[Prototype]] 属性(也可以通过 __proto__ 访问)一层一层地向上查找属性和方法,直到找到或到达 null 终止搜索的过程。
  • 当访问一个对象的属性或方法时,如果该对象自身没有这个属性或方法,JavaScript 引擎会沿着原型链向上查找。
关键点:
  • 原型链是实现继承的基础,通过原型链,JavaScript 的对象可以继承属性和方法。
  • 原型链的终点是 Object.prototype,它的 [[Prototype]]null,表示原型链的结束。
  • 如果原型链中没有找到所需的属性或方法,JavaScript 会返回 undefined
案例:
javascript">function Animal() {this.species = 'Animal';
}Animal.prototype.move = function() {console.log('Animal is moving');
};function Dog(name) {this.name = name;
}// Dog 继承自 Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;const dog = new Dog('Rex');
console.log(dog.name);   // Rex
dog.move();              // Animal is moving// 原型链:dog --> Dog.prototype --> Animal.prototype --> Object.prototype --> null
console.log(dog.__proto__ === Dog.prototype);           // true
console.log(Dog.prototype.__proto__ === Animal.prototype); // true

在这个例子中,dog 实例没有 move 方法,但通过原型链,它从 Animal.prototype 中继承了 move 方法。


3. 特点与使用场景

3.1 原型(Prototype)的特点
  • 共享属性和方法:通过原型对象,多个实例对象可以共享相同的方法和属性。这在节省内存方面很有效,尤其是在创建大量对象时。

  • 动态修改:你可以在程序运行时动态修改原型对象,比如添加新的方法或属性,这些修改会立即影响到所有实例。

  • 内置对象的原型:JavaScript 的内置对象(如 ArrayStringFunction)也有原型,可以通过修改这些原型来影响内置对象的行为。

3.2 原型链(Prototype Chain)的特点
  • 继承机制:原型链是 JavaScript 实现继承的核心机制。子对象可以通过原型链继承父对象的属性和方法。

  • 原型链的查找过程:当访问对象的属性或方法时,JavaScript 会首先检查对象自身的属性和方法,如果没有找到,会沿着原型链逐层向上查找,直到找到或者到达 null

  • 性能考虑:虽然原型链机制简化了继承,但过长的原型链可能导致性能问题,因为每次访问属性时都要逐层查找。


4. 原型与原型链的实际使用场景

4.1 使用场景:共享方法

通过将方法定义在构造函数的原型对象上,可以在所有实例之间共享这些方法,从而减少内存消耗。

javascript">function Car(make, model) {this.make = make;this.model = model;
}// 在原型上定义方法
Car.prototype.start = function() {console.log(`${this.make} ${this.model} is starting`);
};const car1 = new Car('Toyota', 'Corolla');
const car2 = new Car('Honda', 'Civic');car1.start(); // Toyota Corolla is starting
car2.start(); // Honda Civic is startingconsole.log(car1.start === car2.start); // true

这里,car1car2 实例共享了同一个 start 方法,避免了重复定义。

4.2 使用场景:继承和原型链

当创建复杂的类层次结构时,可以利用原型链来实现继承,子类继承父类的属性和方法。

javascript">function Mammal(name) {this.name = name;
}Mammal.prototype.speak = function() {console.log(`${this.name} makes a sound`);
};function Cat(name) {Mammal.call(this, name); // 继承父类的属性
}Cat.prototype = Object.create(Mammal.prototype); // 继承父类的方法
Cat.prototype.constructor = Cat;const kitty = new Cat('Kitty');
kitty.speak(); // Kitty makes a sound

Cat 继承了 Mammalspeak 方法,同时通过 Mammal.call(this, name) 来继承 Mammal 的属性。

4.3 使用场景:扩展内置对象

通过扩展 JavaScript 内置对象的原型,可以给内置对象添加新的功能或方法。

javascript">// 给 Array 添加一个新方法
Array.prototype.last = function() {return this[this.length - 1];
};const arr = [1, 2, 3];
console.log(arr.last()); // 输出 3

在这个例子中,我们给 Array 原型添加了一个 last 方法,所有的数组对象都可以直接使用它。


5. 原型与原型链的总结

  • 原型 是每个对象(特别是函数的实例对象)都具有的一个属性,指向另一个对象。通过这个属性,JavaScript 对象可以共享属性和方法。

  • 原型链 是多个对象之间的层级关系,体现了对象从另一个对象继承属性和方法的机制。对象在访问某个属性时,会沿着原型链逐层查找,直到找到为止。

  • 使用原型和原型链的场景 通常包括创建大量对象时为了减少内存开销而共享方法、实现继承机制以及扩展内置对象的功能。

掌握原型和原型链的原理,是理解 JavaScript 对象模型及其继承机制的关键。


http://www.ppmy.cn/embedded/115645.html

相关文章

爬虫技术抓取网站数据

爬虫技术,也称为网络数据采集或网页抓取,是一种自动化程序,用于从互联网上获取结构化或半结构化的信息。它通过模拟用户浏览网页的行为,利用HTTP请求(GET、POST等)向网站发送请求,并解析服务器返…

【对比学习串烧】 SimSiam MoCov3 DINO

文章目录 文章列表十一、SimSiam11.1 研究背景11.2 解决问题11.3 实施方案11.4 论文摘要11.5 文章图示图1:SimSiam架构图2:SimSiam与/无stop-gradient的比较图3:不同孪生网络架构的比较 十二、MoCo v312.1 研究背景12.2 解决问题12.3 论文摘要…

端口安全技术原理与应用

目录 概述 端口安全原理 端口安全术语 二层安全地址配置 端口模式下配置 全局模式下配置 动态学习 二层数据包处理流程 三层安全地址配置 三层数据包处理流程 端口安全违例动作和安全地址老化时间 查看命令 端口安全的注意事项 小结 概述 园区网的接入安全关系着…

HTML5简介的水果蔬菜在线商城网站源码系列模板3

文章目录 1.设计来源1.1 主界面1.2 商品列表1.3 商品信息1.4 购物车1.5 其他页面效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板,程序开发,在线开发,在线沟通 作者:xcLeigh 文章地址:https://blog.csdn.ne…

Vuex的使用

1.Vuex 概述 1.是什么 Vuex 是一个 Vue 的 状态管理工具,状态就是数据。 大白话:Vuex 是一个插件,可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如:购物车数据 个人信息数 2.使用场景 某个状态 在 很多个组件 来使用…

橙子质量检测系统源码分享

橙子质量检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vis…

OpenAI或于9月24日发布ChatGPT高级语音模式

🦉 AI新闻 🚀 OpenAI或于9月24日发布ChatGPT高级语音模式 摘要:科技媒体报道,OpenAI计划在9月24日进一步推广ChatGPT的高级语音模式,预计将正式发布。该模式于7月向部分ChatGPT Plus用户开放,提供更为真实…

Apache CVE-2021-41773 漏洞攻略

漏洞简介 该漏洞是由于Apache HTTP Server 2.4.49版本存在⽬录穿越漏洞,在路径穿越⽬录 <Directory/>Require all granted</Directory>允许被访问的的情况下&#xff08;默认开启&#xff09;&#xff0c;攻击者可利⽤该路径穿越漏洞读取到Web⽬录之外的其他⽂件在…