模拟实现js中的new操作符

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

这是MDN上对new操作符的定义,从这句话中可以看出new返回的其实就是一个实例,那么问题来了实例又是个啥东西?

先看个例子:

function Cat(name, gender) {
    this.name = name;
    this.gender = gender;
}

Cat.prototype.say = () => {
    console.log('miao, miao, miao');
}

const cat = new Cat('Tom', 'male');
console.log(cat.name); /* Tom */
console.log(cat.gender); /* male */
cat.say(); /* miao, miao, miao */
console.log(typeof cat); /* object */

从例子中可以看到,new操作符返回的其实是一个对象,这个对象可以访问到构造函数中属性和方法。那么就很明显了,在js中,所有对象都包含一个__proto__属性指向构造函数的原型,在对象上查找属性时会顺着__proto__一直向上查找。

相关:简单说说原型和原型链

new的实现就简单了啊。

/* 因为new是关键词,所以用方法替代 */
function newObj() {
    const obj = {};
    const Constructor = Array.prototype.shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    Constructor.apply(obj, arguments);
    return obj;
}

对apply不熟悉的童鞋可能会对Constructor.apply(obj, arguments);这句代码有疑问。

function Cat(name, gender) {
    this.name = name;
    this.gender = gender;
}

const obj = {};
Cat.apply(obj, 'Tom', 'Mole'); // Constructor.apply(obj, arguments);
// 就相当于
obj.name = 'Tom';
obj.gender = 'Mole';

使用newObj来替换new会发现貌似没有问题,可以正常运行。可是当我们稍稍修改一下上述代码就会发现运行结果会不一样。

function Cat(name, gender) {
    this.name = name;
    this.gender = gender;
    return { name: 'Jerry', skin: 'block' };
}

Cat.prototype.say = () => {
    console.log('miao, miao, miao');
}

const cat = new Cat('Tom', 'male');
console.log(cat.name); /* Jerry */
console.log(cat.gender); /* undefined */
console.log(typeof cat); /* object */
cat.say(); /* TypeError: cat.say is not a function */

可以发现,当构造函数里面有返回值时,明显new操作符应该返回的对象是构造函数里面的返回值(仅当返回值是对象时有效)。
修改之前的代码。

function newObj() {
    const obj = {};
    const Constructor = Array.prototype.shift.call(arguments);
    obj.__proto__ = Constructor.prototype;
    const ret = Constructor.apply(obj, arguments);
    return typeof ret === 'object' ? ret : obj;
}

以上就是关于new的模拟实现。最后再贴上MDN上的描述:

  1. 创建一个空的简单JavaScript对象(即{});
  2. 链接该对象(即设置该对象的构造函数)到另一个对象 ;
  3. 将步骤1新创建的对象作为this的上下文 ;
  4. 如果该函数没有返回对象,则返回this。
491 声望
36 粉丝
0 条评论
推荐阅读
前端开发中图片的优化
1. 常用的图片格式PNG优点:背景可以透明、画质很高、不失真缺点:体积很大使用场景:比较小或者需要部分透明的图片,例如logo、图标等JPG/JPEG优点:压缩比高的情况下可以保留比较高的画质,相对PNG俩说体积会小...

WillemWei阅读 875

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木140阅读 11.8k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 5.9k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.1k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木39阅读 7k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6k评论 9

491 声望
36 粉丝
宣传栏