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

构造函数

在介绍new之前，必须要知道什么是构造函数。

构造函数和普通函数在写法上没有任何区别，当一个函数通过new Fun()调用时，就叫做构造函数，构造函数首字母通常大写。

function User(name) {
    this.name = name;
}

let u = new User('leo');

这里，User就是构造函数，当然你也可以直接调用User()，但是这样就起不到创建实例的作用，在非严格模式下，会把name属性挂在window上。

new 操作符

那么new操作符到底做了什么事情呢，可以创建出一个实例？

new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new关键字会进行如下的操作：

1.创建一个空的简单JavaScript对象（即**{}**）；

2.链接该对象（即设置该对象的构造函数）到另一个对象 ；

3.将步骤1新创建的对象作为**this**的上下文 ；

4.如果该函数没有返回对象，则返回**this**。

以上引用自new 操作符 - MDN

可能第 2、4 步大家看的不是很明白，这里我重新总结一下这 4 个步骤：

1.创建一个空对象u = {}

2.绑定原型，u.__proto__ = User.prototype

3.调用User()函数，并把空对象u当做this传入，即User.call(u)

4.如果User()函数执行完自己return一个object类型，那么返回此变量，否则返回this，注意：如果构造函数返回基本类型值，则不影响，还是返回this

自己实现一个 new

知道了new操作符的原理，下面我们自己来实现一个FakeNew函数。

function FakeNew() {
    let obj = {};

    // 将类数组 arguments 转为数组，同时将第一个参数也就是构造函数 shift 出来
    let constructor = [].shift.apply(arguments);  

    // 绑定原型
    obj.__proto__ = constructor.prototype;    

    // 调用构造函数，将 obj 当做 this 传入
    let res = Constructor.apply(obj, arguments);    

    // 返回
    return typeof res === 'object' ? res : obj;
}

function User(name) {
    this.name = name;
}

User.prototype.getName = function() {
    return this.name;
}

let u = FakeNew(User, 'leo');
console.log(u);
console.log(u.getName());

相应关键步骤的注释已经附在代码里面了，这样我们就实现了一个new操作，相信大家以后再看到new，会有一种通透的感觉了。

以上就是如何自己实现JavaScript的new操作符的详细内容，更多关于JavaScript的new操作符的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Javascript模拟实现new原理解析

    new是JS中的一个关键字,用来将构造函数实例化的一个运算符.例子: function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log("I'm " + this.name); } var cat = new Animal('Tom'); console.log(cat.name); // Tom console.log(cat.__proto__ === An

  • 浅析JS中NEW的实现原理及重写

    提到new,肯定会和类和实例联系起来,如: function Func() { let x = 100; this.num = x + } let f = new Func(); 上面的代码,我们首先创建了一个函数,如果是用面向对象的说法就是创建了一个Function类的实例,如果直接执行这个函数,那它就是一个普通的函数,如果用new执行,则这个函数被称为一个自定义的类. 如果是一个普通函数执行,他会如下做几件事: ·形成一个全新的执行上下文EC(Execution Context 执行环境)

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

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

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

  • 不得不看之JavaScript构造函数及new运算符

    JS中的函数即可以是构造函数又可以当作普通函数来调用,当使用new来创建对象时,对应的函数就是构造函数,通过对象来调用时就是普通函数. 普通函数的创建有:显式声明.匿名定义.new Function() 等三种方式. 当通过new来创建一个新对象时,JS底层将新对象的原型链指向了构造函数的原型对象,于是就在新对象和函数对象之间建立了一条原型链,通过新对象可以访问到函数对象原型prototype中的方法和属性. 和其他高级语言一样 Javascript 中也有构造函数和 new 运算符,我们知道

  • JavaScript中的 new 命令

    面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式. 那么,"对象"(object)到底是什么? 对象是单个实物的抽象. 对象是一个容器,封装了属性(property)和方法(method). 属性是对象的状态,方法是对象的行为(完成某种任务). 2. 构造函数 面向对象编程的第一步,就是要生成对象.通常需要一个模板,表示某一类实物的共同特征,然后对象根据这个模板生成. JavaScript 语言使用构造函数(constructo

  • JavaScript new对象的四个过程实例浅析

    本文实例讲述了JavaScript new对象的四个过程.分享给大家供大家参考,具体如下: new对象: function Person(name, age) { this.name = name; this.age = age; } var person = new Person("Alice", 23); new一个对象的四个过程: 1.创建一个空对象 var obj = new Object(); 2.让Person中的this指向obj,并执行Person的函数体 var re

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

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

  • 原生JS封装_new函数实现new关键字的功能

    一.前言 众所周知:没有对象怎么办?那就new一个! 那么在JS中,当我们new一个对象的时候,这个new关键字内部都干了什么呢? 现在我们就来剖析一下原生JS中new关键字内部的工作原理. 二.原始的new 首先,我们先new一个对象看看: //创建Person构造函数,参数为name,age function Person(name,age){ this.name = name; this.age = age; } //实例化对象小明 xm = new Person('xiaoming',1

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

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

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

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

    浅谈javascript中new操作符的原理

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

  • 全面解析JavaScript中“&&”和“||”操作符(总结篇)

    1.||(逻辑或), 从字面上来说,只有前后都是false的时候才返回false,否则返回true. alert(true||false); // true alert(false||true); // true alert(true||true); // true alert(false||false); // false 这个傻子都知道~~ 但是,从深层意义上来说的话,却有另一番天地,试下面代码 alert(0||1);//1 显然,我们知道,前面0意味着false,而后面1意味着true,

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

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

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

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

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

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

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

  • 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中,==与===操作符均可用于判断两个值是否相等:不同之处在于,如果进行判断的两个值类型不一致,===操作符会直接返回false,而==操作符则会在类型转换后再进行判断.详细的判断规则如下: ===操作符的判断规则 1.如果两个值的类型不一致,返回false. 2.如果两个值的类型一致,值一致,返回true.NaN是一个特例,NaN===NaN返回false. 3.如果两个值均为object类型,那么与Java一样,除非两者引用一致(reference指向同一个对象地址),不

  • javascript中加号(+)操作符的一些神奇作用

    javascript是一门神奇的语言,这没神奇的语言中有一个神奇的加操作符. 常用的加操作符我们可以用来做: 1.加法运算,例如:alert(1+2); ==>32.字符串连接,例如:alert("a"+"b");==>"ab" 高级一点的还有"+=",也是做以上两种操作的. 昨天在javascript丛林群里问了问题:怎么把"2000-09-11 19:22"这个日期格式字符串转换成毫秒数?

  • 用方法封装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中typeof操作符和constucor属性检测

    *#type.js 复制代码 代码如下: function Person(name, age) {  this.name = name;  this.age = age; } var d = {an: 'object'}; var a = ['apple', 'banana']; var f = function() {}; var s = 'David'; var n = 33; var b = true; var o = new Object(); var person = new Pers

随机推荐