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

【JS 原型链】

JavaScript 原型链是一个重要的概念,它是 JavaScript 语言实现面向对象编程的核心。在 JavaScript 中,每个对象都有一个与之关联的原型,并且该对象继承了原型中的属性和方法。这些原型组成了一个原型链,可以通过该链追溯到顶层的 Object.prototype。

JavaScript 中的每个对象都有一个内部属性[[Prototype]],指向它的原型对象。如果该对象无法在自己的属性中找到一个属性或方法,它将查找与其关联的原型对象中的属性或方法。如果还是找不到,则会查找原型对象的原型,直到找到 Object.prototype,即顶层原型。这种机制被称为原型链。

例如,假设我们有这样一个对象:

let obj = {name: "Tom",age: 20
};

我们可以通过 Object.getPrototypeOf(obj) 来获取 obj 对象的原型,输出结果如下:

// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}

可以看到,obj 对象的原型是 Object.prototype。如果我们访问 obj.toString() 方法,由于 obj 对象本身没有该方法,JavaScript 将会在原型链上查找该方法,找到 Object.prototype 上的 toString() 方法并执行。从而,实现了对 obj.toString() 方法的调用。

在 JavaScript 中,我们可以通过构造函数创建对象的实例。例如:

function Person(name) {this.name = name;
}
let p = new Person("Tom");

在这个例子中,我们首先定义了一个名为 Person 的构造函数,它有一个参数 name,用于接收人名。在实例化一个 Person 对象时,我们通过 new 操作符调用了该构造函数,并传递了一个参数 “Tom”。在这个过程中,JavaScript 会自动为新创建的对象设置一个原型,即 Person.prototype。我们可以通过 Object.getPrototypeOf§ 或 p.proto 访问该对象的原型。

当我们在实例 p 上访问属性时,如果 p 对象本身没有该属性,则会通过原型链查找该属性。例如,如果我们在 p 对象上访问 p.toString() 方法,由于 p 对象本身没有该方法,JavaScript 将会在原型链上查找该方法,找到 Person.prototype 上的 toString() 方法并执行。如果 Person.prototype 上也没有该方法,则会在原型链的上一级继续查找,即 Object.prototype 上查找该方法。如果还是找不到,则会返回 undefined。

在 JavaScript 中,我们可以通过给对象的原型对象添加属性和方法来实现继承。例如:

function Animal() {}
Animal.prototype.walk = function() {console.log("Animal is walking");
};
function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {console.log("Dog is barking");
};
let d = new Dog();

在这个例子中,我们首先定义了一个名为 Animal 的构造函数,并在其原型对象上添加了一个 walk() 方法。然后,我们定义了一个名为 Dog 的构造函数,它通过 Object.create() 方法继承了 Animal.prototype,并在其原型对象上添加了一个 bark() 方法。最后,我们通过 new 操作符创建了一个 Dog 的实例 d。

在实例 d 上访问 walk() 和 bark() 方法时,如果 d 对象本身没有该方法,则会通过原型链查找该方法。如果在 Dog.prototype 和 Animal.prototype 上都找不到该方法,则会在 Object.prototype 上查找,如果还是找不到,则会返回 undefined。

总之,JavaScript 中的原型链是一个非常重要的概念,它是 JavaScript 实现面向对象编程的核心机制。通过构造函数和原型对象,我们可以轻松地创建对象的实例,并实现对象的继承。

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

相关文章:

  • harmonyOS 开发之UI开发(ArkTS声明式开发范式)概述
  • 【人工智能】神经网络、M-P_神经元模型、激活函数、神经网络结构、学习网络参数、代价定义、总代价
  • 小程序新渲染引擎 Skyline 发布正式版
  • 网络安全作业1
  • 【NLP】视觉变压器与卷积神经网络
  • 【redis】通过配置文件简述redis的rdb和aof
  • Cypress 上传 pdf 变空白页问题
  • 【ArcGIS Pro二次开发】(52):布局导出图片(批量)
  • Git拉取远程分支并创建本地分支
  • OSI七层模型——物理层
  • 【NLP】使用变压器(tranformer)和自动编码器
  • 广州华锐互动:水利数字孪生智能管理系统的特色
  • php使用chatGPT生成一些东西做一个记录
  • 轻量级Web报表工具ActiveReportsJS全新发布v4.0,支持集成更多前端框架!
  • 听GPT 讲K8s源代码--pkg(七)
  • STM32MP157驱动开发——按键驱动(线程化处理)
  • 探究HTTP代理爬虫的反爬虫策略
  • 短视频去水印小程序,一键部署你的小程序,可开流量主,实现睡后收入
  • 通讯录系统
  • 14:00面试,14:06就出来了,问的问题有点变态。。。
  • F5 LTM 知识点和实验 3-负载均衡中的负载算法
  • 多线程(JavaEE初阶系列2)
  • Ubuntu20.04点Ubuntu software没反应,打不开的解决方案(Ubuntu笔记)
  • 力扣1114.按序打印-----题目解析
  • Centos7.9安全部署_防火墙配置_端口配置_协议配置_IP配置_全部亲测---记录022_大数据工作笔记0182
  • Tik Tok海外公会是什么?
  • elasticsearch批量导入问题
  • SAP安装笔记
  • 速速收藏!程序员副业赚钱的8种模式
  • 2、基于redis实现分布式锁