JavaScript 原型链那些事

news/2024/7/8 2:32:40 标签: javascript

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

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

javascript">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这个属性是指创建原型的函数,它指向函数本身。所以有以下关系:
在这里插入图片描述

javascript">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:原型链的基础

javascript">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:原型链的继承

javascript">// 假设我们有一个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:原型链的查找过程

javascript">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.niftyadmin.cn/n/5536110.html

相关文章

nginx部署多个项目;vue打包项目部署设置子路径访问;一个根域名(端口)配置多个子项目

本文解决: vue打包项目部署设置子路径访问;nginx部署多个子项目;一个ip/域名 端口 配置多个子项目;配置后,项目能访问,但是刷新页面就丢失的问题 注:本文需要nginx配置基础。基础不牢的可见文…

代码随想录leetcode200题之额外题目

目录 1 介绍2 训练3 参考 1 介绍 本博客用来记录代码随想录leetcode200题之额外题目相关题目。 2 训练 题目1&#xff1a;1365. 有多少小于当前数字的数字 解题思路&#xff1a;二分查找。 C代码如下&#xff0c; class Solution { public:vector<int> smallerNumb…

SpringBoot应用配置桥接Prometheus入门

SpringBoot应用配置Prometheus步骤 SpringBoot应用依赖要求PrometheusGrafanaGrafana监控界面模板 SpringBoot应用依赖要求 <!-- 监控系统健康情况的工具 --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot…

前端Debugger时复制的JS对象字符转JSON对象

前端debugger时&#xff0c;复制的对象在控制台输出时是如下格式&#xff0c;需要转换为对象格式来进行验证操作 bridgeId : 4118 createBy : null createTime : "2023-03-24 10:35:26" createUserId : 1 具体实现代码&#xff1a; // 转换transform (text) {l…

AGI 之 【Hugging Face】 的【Transformer】的 [ Transformer 架构 ] / [ 编码器 ]的简单整理

AGI 之 【Hugging Face】 的【Transformer】的 [ Transformer 架构 ] / [ 编码器 ]的简单整理 目录 AGI 之 【Hugging Face】 的【Transformer】的 [ Transformer 架构 ] / [ 编码器 ]的简单整理 一、简单介绍 二、Transformer 三、Transformer架构 四、编码器 1、自注意…

谈谈检测浏览器类型

前几天被问到如何检测浏览器类型&#xff0c;我突然发现我对此并不了解&#xff0c;之前的项目中也没有使用到过&#xff0c;只隐约记得通过一个自带的方法即可获取。所以今天特意来仔细补习一下。 核心&#xff1a;navigator.userAgent 1.正则表达式 2.引用外部库 3.判断浏…