美文网首页
JS中的new操作符

JS中的new操作符

作者: RiverSouthMan | 来源:发表于2019-11-21 15:01 被阅读0次

转载

JavaScript中new操作符用于创建一个给定构造函数的对象实例。

如下例子:

function Person(name, age){
    this.name = name;
    this.age = age;
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}

我们定义了一个构造函数Person,然后通过new操作符生成Person构造函数的一个实例并将其引用赋值给变量person1。然后控制台打印出person1的内容,可以看到该实例对象具有name和age属性,它们的值就是我们在调用构造函数时传入的值。

那么,我们使用new操作符的时候都发生了哪些事呢?

new关键字进行的操作

new关键字进行了如下的操作(为了便于描述,obj用来表示创建的空对象、用constrc来表示构造函数):

创建一个空对象obj({});
将obj的[[prototype]]属性指向构造函数constrc的原型(即obj.[[prototype]] = constrc.prototype)。
将构造函数constrc内部的this绑定到新建的对象obj,执行constrc(也就是跟调用普通函数一样,只是此时函数的this为新创建的对象obj而已,就好像执行obj.constrc()一样);
若构造函数没有返回非原始值(即不是引用类型的值),则返回该新建的对象obj(默认会添加return this)。否则,返回引用类型的值。
这里补充说明一下:[[prototype]]属性是隐藏的,不过目前大部分新浏览器实现方式是使用__proto__来表示。构造函数的prototype属性我们是可以显式访问的。

让我们用图来展示文章开头的那个例子的过程:


image.png

怎么样,是不是对new操作符的执行过程有了一个清晰的了解了?

自己实现new操作符

从上面我们已经清楚地掌握了new的执行过程,那么我们就动手来自己实现一下new操作吧!

function myNew(constrc, ...args) {
    const obj = {}; // 1. 创建一个空对象
    obj.__proto__ = constrc.prototype; // 2. 将obj的[[prototype]]属性指向构造函数的原型对象
    constrc.apply(obj, args); // 3.将constrc执行的上下文this绑定到obj上,并执行
    return obj;  //4. 返回新创建的对象
}

// 使用的例子:
function Person(name, age){
    this.name = name;
    this.age = age;
}
const person1 = myNew(Person, 'Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}

这里的关键两步就是:

将新创建对象的原型链设置正确,这样我们才能使用原型链上的方法。
将新创建的对象作为构造函数执行的上下文,这样我们才能正确地进行一些初始化操作。
本文结束!
————————————————
版权声明:本文为CSDN博主「码飞_CC」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://chen-cong.blog.csdn.net/article/details/103149502

相关文章

  • JS基础回归01:new操作符,原型和原型链

    本篇介绍 new 操作符的背后原理以及 JS 如何依赖原型形成原型链,完成继承。 new 操作符的本质 new 操...

  • js面试题--new的原理

    JS中的new操作符 和其他高级语言一样,JS中也有new运算符,我们知道new运算符是用来实例化一个类,从而在内...

  • new操作步骤

    js中的new()到底做了些什么?? 要创建 Person 的新实例,必须使用 new 操作符。以这种方式调用构造...

  • 关于 new 操作符

    1. 为什么要有new操作符? JS 的 new 到底是干什么的? 本文指出,new 操作符其实就是个语法糖,用了...

  • js中new操作符

    js中的new操作符MDN中是这样说的。new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实...

  • 面试题【Day10】

    本篇绪论 1, call、apply、bind 2, Object.create() 3,JS中的new操作符的原...

  • JS中的new操作符

    转载 JavaScript中new操作符用于创建一个给定构造函数的对象实例。 如下例子: 我们定义了一个构造函数P...

  • new操作符

    最近在掘金上看到大佬 yck 的文章 重学 JS 系列:聊聊 new 操作符把new操作符的作用,如何自己实现ne...

  • js new操作符

    简单实现 其实new操作符实现还是很简单的,因为Mdn上总共也就是4句话来描述它的作用 创建一个空的简单JavaS...

  • JS 中 new 操作符的简单理解

    在声明复杂类型的变量(如函数)时,我们可以通过构造函数的方式进行声明。如:声明一个函数 或者通过构造函数的方式新建...

网友评论

      本文标题:JS中的new操作符

      本文链接:https://www.haomeiwen.com/subject/atltwctx.html