返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中实现new的两种方式引发的探究
  • 613
分享到

JavaScript中实现new的两种方式引发的探究

2024-04-02 19:04:59 613人浏览 独家记忆
摘要

前言 当你 new 一个构造函数时发生了什么? “众所周知”的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法添加至这个对象;最后返回

前言

当你 new 一个构造函数时发生了什么?

“众所周知”的三步:

创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法添加至这个对象;最后返回 this 指向的新对象,也就是实例。

一般来说在js中大概是这样的:


function Mynew(parent,...rest){
	let obj={};
	obj.__proto__=parent.prototype;
	let res=parent.apply(obj,rest);
	return typeof res=="object"?res:obj;
}

上面提到的“空对象”只是简称。事实上,就算是定义一个 {} ,它也会从 Object.prototype 上继承很多方法和属性。
javascript语言精髓与编程实践》中提出了一个“更加空白的对象”:它有两种情况 —— Constructor.prototype 值为null;或者Object.getPrototypeOf(obj) 值为null。

但通常我们还能见到另一种写法:


function Mynew_2(parent,...rest){
	let child=Object.create(parent.prototype);
	let result=parent.apply(child,rest);
	return typeof result=="object"?result:child;
}

这两种实现的不同无疑引起了我的兴趣!


Object.create()是怎么实现的?

我们来看一段代码:


var Best1=function(){
	this.a=2;
}
var o1=Object.create(Best1);
var o2=Object.create(Best1.prototype);
console.log(o1.a); // undefined
console.log(o2.a); // undefined

test1

可以看到,以 o1 为例,Object.create() 失去了对原来对象属性的访问,而 o2 …同理。

再来看另一段代码:


var Best=function(){
	this.a=2;
}
Best.prototype.a=3;
var o1=Object.create(Best);
var o2=Object.create(Best.prototype);
console.log(o1.a); // undefined
console.log(o2.a); // 3

test2

到这里,我似乎明白了什么,又似乎没明白…

我决定这么做:


let b=new Best();
console.log(b);

test3


console.log(Best.prototype);

test4

恍然大悟!

原来我们平时说的 “当读取实例属性时,如果找不到,就会查找与对象关联的原型中的属性;如果还找不到,就去找原型的原型,直到最顶层(__proto__ 为null)为止” 是指 “一直顺着 __proto__ 向上查找”(注意:不经过prototype!)。

__proto__prototype 之间又有什么呢?


console.log(b.__proto__);
console.log(Best.prototype);

test5

哦!这就是我们常听到的“实例的 __proto__ 等于对象的 prototype ”吧。

那现在回过头来,打印一下 o2 这个对象:


console.log(o2);

test6

你有没有想到什么?

根据上面所描述的那样,o2 就是 Best 的实例啊!

所以说,create() 函数实际上返回了一个对象的实例?

但 o1 仍然“不为所动”!

test7

所以我们能否猜测:在 Object.create() 函数中应该是拿到对象的原型并以实例的形式返回:


Object.create=function(o){
	let F=function(){};
	F.prototype=o;
	return new F();
}

为什么这里要用函数再 new 的方式?而不是直接用对象去接收?

test8

这和“为什么Vue中data是一个函数而不是直接的对象”其实是一个问题:JavaScript中的对象是引用类型,在一个实例中改变某一个元素的值其余实例的值都会发生改变!

而通过create函数则不会:

test8

总结

到此这篇关于JavaScript中实现new的两种方式的文章就介绍到这了,更多相关JS实现new的方式内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript中实现new的两种方式引发的探究

