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

2024-03-29 01:35:43

前言

当你 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

可以看到，以 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

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

我决定这么做：

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

console.log(Best.prototype);

恍然大悟！

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

！那 __proto__ 和 prototype 之间又有什么呢？

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

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

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

console.log(o2);

你有没有想到什么？

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

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

但 o1 仍然“不为所动”！

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

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

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

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

而通过create函数则不会：

总结

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

详解Javascript中new()到底做了些什么？

前言和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 要创建 Person 的新实例,必须使用 new 操作符. 以这种方式调用构造函数实际上会经历以下 4个步骤: (1) 创建一个新对象: (2) 将构造函数的作用域赋给新对象(因此 this 就指向了
js中new一个对象的过程

使用new关键字调用函数(new ClassA(-))的具体步骤: 1. 创建空对象{} 2. 使用新对象,调用函数,函数中的this被指向新实例对象: {}.构造函数(); 3. 设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象 4. 将初始化完毕的新对象地址,保存到等号左边的变量中注意:若构造函数中没有返回值或返回值是基本类型(Number.String.Boolean)的值,
javascript中new关键字详解

和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承. 接下来,本文将带你一起来探索JS中new的奥秘... function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = function(){ conso
javascript new一个对象的实质

以前这些东西自己清楚,可是却解释不出来,也没有去深究这些东西.今天在看<悟透JavaScript>的时候,看到作者的描述,"茅厕"顿开. 现摘录如下,作者说的很是清楚: 用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步: 第一步是建立一个新对象: 第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象: 第三步就是将该对象作为this参数调用构造函数,完成成员设置等初始化工作.
javascript new 需不需要继续使用

你也没有必要使用new Array(),使用[]: 不要使用 new Number, new String, or new Boolean. 等等不要使用new Function 来创建函数比如你要写复制代码代码如下: frames[0].onfocus = new Function("document.bgColor='antiquewhite'") 你应该这样写复制代码代码如下: frames[0].onfocus = function () {document.bgC
详解javascript new的运行机制

和其他高级语言一样javascript 中也有new 运算符,我们知道new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 一.认识new运算符 function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = f
JavaScript中的new的使用方法与注意事项

原文: JavaScript, We Hardly new Ya --Douglas Crockford. http://yuiblog.com/blog/2006/11/13/javascript-we-hardly-new-ya/ 引用 JavaScript是一门基于原型的语言,但它却拥有一个 new 操作符使得其看起来象一门经典的面对对象语言.那样也迷惑了程序员们,导致一些有问题的编程模式. 其实你永远不需要在JavaScript使用 new Object().用字面量的形式{}去
JavaScript定义数组的三种方法(new Array(),new Array('x','y')

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
Javascript new关键字的玄机以及其它

(接上)先看张对老手不新鲜但对菜鸟很有趣的图: What the heck is that? 简直是luan lun. new 抛开上面的图,先看看上篇文章留下的第二个问题,让我们在构造器的函数体内加点东西,看会发生什么. function A(){this.p = 1}var a = new A() 会得到如下结果: 为什么用new关键字构造出来的a,会获得p这个属性?new A()这行代码做了什么事情?根据上篇文章中Function的创建过程第4步,A这个对象会有一个Construct属性(
JavaScript中实现new的两种方式引发的探究

前言当你 new 一个构造函数时发生了什么? "众所周知"的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型:通过 this 将属性和方法添加至这个对象:最后返回 this 指向的新对象,也就是实例. 一般来说在js中大概是这样的: function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return type
JavaScript中的函数的两种定义方式和函数变量赋值

复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> /*I总结: 1.函数名可以做变量使用,可以赋值,可以传值 2.函数名当参数,传递给另一个函数 */ //===========
JavaScript 声明私有变量的两种方式

前言 JavaScript并不像别的语言,能使用关键字来声明私有变量. 我了解的JavaScript能用来声明私有变量的方式有两种,一种是使用闭包,一种是使用WeakMap. 闭包闭包的描述有很多种,比如: 能访问其它函数作用域的函数: 内部函数访问外部函数作用域的桥梁: ...... 使用闭包构建私有变量的逻辑在于: 1.在外部函数中声明变量和内部函数: 2.使用内部函数访问或者修改变量值: 3.在外部函数内返回内部函数: function outside(){ let val = 123;
ASP.NET Razor模板引擎中输出Html的两种方式

本文实例讲述了ASP.NET Razor模板引擎中输出Html的两种方式.分享给大家供大家参考,具体如下: Razor中所有的Html都会自动编码,这样就不需要我们手动去编码了(安全),但在需要输出Html时就是已经转义过的Html文本了,如下所示: @{ string thisTest = "<span style=\"color:#f00;\">qubernet</span>"; } @thisTest; 这样在页面输出的文本就是:<
jQuery中map函数的两种方式

两种方式: 1.直接jQuery.map //将原数组中每个元素加 4 转换为一个新数组. $.map( [0,1,2], function(n){ return n + 4; }); //结果: [4, 5, 6] //原数组中每个元素扩展为一个包含其本身和其值加 1 的数组,并转换为一个新数组 $.map( [0,1,2], function(n){ return [ n, n + 1 ]; }); //结果: [0, 1, 1, 2, 2, 3] 2.遍历对象.map 例子: <form
mybatis中批量插入的两种方式(高效插入)

MyBatis简介 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 一.mybiats foreach标签 foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合.foreach元素的属性主
浅谈Java中实现深拷贝的两种方式—clone() & Serialized

clone() 方法麻烦一些,需要将所有涉及到的类实现声明式接口 Cloneable,并覆盖Object类中的clone()方法,并设置作用域为public(这是为了其他类可以使用到该clone方法). 序列化的方法简单,需要将所有涉及到的类实现接口Serializable package b1ch06.clone; import java.io.Serializable; class Car implements Cloneable, Serializable { private String
linux服务中开启防火墙的两种方式

存在以下两种方式: 一.service方式查看防火墙状态: [root@centos6 ~]# service iptables status iptables:未运行防火墙. 开启防火墙: [root@centos6 ~]# service iptables start 关闭防火墙: [root@centos6 ~]# service iptables stop 二.iptables方式先进入init.d目录,命令如下: [root@centos6 ~]# cd /etc/init.d/
详解Spring Boot 中实现定时任务的两种方式

在 Spring + SpringMVC 环境中,一般来说,要实现定时任务,我们有两中方案,一种是使用 Spring 自带的定时任务处理器 @Scheduled 注解,另一种就是使用第三方框架 Quartz ,Spring Boot 源自 Spring+SpringMVC ,因此天然具备这两个 Spring 中的定时任务实现策略,当然也支持 Quartz,本文我们就来看下 Spring Boot 中两种定时任务的实现方式. @Scheduled 使用 @Scheduled 非常容易,直接创建一个
对Python中创建进程的两种方式以及进程池详解

在Python中创建进程有两种方式,第一种是: from multiprocessing import Process import time def test(): while True: print('---test---') time.sleep(1) if __name__ == '__main__': p=Process(target=test) p.start() while True: print('---main---') time.sleep(1) 上面这段代码是在window

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

前言

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

总结

相关推荐

随机推荐