首页 > 其他分享 >浅析JS原型链

浅析JS原型链

时间:2024-03-27 15:45:15浏览次数:20  
标签:__ name 对象 JS 原型 prototype 浅析 构造函数

目录

何为原型链呢

就是实例对象和原型对象之间的链接,每一个对象都有原型,原型本身又是对象,原型又有原型,以此类推形成一个链式结构.称为原型链。

这里又扯到了另外两个概念了。

实例对象>>> 先往下看实例对象

原型对象>>> 先往下看 原型对象

实例对象

说到这里。我们另外再来提一提 另一个东西: 构造函数。那既然提到了构造函数 由不得不提普通函数了。

先来讲一下构造函数

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值。

例如:

let Num = function Num() {
    this.add = function (a, b) {
        return a + b
    }
}

let n = new Num()
console.log(n.add(1, 2));

这里实例对象已经出来了。就是在你new 这个 构造函数的时候。就已经创建了实例对象 在本文中 n就是一个实例对象

**这里简单说一下实例对象在创建成功时会发生什么变化。

  1. 在内存中创建一个新的空对象;
  2. 让this指向这个新的对象。这里this指向问题 我只用一句话就能总结: 谁调用this就指向谁
  3. 执行构造函数里面的代码,给这个新对象添加属性和方法;
  4. 返回这个新对象(所以构造函数里面不需要return)。

再来讲一下普通函数

普通函数就是.... 就是最普通的函数 例如

function add(a, b) { return a+b };
add(1,2)

虽然上述两种方式。都能得到结果 3

但是两种声明以及使用的方式都不一样。


那这里总结下区别

  1. 构造函数首字母要大写,类似于python中的类
  2. 构造函数是通过new操作符来创建实例对象的,而普通函数则不需要。

这里还有个点。

实例对象创建成功后 已经有了一个__proto__的内置属性了。

而构造函数本身有个属性是prototype 称之为对象原型

原型对象

原型对象是构造函数上的一个属性,用来创建公共的方法。也就是prototype

举个例子。

直接创建个构造函数。然后赋值个方法。

//语法: 构造函数.prototype.方法名 = function() {}
function Animal(name) {
    this.name = name
}

// 赋值公共方法
Animal.prototype.eat = function () {
    console.log(`${this.name}在吃饭`)
}

let dog = new Animal("狗")
let cat = new Animal("猫")
dog.eat()
cat.eat()
console.log(dog.eat === cat.eat)    // true

结果

狗在吃饭
猫在吃饭
true

这里扯到了 原型对象 那就再讲讲另一个概念 对象原型。其实这个概念可以忽略不计。

对象原型

**对象原型是实例对象(对象)身上的一个属性, 该属性为 _proto_ **

//语法: 构造函数.prototype.方法名 = function() {}
function Animal(name) {
    this.name = name
}

// 赋值公共方法
Animal.prototype.eat = function () {
    console.log(`${this.name}在吃饭`)
}

let dog = new Animal("狗");

console.log(dog.__proto__);
console.log(dog.__proto__ === Animal.prototype);

结果

{ eat: [Function (anonymous)] }
true

短暂总结一下

这里捋一下关系

  1. 每个构造函数都有一个原型对象 原型对象的(prototype)
  2. __proto__等于其构造函数的prototype,即每个__proto__都指向其构造函数的prototype
  3. 原型对象(prototype) == 对象原型(__proto__)

constructor

construct是原型对象(prototype) 和 对象原型(__proto__)身上的一个属性

而 constructor会记录当前对象属于哪个构造函数。

这里举个例子吧、

//语法: 构造函数.prototype.方法名 = function() {}
function Animal(name) {
    this.name = name
}

// 赋值公共方法
Animal.prototype.eat = function () {
    console.log(`${this.name}在吃饭`)
}

let dog = new Animal("狗");

dog.constructor.prototype
console.log(dog.constructor.prototype)

结果 这里在node中看不出来。我们直接看浏览器中的

这里就很好理解了。

其实 constructor 的出现原本就是用来进行对象类型判断。任何对象都有constructor属性。

那你说这个有啥用???

因为我们是搞爬虫的吗。肯定是很有用的。

constructor 本来就是用来找到其上层构造函数的。那我们在设置补环境框架。或者是在补环境的时候不就能容易找到最外层的构造环境了吗?

原型链

很好现在基础概念都懂了。那我们是不是可以重新梳理了一下呢?

我的理解是原型链的构成包含了上文我讲的的这些部分。

所谓原型链的流程(仅本人在补环境中的理解):