本文链接: https://www.lsjlt.com/news/125821.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中实现new的两种方式引发的探究
    前言 当你 new 一个构造函数时发生了什么? “众所周知”的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型;通过 this 将属性和方法添加至这个对象;最后返回 ...
    99+
    2024-04-02
  • 深入探究Go语言的索引实现方式
    在现代编程语言中,索引是非常重要的数据结构之一。Go语言作为一门新兴的编程语言,也提供了多种索引实现方式。本文将。 一、数组和切片 在Go语言中,数组和切片是最基本的索引实现方式。数组是一种固定长度的数据结构,而切片则是动态长度的数据结构...
    99+
    2023-06-01
    并发 异步编程 索引
  • 探究Redis两种持久化方式下的数据恢复
        对长期奋战在一线的后端开发人员来说,都知道redis有两种持久化方式RDB和AOF,虽说大家都知道这两种方式大概运作方式,但想必有实操了解得不会太多。     这里是自己实操两种持久化方式的一点点记录。      先看以下...
    99+
    2020-06-02
    探究Redis两种持久化方式下的数据恢复
  • redis实现缓存的两种方式
    本篇文章给大家分享的是有关redis实现缓存的两种方式,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。redis实现缓存大致为两种措施:一、脚本...
    99+
    2024-04-02
  • 详解SpringMVC的两种实现方式
    目录一、方法一:实现Controller接口二、方法二:使用注解开发一、方法一:实现Controller接口 这个在我的第一个SpringMVC程序中已经学习过了,在此不作赘述,现在...
    99+
    2022-11-13
    SpringMVC实现方式 SpringMVC的两种实现方式
  • 详解JavaScript发送埋点请求的两种方式
    目录一、用法1.动态创建<img>2.动态创建<script>二、区别区别1区别2三、选择哪种方式四、总结对于统计页面数据这样的情景(俗称埋点),我们常用的方...
    99+
    2024-04-02
  • Go语言中字符串拼接的实现方式探究
    Go语言中字符串拼接的实现方式探究 在Go语言中,字符串是不可变的,即一旦创建后就无法直接修改其内容。因此,在进行字符串拼接时,需要特殊的处理方式来保证效率和性能。本文将探究Go语言中...
    99+
    2024-03-12
    字符串 探究 拼接 go语言
  • C#格式化JSON的两种实现方式
    目录实现功能:开发环境:实现代码:当我们拿到一大段JSON字符串的时候,分析起来简直头皮发麻,相信很大一部分朋友也都会直接去BEJSON等网站去做一个JSON格式化,已方便自己查看数...
    99+
    2024-04-02
  • Android开发实现NFC刷卡读取的两种方式
    场景:NFC是目前Android手机一个主流的配置硬件项,本文主要讲解一下Android开发中,NFC刷卡的两种实现方式以及相关方法源码解析。 ①:Manifest注册方式:这种方式...
    99+
    2024-04-02
  • Android中button实现onclicklistener事件的两种方式
    代码如下: package com.demos; import android.app.Activity; import android.os.Bundle; import ...
    99+
    2022-06-06
    button Android
  • Android中Handler实现倒计时的两种方式
    背景:最近项目中,正好做到登录/注册这个功能块。它需要通过发送验证码,在规定的时间内用验证码来完成登录/注册。之前的项目中也有这个功能,但是觉得太复杂了,只好自己重新实现一遍。用Handler来做,觉得代码简介,逻辑也清楚。代码一://在向...
    99+
    2023-05-31
    handler 倒计时 roi
  • javascript隐藏显示div的两种方式实例
    目录设置方法:JS隐藏和显示div的方式有两种:方式一:设置元素style对象中的display属性方式二:设置元素style对象中的visibility属性总结设置方法: 1、使用...
    99+
    2024-04-02
  • 探究IE8与IE7共存的两种方法分别是什么
    本篇文章给大家分享的是有关探究IE8与IE7共存的两种方法分别是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。IE8Beta1已经发布了,...
    99+
    2024-04-02
  • python实现多线程的两种方式
    目前python 提供了几种多线程实现方式 thread,threading,multithreading ,其中thread模块比较底层,而threading模块是对thread做了一些包装,可以更加方便...
    99+
    2022-06-04
    两种 多线程 方式
  • Jmeter实现Base64编码的两种方式
    Jmeter实现Base64编码有两种方式: 1、如果安装的Jmeter版本内置提供了Base64加密函数,可以直接使用该内置函数,方法如下: 点击Tools --> 函数助手...
    99+
    2024-04-02
  • python调用excel_vba的两种实现方式
    目录方法一: 方法二:方法一:  import win32com.client xl = win32com.client.Dispatch("Excel....
    99+
    2023-01-29
    python调用excel_vba python excel_vba调用
  • 探究Python并发编程中接口优化的实现方法。
    Python并发编程是一种非常流行的编程技术,它可以在多个线程或进程中同时执行代码,从而提高程序的运行效率。然而,在实现Python并发编程时,我们需要注意接口的优化,这可以帮助我们提高程序的运行效率和可靠性。 一、Python并发编程中的...
    99+
    2023-05-26
  • Android中Rxjava实现三级缓存的两种方式
    本文正如标题所说的用rxjava实现数据的三级缓存分别为内存,磁盘,网络,刚好最近在看Android源码设计模式解析与实战(受里面的ImageLoader的设计启发)。 我把...
    99+
    2022-06-06
    rxjava 三级缓存 缓存 Android
  • Android实现圆形图片的两种方式
    在项目中,我们经常会用到圆形图片,但是android本身又没有提供,那我只能我们自己来完成。 第一种方式,自定义CircleImageView: public class C...
    99+
    2022-06-06
    图片 Android
  • 两种java实现二分查找的方式
    目录1、二分查找算法思想2、二分查找图示说明3、二分查找优缺点3、java代码实现3.1 使用递归实现 3.1 不使用递归实现(while循环) 3.3 测试4、时间复杂度5、空间复...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作