首页 > 其他分享 >JS原型、原型链深入理解

JS原型、原型链深入理解

时间:2022-11-01 16:00:55浏览次数:56  
标签:__ 对象 Object JS 深入 原型 prototype 属性


原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有”prototype”属性,函数对象有”prototype”属性,原型对象有”constructor”属性。

一、初识原型

在JavaScript中,原型也是一个对象,通过原型可以实现对象的属性继承,JavaScript的对象中都包含了一个”[[Prototype]]”内部属性,这个属性所对应的就是该对象的原型。

“[[Prototype]]”作为对象的内部属性,是不能被直接访问的。所以为了方便查看一个对象的原型,Firefox和Chrome中提供了__proto__这个非标准(不是所有浏览器都支持)的访问器(ECMA引入了标准对象原型访问器”Object.getPrototype(object)”)。在JavaScript的原型对象中,还包含一个”constructor”属性,这个属性对应创建所有指向该原型的实例的构造函数

二、规则

在JavaScript中,每个函数都有一个prototype属性,当一个函数被用作构造函数来创建实例时,这个函数的prototype属性值会被作为原型赋值给所有对象实例(也就是设置实例的`__proto__`属性),也就是说,所有实例的原型引用的是函数的prototype属性。(****`只有函数对象才会有这个属性!`****)

new 的过程分为三步:

var p = new Person('张三',20);

1. var p={}; 初始化一个对象p。

2. p._proto_=Person.prototype;,将对象p的 __proto__ 属性设置为 Person.prototype

3. Person.call(p,”张三”,20);调用构造函数Person来初始化p。

三、初识Object

Object对象本身是一个函数对象。

既然是Object函数,就肯定会有prototype属性,所以可以看到”Object.prototype”的值就是”Object{}”这个原型对象。反过来,当访问”Object.prototype”对象的”constructor”这个属性的时候,就得到了Obejct函数。

另外,当通过”Object.prototype._proto_”获取Object原型的原型的时候,将会得到”null”,也就是说”Object {}”原型对象就是原型链的终点了。

四、初识Function

如上面例子中的构造函数,JavaScript中函数也是对象,所以就可以通过_proto_查找到构造函数对象的原型。

Function对象作为一个函数,就会有prototype属性,该属性将对应”function () {}”对象。

Function对象作为一个对象,就有__proto__属性,该属性对应”Function.prototype”,也就是说,”Function._proto_ === Function.prototype”。



标签:__,对象,Object,JS,深入,原型,prototype,属性
From: https://blog.51cto.com/sourcebyte/5814185

相关文章

  • 深度理解NodeJS事件循环
    导读ALLTHETIME,我们写的的大部分javascript代码都是在浏览器环境下编译运行的,因此可能我们对浏览器的事件循环机制了解比Node.JS的事件循环更深入一些,但是最近写开始深......
  • <4> os.popen()获取js解密结果
    #访问js文件,获取解密结果defdecrypto(self,data:str):#加密字符串importoswithos.popen("nodejs文件{}".format(data)asp:returnp.read.s......
  • JS/TS数据结构---栈(单调栈)和队列
    一、栈栈(stack)是一种操作受限的线性表数据结构,基于后进先出(LIFO)策略的集合类型,例如函数中的临时变量符合后进先出的特性,因此用栈保存最合适。  在入栈和出栈过程中所需......
  • JAVAWeb --JSP基础语法
    准备工作,导入一些依赖<dependencies><!--Servlet的依赖--><dependency><groupId>javax.servlet</groupId><artifactId>s......
  • js 对DOM观察大小改变的处理通知方法。ResizeObserver的应用。
    环境代码示例使用了VUE3的setup的语法糖。代码//这里使用弱引用//key是DOM实例//value是溢出的结果,true标识溢出,false标识没有溢出。constoverflowResultMap=......
  • (十一)深入浅出TCPIP之TCP粘包问题
    粘包和拆包问题     粘包拆包问题是处于网络比较底层的问题,在数据链路层、网络层以及传输层都有可能发生。我们日常的网络应用开发大都在传输层进行,由于UDP有消息......
  • js显示视频和弹幕
    HTML:<!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="view......
  • js多种方法取数组的最后一个元素
    1.pop()方法,删除数组最后一个并返回该元素利用这个方法可以取到数组的最后一个,同理shift()可以取到数组的第一个(shift()删除数组第一个并返回该元素vararr=[1,2,3];......
  • PowerShell 获取虎扑步行街热榜json数据
    代码(curl"https://bbs.hupu.com/all-gambia").ParsedHtml.getElementsByClassName('t-info')|%{$texts=$_.getElementsByTagName('span')@{url=......
  • (转)js正则表达式验证大全
    js正则表达式验证大全(转)/判断输入内容是否为空    functionIsNull(){       varstr=document.getElementById('str').value.trim();       if(s......