当前位置: 首页 > news >正文

JavaScript 原型链那些事

在讲原型之前我们先来了解一下函数。

在JS中,函数的本质就是对象,它与其他对象不同的是,创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢?是一个叫做Function的特殊函数,通过newFunction 产生的对象就是一个函数。

function f1() {}
//上面的函数等同于:
var f1 = new Function();function sum(a, b) {return a + b;
}
//上面的函数等同于:
var sum = new Function("a", "b", "return a + b");//前面的是函数形参名,最后一个参数是函数体

当一个函数被创建后,这个函数就会自动附带一个属性prototype,它就是一个Object对象,代表着函数的原型。也就是说prototype就是原型对象。
原型对象中包含两个属性:constructor和__proto__。constructor这个属性是指创建原型的函数,它指向函数本身。所以有以下关系:
在这里插入图片描述

var Person = function () { };
var p = new Person();    

看这个 new 究竟做了什么?

我们把 new 的过程拆分成以下三步:

  1. var p={}; 也就是说,初始化一个对象p。

  2. p.proto=Person.prototype;

  3. Person.call§;也就是说构造p,也可以称之为初始化p。

总结原型链的工作原理:

1. 原型对象:在JavaScript中,对象可以有一个原型对象,该对象本身也是一个对象。对象的原型对象通过内部属性[[Prototype]]来引用,这个属性在ES5可以通过Object.getPrototypeOf()或__proto__(非标准但被广泛实现的属性)访问。

2. 属性查找:当访问一个对象的属性时,如果该属性在对象自身上不存在,JavaScript 引擎会沿着[[Prototype]]链向上查找,直到找到该属性或到达链的末端。

3. 构造函数的prototype属性:每个函数都有一个prototype属性,指向一个对象,这个对象是使用该构造函数创建的所有实例的原型。

4. 原型链的末端:所有原型链最终都指向Object.prototype,这是内置的Object构造函数的prototype属性。Object.prototype的原型是null,表示原型链的结束。

代码示例:

示例1:原型链的基础

function Person(name) {this.name = name;
}// 为Person构造函数的prototype添加一个方法
Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};// 创建Person的实例
var person = new Person("Alice");// 调用原型链上的方法
person.sayHello(); // 输出: Hello, my name is Alice// 查看person的原型
console.log(Object.getPrototypeOf(person) === Person.prototype); // 输出: true

示例2:原型链的继承

// 假设我们有一个Animal构造函数
function Animal(species) {this.species = species;
}Animal.prototype.eat = function() {console.log("Animal eats.");
};// Person构造函数继承自Animal
Person.prototype = Object.create(Animal.prototype);
Person.prototype.constructor = Person; // 修复Person实例的constructor属性// 创建Person的实例
var person = new Person("Alice");// 继承自Animal的方法
person.eat(); // 输出: Animal eats.// Person的原型链
console.log(person.__proto__ === Person.prototype); // 输出: true
console.log(person.__proto__.__proto__ === Animal.prototype); // 输出: true
console.log(person.__proto__.__proto__.__proto__ === Object.prototype); // 输出: true

示例3:原型链的查找过程

var myObject = {sayHi: function() {console.log("Hi!");}
};var childObject = Object.create(myObject);
childObject.name = "Child";// 调用原型链上的方法
childObject.sayHi(); // 输出: Hi!// 原型链的属性查找
console.log(childObject.hasOwnProperty('sayHi')); // 输出: false
console.log(childObject.hasOwnProperty('name')); // 输出: true

最后有关原型链的注意问题:

  • 原型链的修改:可以在任何时候修改对象的原型,但要注意这可能会影响所有继承自该原型的对象。
  • 性能问题:原型链的深度不宜过长,否则可能会影响属性访问的性能。
  • 构造函数的选择:使用构造函数、Object.create()或其他工厂模式时,要明确原型链的设置。
  • __proto__属性:__proto__属性是特定于某些JavaScript引擎的实现,并非ECMAScript标准的一部分。使用Object.getPrototypeOf()和Object.setPrototypeOf()是更标准和可移植的方法。

原型链,你理解了吗?

http://www.lryc.cn/news/396700.html

相关文章:

  • nginx的知识面试易考点
  • 每日Attention学习9——Efficient Channel Attention
  • Java语言程序设计——篇三(1)
  • 基于SpringBoot实现轻量级的动态定时任务调度
  • 夸克升级“超级搜索框” 推出AI搜索为中心的一站式AI服务
  • element-ui el-select选择器组件下拉框增加自定义按钮
  • Python基于you-get下载网页上的视频
  • 大模型/NLP/算法面试题总结3——BERT和T5的区别?
  • vue3项目打包的时候,怎么区别测试环境,和本地环境
  • 小特性 大用途 —— YashanDB JDBC驱动的这些特性你都get了吗?
  • 全网最全的软件测试面试八股文
  • VMware虚拟机配置桥接网络
  • 华为机考真题 -- 攀登者1
  • 深入理解Python密码学:使用PyCrypto库进行加密和解密
  • MMSegmentation笔记
  • Python基础语法:变量和数据类型详解(整数、浮点数、字符串、布尔值)①
  • 【C++航海王:追寻罗杰的编程之路】关联式容器的底层结构——红黑树
  • MySQL DDL
  • 从模型到应用:李彦宏解读AI时代的新趋势与挑战
  • C++ STL 随机数用法介绍
  • 容器之docker compose
  • MIT机器人运动控制原理浅析-人形机器人
  • 开源 WAF 解析:选择最适合你的防护利器
  • AirPods Pro新功能前瞻:iOS 18的五大创新亮点
  • JavaScript中的可选链操作符
  • huggingface笔记:gpt2
  • 一次业务的批量数据任务的处理优化
  • 新能源汽车充电站远程监控系统S275钡铼技术无线RTU
  • 海外视频媒体发布/发稿:如何在国外媒体以视频的形式宣发
  • HTML 【实用教程】(2024最新版)