JavaScript中new操作符的原理示例详解

new的用处

new的作用是通过构造函数来创建一个实例对象，该实例与原型和构造函数之间的关系如下图所示：

先来总结一下

  1. 创建一个空对象
  2. 空对象的内部属性 __proto__ 赋值为构造函数的 prototype 属性
  3. 将构造函数的 this 指向空对象
  4. 执行构造函数内部代码
  5. 返回该新对象

详细说明

执行 new 操作时会依次经过以下步骤：

1、创建一个空对象

  • 空对象是 Object 的实例，即 {} 。
let obj = {}

2、空对象的内部属性 __proto__ 赋值为构造函数的 prototype 属性

  • 该操作是为了将空对象链接到正确的原型上去
function Foo(num) {
  this.number = num
}

obj.__proto__ = Foo.prototype

3、将构造函数的 this 指向空对象

  • 即构造函数内部的 this 被赋值为空对象，以便后面正确执行构造函数。
Foo.call(obj, 1)

4、执行构造函数内部代码

  • 即给空对象添加属性、方法。

5、返回该新对象

  • 如果构造函数内部通过 return 语句返回了一个引用类型值，则 new 操作最终返回这个引用类型值；否则返回刚创建的新对象。
  • 引用类型值：除基本类型值（数值、字符串、布尔值、null、undefined、Symbol 值）以外的所有值。

模拟 new 操作符

下面的 myNew 函数模拟了 new 操作符的行为

function myNew(func, ...args) {
  let obj = {}
  obj.__proto__ = func.prototype
  let res = func.apply(obj, args)
  return res instanceof Object ? res : obj
}

function Foo(num) {
  this.number = num
}

let foo1 = myNew(Foo, 1)
console.log(foo1 instanceof Foo)  // true
console.log(foo1.number)  // 1

let foo2 = new Foo(2)
console.log(foo2 instanceof Foo)  // true
console.log(foo2.number)  // 2

上面通过 instanceof 操作符来判断构造函数的返回值是否为 Object 的实例，即是否为引用类型值；这是因为所有引用类型值都是 Object 的实例，Object 是所有引用类型值的基类型。

