javascript中new运算符的实现机制及手写(代码片段)

十九万里 十九万里     2023-01-13     753

关键词:

官方解释:new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
总结:创建自定义对象或者构造函数的时候使用

这里我通过几个小问题的方式来解释new运算符

1、怎么创建一个自定义对象呢:

1、通过编写函数,定义对象类型
2、把编写的函数通过mew来创建对象实例

2、new运算符有哪些参数:

1、 construtor:是一个类或者函数 ,作用在于指定对象实例,没有参数一般可以省略为圆括号

2、arguments:列表。被construtor调用,比如construor有多个函数,就需要放在列表中
具体用法:new constructor[(arguments)]

3、new创建的对象和普通对象的区别

1、构造函数不同:普通对象的构造函数是Object,new对象构造函数是自定义的
2、暴露user对象方式不同:new是将uesr对象以原型的方式暴露在window对象中,普通函数是直接把uesr对象暴露在windo对象中(这点我自己还没理解透)
3、this指向不同:使用new的时候函数内部的this是一个新的对象,普通函数this指向就是常见的this指向(具体看this的用法)

4、创建new关键字会执行的操作

1、创建一个空的简单JS对象:()也可以添加属性和名称:new Foo(…)
2、把这个空的对象添加_proto_属性。然后把这个属性连接到构造函数的原型对象中
3、把第一步创建的对象作为this的上下文(这里也就解释了为什么new的this指向是一个新的对象)
5、如果改函数没有返回对象 ,则返回this,有对象则返回对象。

那么重点来了:我在mdn包括红宝书上看了很多解释 我先放出来 然后在根据自己的理解总结一下

4、当new Foo ()执行时会发生以下操作

红宝书版:
1、创建一个新对象
2、将构造函数中的作用域复制给新对象
3、执行构造函数中的代码
4、返回新对象

MDN版:
1、一个继承自Foo.prototype 的新对象被创建
2 使用指定的参数调用构造函数Foo 并将this绑定到新创建的对象, new Foo等同于new Foo(),也就是没有指定参数列表。Foo不带任何参数调用情况
3、由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)

结合这两个版本呢其实也很容易看出了,我就不多做复述了

5、手写一个new操作符

function myNew()
	//1. 创建一个新对象obj
	let obj = new object();
	//参数第一项为构造函数fn,
	let fn = [] .shift.call(arguments);
	
	//2.将构造函数中的作用域复制给新对象 也就是把obj_proto_连接到构造函数fn原型
	 obj._proto_ = fn.prototype;
	 // 返回执行结果用result接受
	 let result = fn.apply(obj,arguments);
	
	// 2.如果放回对象,则把这个对象放回,否则的话就返回步骤1的对象
	 return typeof  result === 'object'? result:obj;

javascript之手撕new(代码片段)

...几分晦涩,直接看一个具体的例子,来了解一下JavaScript中的new实现的功能。举个例子//现实中瘦不了,但网络中一定要保持苗条functionThin_User(name,age)this.name=name;thi 查看详情

javascript中new关键字详解(代码片段)

和其他高级语言一样javascript中也有new运算符,我们知道new运算符是用来实例化一个类,从而在内存中分配一个实例对象。但在javascript中,万物皆对象,为什么还要通过new来产生对象? 本文将带你一起来探索javascript中new的奥... 查看详情

从mixin到new和prototype:javascript原型机制详解

这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客继承是为了实现方法的复用,如何实现方法的复用呢?最容易想到的,就是:```js//mixinfunctionextend(optional,base){for(varpropinbase){if(!propinoptional){opti... 查看详情

从mixin到new和prototype:javascript原型机制详解

这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客继承是为了实现方法的复用,如何实现方法的复用呢?最容易想到的,就是:```js//mixinfunctionextend(optional,base){for(varpropinbase){if(!propinoptional){opti... 查看详情

