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

 更新时间:2020年09月04日 09:03:22   作者:Clloz  
这篇文章主要介绍了JavaScript中new操作符的解析和实现,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下

前言

new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数。

new 运算符的运行过程

new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的)。new 操作符的执行大概有以下几个步骤:

  1. 创建一个新的空对象
  2. 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 prototype 属性指向一个对象,该对象有一个 constructor 属性指向该函数),让我们的公共属性和方法可以从原型上继承,不用每个实例都创建一次。
  3. 将第一步创建的新的对象作为构造函数的 this 的上下文,执行构造函数,构造函数的执行让我们配置对象的私有属性和方法。
  4. 执行构造函数,如果构造函数没有返回值或者返回值不是一个对象,则返回 this

我么可以用代码简单表示上面的逻辑:

function new_ (constr, ...rests) {
 var obj = {};
 obj.__proto__ = constr.prototype;
 var ret = constr.apply(obj, rests);
 return isPrimitive(ret) ? obj : ret; //判断构造函数的返回值是否为对象,不是则直接返回创建的obj对象
}

new 的实现

上面讲了 new 运算符的执行过程,下面我们来自己动手实现一个 new 运算符。

function new_(constr, ...rests) {
 if (typeof constr !== "function") {
 throw "the first param must be a function";
 }
 new_.target = constr;
 var obj = Object.create(constr.prototype);
 var ret = constr.apply(obj, rests);
 var isObj = typeof ret !== null && typeof ret === "object";
 var isFun = typeof ret === "function";
 //var isObj = typeof ret === "function" || typeof ret === "object" && !!ret;
 if (isObj || isFun) {
 return ret;
 }
 return obj;
}

function Person(name, age) {
 this.name = name;
 this.age = age;
}
Person.prototype.say = function () {
 console.log(this.name);
};
var p1 = new_(Person, 'clloz', '28')
var p2 = new_(Person, 'csx', '31')
console.log(p1); //Person {name: "clloz", age: "28"}
p1.say(); //clloz
console.log(p2); //Person {name: "csx", age: "31"}
p2.say(); //csx

console.log(p1.__proto__ === Person.prototype); //true
console.log(p2.__proto__ === Person.prototype); //true

以上就是一个简单的 new 实现,判断是否为对象那里可能不是很严谨,不过没有想到更好的方法。

一个小补充,在 mdnFunction.prototype.apply() 词条中看到的直接把方法写到 Function.prototype 上,也是个不错的思路,Function.prototype 在所以函数的原型链上,所以这个方法可以在每个函数上调用,方法内部的 this 也是指向调用方法的函数的。

Function.prototype.construct = function (aArgs) {
 var oNew = Object.create(this.prototype);
 this.apply(oNew, aArgs);
 return oNew;
};

强制用 new 调用构造函数

function Clloz(...arguments) {
 if (!(this instanceof Clloz)) {
 return new Clloz(...arguments)
 }
}

Tips

补充两个关于 new 运算符的知识点。

  1. 上面提到 new 的执行过程的最后一步,如果构造函数没有返回值或者返回值不是一个对象,则返回 this。但是如果返回的是一个 null 的话,依然返回 this,虽然 null 也算是 object
  2. new 操作符后面的构造函数可以带括号也可以不带括号,除了带括号可以传递参数以外,还有一个重要的点是两种用法的运算符优先级不一样,在JS运算符优先级这篇文章中有提到,带参数的 new 操作符的优先级是比不带参数的要高的,new Foo() > Foo() > new Foo

一般不太会遇到,可能有些题目会问这些问题。

以上就是详解JavaScript中new操作符的解析和实现的详细内容,更多关于JavaScript new解析和实现的资料请关注脚本之家其它相关文章!

相关文章

  • JavaScript 代码压缩工具小结

    JavaScript 代码压缩工具小结

    为了使页面更快的完成加载,经常需要对javascript/css代码进行压缩以减小体积,这里简单列一下用过的压缩工具,同时也作为存档
    2012-02-02
  • Javascript中的作用域及块级作用域

    Javascript中的作用域及块级作用域

    作用域永远都是任何一门编程语言中的重中之重,因为它控制着变量与参数的可见性与生命周期。下面给大家介绍Javascript中的作用域及块级作用域,需要的朋友参考下吧
    2017-12-12
  • layui前端时间戳转化实例

    layui前端时间戳转化实例

    今天小编就为大家分享一篇layui前端时间戳转化实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • js中常用的Tab切换效果(推荐)

    js中常用的Tab切换效果(推荐)

    下面小编就为大家带来一篇js中常用的Tab切换效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-08-08
  • 浅谈原型对象的常用开发模式

    浅谈原型对象的常用开发模式

    下面小编就为大家带来一篇浅谈原型对象的常用开发模式。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    JS+html5实现异步上传图片显示上传文件进度条功能示例

    这篇文章主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • HTTP HEAD请求的使用场合实例详解

    HTTP HEAD请求的使用场合实例详解

    这篇文章主要为大家介绍了HTTP HEAD请求的使用场合实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • javascript如何定义对象数组

    javascript如何定义对象数组

    本文主要介绍javascript如何定义对象数组,两种方法,比较实用,希望能给大家做一个参考。
    2016-06-06
  • javascript实现多级联动下拉菜单的方法

    javascript实现多级联动下拉菜单的方法

    这篇文章主要介绍了javascript实现多级联动下拉菜单的方法,通过javascript自定义函数实现对多级联动下拉菜单的操作,是非常实用的技巧,需要的朋友可以参考下
    2015-02-02
  • js修改input的type属性及浏览器兼容问题探讨与解决

    js修改input的type属性及浏览器兼容问题探讨与解决

    js修改input的type属性有些限制,今天遇到个问题一开始的时候,input的类型是text,后来变成了password类型。直观的思路是用js修改input的type类型。但ie下这么做不可行,所以只能换个思路感兴趣的朋友可以了解下
    2013-01-01

最新评论