实现JS new运算符

2022/3/26 6:25:24

本文主要是介绍实现JS new运算符,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、关于new运算符

这篇博客主要关注如何实现new运算符,不太了解new的同学可以看看这篇博客
链接: 谈谈JS new运算符到底做了些什么

二、前期准备: 实现一个new运算符需要做哪些事情

  1. 创建一个空对象 instance
  2. 绑定构造函数的this,使其指向instance,执行构造函数为instance设置属性
  3. 将instance的原型链指向构造函数的原型
  4. 如果构造函数指定了引用类型的返回值ret,那么返回ret,否则返回instance

    既然准备好了,接下来就开始撸代码吧~

三、实现JavaScript new运算符

代码如下

function _new(ctor) {
    if (typeof ctor !== 'function') {
        throw 'first parameter must be a function !'
    }
    // 创建实例,链接原型
    var instance = Object.create(ctor.prototype)
    // 提取形参列表
    var params = Array.prototype.slice.call(arguments, 1)
    // 绑定this,设置属性,获取构造函数的返回值
    var customReturn = ctor.call(instance, ...params)
    // 如果构造函数自身有引用类型的返回值,那么返回自身,否则返回instance
    var isCustomReturnAvailable = typeof customReturn === 'object' || typeof customReturn === 'function'
    // ES6 new.target一般在函数体中使用,在构造函数中返回函数的引用,在普通函数中返回undefined
    _new.target = ctor
    return isCustomReturnAvailable ? customReturn : instance
}

测试用例

function Apple(size) {
    this.size = size
}
function CustomApple() {
    return {
        size: 'big'
    }
}
Apple.prototype.color = 'red'
console.log(_new(Apple, 'huge')) // Apple { size: 'huge' }
console.log(new Apple('huge')) // Apple { size: 'huge' }
console.log(_new(CustomApple, 'huge')) // { size: 'big' } 

结果
在这里插入图片描述



这篇关于实现JS new运算符的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程