从mixin到new和prototype:javascript原型机制详解

 这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客继承是为了实现方法的复用,如何实现方法的复用呢?最容易想到的,就是:```js//mixinfunctionextend(optional,base){for(varpropinbase){if(!propinoptional... 查看详情

javascript工作机制:v8引擎内部机制及如何编写优化代码的5个诀窍

概述JavaScript引擎是一个执行JavaScript代码的程序或解释器。JavaScript引擎可以被实现为标准解释器,或者实现为以某种形式将JavaScript编译为字节码的即时编译器。下面是实现了JavaScript引擎的一个热门项目列表:V8 —开源,由Go... 查看详情

angularjs1笔记-(20)-模块化加载机制seajs

SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模... 查看详情

手写一个promise(代码片段)

...ss)的概念。虽然ES6引入了class和extends,使我们能够轻易地实现类和继承。但JS并不存在真实的类,JS的类是通过函数以及原型链机制模拟的,本小节的就来探究如何在ES5环境下利用函数和原型链实现JS面向对象的特性在开始之前,... 查看详情

《javascript闯关记》之原型及原型链

原型链是一种机制,指的是JavaScript每个对象都有一个内置的__proto__属性指向创建它的构造函数的prototype(原型)属性。原型链的作用是为了实现对象的继承,要理解原型链,需要先从函数对象、constructor、new、prototype、__proto__这... 查看详情

new运算符详解(javascript)(代码片段)

...描述new关键字会进行如下的操作1,创建一个空的简单JavaScript对象(即);2,为步骤1新创建的对象添加属性__proto__,将该属性链接至构造函数的原型对象;3.将步骤1新创建的对象作为this的上下文4.如果该函数没有返回对象,... 查看详情

前端算法及手写算法javascript(代码片段)

一、手写算法1.获取url中参数列表,保存为对象functiongetUrlParam()//获取url中参数列表,保存为对象varurl="http://jjhs/dddh?a=1&b=2&c=3&d=4";varres=;if(url.indexOf("?"!==-1))letparms=url.split("... 查看详情

new 运算符在 JavaScript 中是如何工作的?

】new运算符在JavaScript中是如何工作的?【英文标题】:HowdoesthenewoperatorworkinJavaScript?【发布时间】:2011-10-0817:11:36【问题描述】:可能是JavaScript中最不被理解的部分,位于原型链旁边。所以问题是:如何...newdataObj(args);...实际创... 查看详情

javascript之手撕new(代码片段)

...几分晦涩,直接看一个具体的例子,来了解一下JavaScript中的new实现的功能。举个例子//现实中瘦不了,但网络中一定要保持苗条functionThin_User(name,age)this.name=name;this.age=age;Thin_User.prototype.eatToMuch=function()//白日... 查看详情

javascript(第四天)

ECMA-262描述了一组用于操作数据值的运算符,包括一元运算符、布尔运算符、算术运算符、关系运算符、三元运算符、位运算符及赋值运算符。ECMAScript中的运算符适用于很多值,包括字符串、数值、布尔值、对象等。不过,通过... 查看详情

史上最全!56个javascript的「手写」知识点,扫盲啦!

...复加群,自助秒进前端群今天就带着大家来复习一下JavaScript的56个「手写」知识点哦~~~大厂手写题1、实现原生AJAX封装const ajax =   get(url, fn)     const xhr = new XMLHttpRequest()    xhr.open('GET',  查看详情

详解amd规范及具体实现requirejs在工程中的使用

  由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引。AMD规范就是其中比较著名一个,全称是AsynchronousModuleDefinition,即异步模块加载机制,完整描述了模块的定义,依赖关系,引用关系... 查看详情

深入理解new运算符(代码片段)

在JavaScript中,new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。创建一个对象很简单,为什么我们还要多此一举使用new运算符呢?它到底有什么样的魔力?认识new运算符通过下面的例子理解new运... 查看详情

javascript24_旧类与new运算符

14、旧类早期JS中,直接通过函数来定义类一个函数如果直接调用xxx()那么这个函数就是一个普通函数一个函数如果通过new调用newxxx()那么这个函数就是一个够早函数​等价于:​classPerson​<script>varPerson=(function()functionPerson(nam... 查看详情