当你在寻找一个方法或者属性。如果该对象自身没有这个属性 或者方法。

那这个引擎(JS)就会沿着原型链向上去找。直到找到这个属性 或者方法。

直到到达原型链的最顶层也就是我们上文说的Prototype

那话说到这里。

说白了 原型链其实就是JavaScript中用于实现对象继承的一种机制。

好了 此文完结。懂各种概念就行

标签:__,name,对象,JS,原型,prototype,浅析,构造函数
From: https://www.cnblogs.com/zichliang/p/18099453

相关文章

  • nest.js中的配置抽离
    1.安装config包npminstall--save@nestjs/config 2.在AppModule中引入:ConfigModule.forRoot({isGlobal:true,envFilePath:'src/.env'})需要设置全局模块,指定env文件的位置 3.在对应路径下书写对应的.env配置文件redis_server_host=localhostredis_s......
  • 安装nodejs
    方法一:源码包安装官网下载centos下载最新版10.9https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xzmkdir/opt/software/&&cd/opt/software/tar-xvfnode-v10.9.0-linux-x64.tar.xzmvnode-v10.9.0-linux-x64nodejs建立软连接,变为全局①ln-s/opt/soft......
  • 掌握Node.js:常用命令及示例
    Node.js是一个流行的JavaScript运行时环境,广泛应用于服务器端开发、命令行工具和前端构建工具等方面。在Node.js中,有许多常用的命令可用于管理项目、安装依赖项以及运行脚本。本文将介绍一些常用的Node.js命令,并提供相应的示例,以帮助开发者更好地利用这些命令。1.node......
  • 【附源码】Node.js毕业设计公办小学网络报名系统(Express)
    本系统(程序+源码)带文档lw万字以上  文末可获取本课题的源码和程序系统程序文件列表系统的选题背景和意义选题背景:在当今信息化社会,网络技术已经深入到各个领域,教育领域也不例外。传统的公办小学报名方式主要是线下排队、人工登记,这种方式不仅效率低下,而且容易出现错误。......
  • [附源码]计算机毕业设计基于大数据的身体健康管理平台(JSP+java+springmvc+mysql+MyBa
    本项目包含程序+源码+数据库+LW+调试部署环境,文末可获取一份本项目的java源码和数据库参考。项目文件图项目介绍随着健康意识的提升和大数据技术的发展,基于大数据的身体健康管理平台成为现代社会追求高质量生活的一个新趋势。这种平台通过收集和分析用户的健康数据,提供个性......
  • [附源码]计算机毕业设计文档管理系统(JSP+java+springmvc+mysql+MyBatis)
    本项目包含程序+源码+数据库+LW+调试部署环境,文末可获取一份本项目的java源码和数据库参考。项目文件图项目介绍随着信息化时代的到来,企业和机构在日常运营中产生大量文档资料。有效的文档管理系统(DMS)对于保障信息的组织、存储、检索和安全至关重要。一个先进的DMS能够帮助......
  • node.js开发环境搭建
    node.js开发环境搭建前端主要使用javascript或typescript语言,前端项目主要使用node.js(提供运行环境)+npm(管理项目包依赖)进行项目构建,而node.js与npm版本关系有耦合,因此需要使用nvm工具统一管理node.js与npm的版本。安装nvm更多细节参考官方文档,本文以macos为例进行安装。注意:官......
  • 2024 年排名前 5 的 Node.js 后端框架
    自2009年以来,Node.js一直是人们谈论的话题,大多数后端开发人员都倾向于使用Node.js。在过去的几年里,它的受欢迎程度有所增加。它被认为是美国最受欢迎的网络开发工具,包括Netflix和PayPal等客户。受欢迎程度增加的原因是加载时间的减少和性能的提高。因此,分析2024......
  • js事件循环
            js的事件循环是js的一种执行机制。    众所周知,js是一门单线程的语言,也就是同步的,同一时间只能做一件事情。这是因为浏览器仅分配给了js一个主线程来执行任务,且一次只能执行一个任务。这些待执行的任务排好队伍,依次执行。    但是js某些任务......
  • 监控工具-jvisualvm.exe-入门,监控tomcat7的jmx、jstatd
    1、添加JMX1.1、catalina-jmx-remote.jar 放在Tomcat的 lib 目录下catalina-jmx-remote.jar 的确切位置可能因Tomcat版本和发行版而异,但通常它应该被放置在Tomcat的 lib 目录下 1.2、catalina.sh设置JVM参数对于Linux/Unix,编辑 catalina.sh 文件......