好了，到此这篇关于JavaScript中new操作符原理的文章就介绍到这了,更多相关JS new操作符原理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 用方法封装javascript的new操作符(一)

    先看个例子: 复制代码 代码如下: var Class = { create : function () { return function () { this.initialize.apply(this, arguments); } } } var A = Class.create(); A.prototype = { initialize:function(){ //todo } test:"abc" } var a = new A(); 这是很多jser构建类和实例化对象的过程,

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

  • 如何自己实现JavaScript的new操作符

    构造函数 在介绍new之前,必须要知道什么是构造函数. 构造函数和普通函数在写法上没有任何区别,当一个函数通过new Fun()调用时,就叫做构造函数,构造函数首字母通常大写. function User(name) { this.name = name; } let u = new User('leo'); 这里,User就是构造函数,当然你也可以直接调用User(),但是这样就起不到创建实例的作用,在非严格模式下,会把name属性挂在window上. new 操作符 那么new操作符到底做了

  • 详解JavaScript中new操作符的解析和实现

    前言 new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数. new 运算符的运行过程 new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的).new 操作符的执行大概有以下几个步骤: 创建一个新的空对象 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 proto

  • 关于Js中new操作符的作用详解

    关于Js中new操作符的作用详解

    前言 Js是当今时代最常用的代码操作语言,其中new操作符尤为常见.对于很多代码小白来说,并不清楚new在Js中扮演着怎样的角色,具体是做什么用,干了什么.本文从new操作符的作用着手,简单介绍new操作符相关知识. 什么是new? 众所周知,在JS中,new的作用是通过构造函数来创建一个实例对象. 像下面这样:(和普通函数不一样,当函数用作构造函数时,首字母一般要大写,以作区分.) function Foo(name) { this.name = name; } console.log("ne

  • JS使用new操作符创建对象的方法分析

    JS使用new操作符创建对象的方法分析

    本文实例讲述了JS使用new操作符创建对象的方法.分享给大家供大家参考,具体如下: 在编写js代码时,我们有时会需要使用函数来模拟java中的类,并用它来产生对象,在定义了一个构造函数之后我们需要使用new操作符来调用调用函数才能得到我们想要的对象.例如: <script> function Constructor(name){ this.name = name } var person1 = Constructor("张三");//undefined var person

  • JS重学系列之聊聊new操作符

    new操作符的基本过程: 1.创建一个新的空对象. 2.将构造函数的作用域赋给它(即this指向它). 3.新对象增加构造函数的基本方法和属性. 4.返回新对象 上面的过程大家应该都熟悉,本文是重学 JS 系列的第一篇文章,写这个系列的初衷也是为了夯实自己的 JS 基础.既然是重学,肯定不会从零开始介绍一个知识点,如有遇到不会的内容请自行查找资料. new 的作用 我们先来通过两个例子来了解 new 的作用 function Test(name) { this.name = name } Tes

  • JavaScript中new操作符的原理示例详解

    JavaScript中new操作符的原理示例详解

    new的用处 new的作用是通过构造函数来创建一个实例对象,该实例与原型和构造函数之间的关系如下图所示: 先来总结一下 创建一个空对象 空对象的内部属性 __proto__ 赋值为构造函数的 prototype 属性 将构造函数的 this 指向空对象 执行构造函数内部代码 返回该新对象 详细说明 执行 new 操作时会依次经过以下步骤: 1.创建一个空对象 空对象是 Object 的实例,即 {} . let obj = {} 2.空对象的内部属性 __proto__ 赋值为构造函数的 pro

  • JavaScript中工厂函数与构造函数示例详解

    JavaScript中工厂函数与构造函数示例详解

    前言 当谈到JavaScript语言与其他编程语言相比时,你可能会听到一些令人困惑东西,其中之一是工厂函数和构造函数. 工厂函数 所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例".意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象.由于 Javascript 本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript 并没有严格的"工厂函数",但是在 Javascript中,我们能利用函数模拟类.来

  • Java并发编程包中atomic的实现原理示例详解

    Java并发编程包中atomic的实现原理示例详解

    线程安全: 当多个线程访问某个类时,不管运行时环境采用何种调度方式或者这些进程将如何交替执行,并且在主调代码中不需要任何额外的同步或协调,这个类都能表现出正确的行为,那么就称这个类时线程安全的. 线程安全主要体现在以下三个方面: 原子性:提供了互斥访问,同一时刻只能有一个线程对它进行操作 可见性:一个线程对主内存的修改可以及时的被其他线程观察到 有序性:一个线程观察其他线程中的指令执行顺序,由于指令重排序的存在,该观察结果一般杂乱无序 引子 在多线程的场景中,我们需要保证数据安全,就会考虑同步的

  • JavaScript中new操作符的原理与实现详解

    目录 一.new做了哪些事 二.返回不同类型时有哪些表现 三.手写new的实现原理 一.new做了哪些事 先看看new的使用场景: // 1.创建一个构造函数 function Vehicle(name, price) { this.name = name this.price = price } ​ // 2.new一个实例对象 let truck = new Vehicle() console.log(truck); //Vehicle { name: undefined, price: u

  • JavaScript事件的委托(代理)的用法示例详解

    JavaScript事件的委托(代理)的用法示例详解

    目录 简介 示例:事件委托 写法1:事件委托 写法2:每个子元素都绑定事件 示例:新增元素 写法1:事件委托 写法2:每个子元素都绑定事件 简介 说明 本文用示例介绍JavaScript中的事件(Event)的委托(代理)的用法. 事件委托简介 事件委托,也叫事件代理,是JavaScript中绑定事件的一种常用技巧.就是将原本需要绑定在子元素的响应事件委托给父元素或更外层元素,让外层元素担当事件监听的职务. 事件代理的原理是DOM元素的事件冒泡. 事件委托的优点 1.节省内存,减少事件的绑定 原

  • JavaScript稀疏数组与孔hole示例详解

    JavaScript稀疏数组与孔hole示例详解

    目录 稀疏数组是什么 JavaScript数组天生就是稀疏数组 JavaScript数组稀疏特性带来的“怪异现象” slice会复制孔 forEach.every会跳过孔(不对孔调用回调函数) map不对孔调用回调函数,但是孔会保留 filter不对孔调用回调函数,但是孔会被过滤掉 join会将孔转化为一个空字符串进行拼接,与undefined一样 初始化无孔数组的方法 Array.apply(null, Array(n))的原理 稀疏数组是什么 在绝大多数JavaScript的实现中,数组是稀

  • RxJS中的Observable和Observer示例详解

    RxJS中的Observable和Observer示例详解

    目录 引言 概念 牛刀小试 Observable Observable 剖析 Observer 结束语 引言 最近在项目当中别的小伙伴使用到了Rxjs,我一眼看上去有点懵,感觉挺复杂,挺绕的.于是抓紧补补课,然后就可以和小伙伴们一起交流怎么能优雅的使用Rxjs.由于内容比较多,会分为三篇来讲解说明 初识 RxJS中的 Observable 和 Observer 细说 RxJS中的 Operators 在谈 RxJS中的 Subject和Schedulers 概念 RxJS是一个库,可以使用可观察

  • JavaScript中关键字 in 的使用方法详解

    for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为"枚举". 对于数组 ,迭代出来的是数组元素 但不推荐,因为不能保证顺序,而且如果在Array的原型上添加了属性,这个属性也会被遍历出来,所以 最好数组使用正常的for循环,对象使用for-in循环 对于对象 ,迭代出来的是对象的属性: var obj = { "key1":"value1", "key2":"value2", &q

  • javascript中href和replace的比较(详解)

    在使用javascript的时候,有时候对于经常使用的方法太熟悉而忽略了他们之间原理的细微差别. 举例如下: window.location.href,window.location.replace. 这两种方式都可以让页面跳转到一个新的页面,但是其中我就忽略了跳转之后的细节,比如返回的原来的页面. window.location.href中的href其实就是<a>标签中的href,使用这个进行页面跳转后,可以使用浏览器的后退按钮退回到原来的页面,也可以使用history.go(-1)函数跳转

随机推荐