面试官问:能否模拟实现JS的new操作符(高频考点)

可以点击上方的话题JS基础系列,查看往期文章
这篇文章写于2018年11月05日new模拟实现Object.create是面试高频考点,之前发布在掘金有近2万人阅读,现在发布到公众号声明原创。

1. 前言

这是面试官问系列的第一篇,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。
面试官问系列文章如下:感兴趣的读者可以点击阅读。
1.面试官问:能否模拟实现JS的new操作符
2.面试官问:能否模拟实现JS的bind方法
3.面试官问:能否模拟实现JS的call和apply方法
4.面试官问:JS的this指向
5.面试官问:JS的继承

用过Vuejs的同学都知道,需要用new操作符来实例化。

new Vue({el: '#app',mounted(){},
});

那么面试官可能会问是否想过new到底做了什么,怎么模拟实现呢。

附上之前写文章写过的一段话:已经有很多模拟实现new操作符的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。

2. new 做了什么

先看简单例子1

// 例子1
function Student(){
}
var student = new Student();
console.log(student); // {}
// student 是一个对象。
console.log(Object.prototype.toString.call(student)); // [object Object]
// 我们知道平时声明对象也可以用new Object(); 只是看起来更复杂
// 顺便提一下 `new Object`(不推荐)和Object()也是一样的效果
// 可以猜测内部做了一次判断,用new调用
/** if (!(this instanceof Object)) {
*    return new Object();
*  }
*/
var obj = new Object();
console.log(obj) // {}
console.log(Object.prototype.toString.call(student)); // [object Object]typeof Student === 'function' // true
typeof Object === 'function' // true

从这里例子中,我们可以看出:一个函数用new操作符来调用后,生成了一个全新的对象。而且StudentObject都是函数,只不过Student是我们自定义的,ObjectJS本身就内置的。再来看下控制台输出图,感兴趣的读者可以在控制台试试。

例子1 控制台输出图

new Object() 生成的对象不同的是new Student()生成的对象中间还嵌套了一层__proto__,它的constructorStudent这个函数。

// 也就是说:
student.constructor === Student;
Student.prototype.constructor === Student;

2.1 小结1:从这个简单例子来看,new操作符做了两件事:

  1. 创建了一个全新的对象。

  2. 这个对象会被执行[[Prototype]](也就是__proto__)链接。

接下来我们再来看升级版的例子2

// 例子2
function Student(name){console.log('赋值前-this', this); // {}this.name = name;console.log('赋值后-this', this); // {name: '若川'}
}
var student = new Student('若川');
console.log(student); // {name: '若川'}

由此可以看出:这里Student函数中的this指向new Student()生成的对象student

2.2 小结2:从这个例子来看,new操作符又做了一件事:

  1. 生成的新对象会绑定到函数调用的this

接下来继续看升级版例子3

// 例子3
function Student(name){this.name = name;// this.doSth();
}
Student.prototype.doSth = function() {console.log(this.name);
};
var student1 = new Student('若');
var student2 = new Student('川');
console.log(student1, student1.doSth()); // {name: '若'} '若'
console.log(student2, student2.doSth()); // {name: '川'} '川'
student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用ES5 则是:
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true

例子3 控制台输出图

关于JS的原型关系我之前看到这张图,觉得很不错,分享给大家。

2.3 小结3:这个例子3再一次验证了小结1中的第2点。也就是这个对象会被执行[[Prototype]](也就是__proto__)链接。并且通过new Student()创建的每个对象将最终被[[Prototype]]链接到这个Student.protytype对象上。

细心的同学可能会发现这三个例子中的函数都没有返回值。那么有返回值会是怎样的情形呢。那么接下来请看例子4

// 例子4
function Student(name){this.name = name;// Null(空) null// Undefined(未定义) undefined// Number(数字) 1// String(字符串)'1'// Boolean(布尔) true// Symbol(符号)(第六版新增) symbol// Object(对象) {}// Function(函数) function(){}// Array(数组) []// Date(日期) new Date()// RegExp(正则表达式)/a/// Error (错误) new Error()// return /a/;
}
var student = new Student('若川');
console.log(student); {name: '若川'}

我测试这七种类型后MDN JavaScript类型,得出的结果是:前面六种基本类型都会正常返回{name: '若川'},后面的Object(包含Functoin, Array, Date, RegExg, Error)都会直接返回这些值。

2.4 由此得出 小结4:

  1. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用会自动返回这个新的对象。

结合这些小结,整理在一起就是:

  1. 创建了一个全新的对象。

  2. 这个对象会被执行[[Prototype]](也就是__proto__)链接。

  3. 生成的新对象会绑定到函数调用的this

  4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。

  5. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用会自动返回这个新的对象。

3. new 模拟实现

知道了这些现象,我们就可以模拟实现new操作符。直接贴出代码和注释

/*** 模拟实现 new 操作符* @param  {Function} ctor [构造函数]* @return {Object|Function|Regex|Date|Error}      [返回结果]*/
function newOperator(ctor){if(typeof ctor !== 'function'){throw 'newOperator function the first param must be a function';}// ES6 new.target 是指向构造函数newOperator.target = ctor;// 1.创建一个全新的对象,// 2.并且执行[[Prototype]]链接// 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。var newObj = Object.create(ctor.prototype);// ES5 arguments转成数组 当然也可以用ES6 [...arguments], Aarry.from(arguments);// 除去ctor构造函数的其余参数var argsArr = [].slice.call(arguments, 1);// 3.生成的新对象会绑定到函数调用的`this`。// 获取到ctor函数返回结果var ctorReturnResult = ctor.apply(newObj, argsArr);// 小结4 中这些类型中合并起来只有Object和Function两种类型 typeof null 也是'object'所以要不等于null,排除nullvar isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;var isFunction = typeof ctorReturnResult === 'function';if(isObject || isFunction){return ctorReturnResult;}// 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`),那么`new`表达式中的函数调用会自动返回这个新的对象。return newObj;
}

最后用模拟实现的newOperator函数验证下之前的例子3

// 例子3 多加一个参数
function Student(name, age){this.name = name;this.age = age;// this.doSth();// return Error();
}
Student.prototype.doSth = function() {console.log(this.name);
};
var student1 = newOperator(Student, '若', 18);
var student2 = newOperator(Student, '川', 18);
// var student1 = new Student('若');
// var student2 = new Student('川');
console.log(student1, student1.doSth()); // {name: '若'} '若'
console.log(student2, student2.doSth()); // {name: '川'} '川'student1.__proto__ === Student.prototype; // true
student2.__proto__ === Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用ES5 则是:
Object.getPrototypeOf(student1) === Student.prototype; // true
Object.getPrototypeOf(student2) === Student.prototype; // true

可以看出,很符合new操作符。读者发现有不妥或可改善之处,欢迎指出。回顾这个模拟new函数newOperator实现,最大的功臣当属于Object.create()这个ES5提供的API

4. Object.create() 用法举例

我之前整理的一篇文章中也有讲过,可以翻看JavaScript 对象所有API解析

MDN Object.create()

Object.create(proto, [propertiesObject])方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。它接收两个参数,不过第二个可选参数是属性描述符(不常用,默认是undefined)。

var anotherObject = {name: '若川'
};
var myObject = Object.create(anotherObject, {age: {value:18,},
});
// 获得它的原型
Object.getPrototypeOf(anotherObject) === Object.prototype; // true 说明anotherObject的原型是Object.prototype
Object.getPrototypeOf(myObject); // {name: "若川"} // 说明myObject的原型是{name: "若川"}
myObject.hasOwnProperty('name'); // false; 说明name是原型上的。
myObject.hasOwnProperty('age'); // true 说明age是自身的
myObject.name; // '若川'
myObject.age; // 18;

对于不支持ES5的浏览器,MDN上提供了ployfill方案。

if (typeof Object.create !== "function") {Object.create = function (proto, propertiesObject) {if (typeof proto !== 'object' && typeof proto !== 'function') {throw new TypeError('Object prototype may only be an Object: ' + proto);} else if (proto === null) {throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");}if (typeof propertiesObject != 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");function F() {}F.prototype = proto;return new F();};
}

到此,文章就基本写完了。感谢读者看到这里。

5. 最后总结一下:

  1. new做了什么:

  1. 创建了一个全新的对象。

  2. 这个对象会被执行[[Prototype]](也就是__proto__)链接。

  3. 生成的新对象会绑定到函数调用的this

  4. 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。

  5. 如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error),那么new表达式中的函数调用会自动返回这个新的对象。

  1. 怎么模拟实现

// 去除了注释
function newOperator(ctor){if(typeof ctor !== 'function'){throw 'newOperator function the first param must be a function';}newOperator.target = ctor;var newObj = Object.create(ctor.prototype);var argsArr = [].slice.call(arguments, 1);var ctorReturnResult = ctor.apply(newObj, argsArr);var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;var isFunction = typeof ctorReturnResult === 'function';if(isObject || isFunction){return ctorReturnResult;}return newObj;
}

读者发现有不妥或可改善之处,欢迎指出。另外觉得写得不错,可以点个赞,也是对我的一种支持。

推荐阅读

我在阿里招前端,我该怎么帮你?(现在还可以加模拟面试群)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?
若川知乎高赞:有哪些必看的 JS库?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野,回复"pdf" 领取优质前端书籍pdf,回复"1",可加群长期交流学习

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

精选前端好文,伴你不断成长

我是若川欢迎关注!可点击

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276328.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跟我一起学WCF(2)——利用.NET Remoting技术开发分布式应用

一、引言 上一篇博文分享了消息队列(MSMQ)技术来实现分布式应用,在这篇博文继续分享下.NET平台下另一种分布式技术——.NET Remoting。 二、.NET Remoting 介绍 2.1 .NET Remoting简介 .NET REmoting与MSMQ不同,它不支持离线可得&…

二叉树的建立与遍历_51、二叉树遍历-重建二叉树JZ4

题目描述输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树。假设输入的前序遍历和中序遍历的结果中都不含重复的数字。例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7,2,1,5,3,8,6},则重建二叉树并返回。思路回顾三种经典的遍历&…

推荐关注这7个高质量的前端公众号

拓宽眼界,增加深度,在阅读的世界里,我们往往能找到不一样的态度,提升朋友圈质量,从关注这几个公众号开始。轻扫一下二维码就行了,你可以试试,肯定会有意外收获。大迁世界 简介:前端小…

Windows Live Writer 在win2003 的安装方法

下载Windows Live Writer整体安装包,最好是离线安装包 2.在xp系统上安装 3.查找C:\Program Files\Common Files\Windows Live\.cache目录 .cache目录是隐藏的,目录下面就是各个安装文件的msi安装包 4.拷贝相应的msi文件,到Windows 2003安装就…

decode 大于比较 小于_6 燃气输配系统6.3 压力不大于1.6Mpa的室外燃气管道城镇燃气设计规范 GB500282006(2020修订版)...

6.3 压力不大于1.6Mpa的室外燃气管道6.3.1中压和低压燃气管道宜采用聚乙烯管、机械接口球墨铸铁管、钢管或钢骨架聚乙烯塑料复合管,并应符合下列要求: 1 聚乙烯燃气管应符合现行的国家标准《燃气用埋地聚乙烯管材》GB15558.1 和《燃气用埋地聚乙烯管件…

若川的2017年度总结,一如既往

可以点击上方的标签若川的故事、年度总结,查看往期文章有读者反馈说看我年度总结系列比我源码系列更有启发。所以打算把2016-2018的年度总结发布到公众号声明原创,希望对大家有所启发。(虽然我的每一年都过得非常普通...)若川的20…

沟通:用故事产生共鸣

《沟通:用故事产生共鸣》(全彩) 基本信息作者: Nancy Duarte(南希.杜瓦特)译者: 冯海洋出版社:电子工业出版社ISBN:9787121195914上架时间:2013-4-1出版日期:2013 年3月开本:12开页码&#xff1…

若川的2018年度总结,平淡无奇

可以点击上方的标签若川的故事、年度总结,查看往期文章偷偷告诉你,公众号内回复【报告】,可以获取你自己的github 2020 年度报告昨晚在我的6个微信群里都发了红包,以这样的方式跨过了2020年。运营公众号真的挺难的,比如…

基于dnn的车牌识别_自然场景中文文字识别,身份证火车票都能识别

图像处理中OCR(Optical Character Recognition光学字符识别)场景非常多,也给大家的工作生活带来了很多便利,比如车牌识别就能管理停车场车辆的出入,快递时只需给一个带有快递信息的图就能自动解析上传发件信息和收件信息,再比如我…

年末的大厂前端面试总结(20届双非二本)-终入字节

关注若川视野, 回复"pdf" 领取资料,回复"1",可加群长期交流学习自我介绍双非二本,软件工程,自学前端,今年毕业。喜欢编程,古风,日语和英语。常以冷月心之名混迹前端江湖,也曾在混迹网文圈时用冷月心做笔名签约掌阅,作品《清起风云》…

动图演示23个鲜为人知的VSCode快捷键

原文地址:https://dev.to/devmount/23-lesser-known-vs-code-shortcuts-as-gif-80尽管我在VS Code中经常使用许多快捷方式,以下快捷方式可能会派上用场,但我经常忘记它们的存在。我制作了一些GIF,以便更好地记住它们。也许这里面也…

使用C语言进行面向对象的开发--GObject入门[5]

转载请注明出处 blog.csdn.net/pingf0 或www.cnblogs.com/pingf 接上文这一部分简要介绍下类的析构,或者成为终结。还是多说几句,也算是对前文的补充1.生成一个类是由父到子,析构的时候自然与之相对是由子到父。2.GObject的内存管理并没有采用…

面试官问:能否模拟实现JS的bind方法(高频考点)

可以点击上方的话题JS基础系列,查看往期文章写于2018年11月21日,发布在掘金阅读量1.3w前言这是面试官问系列的第二篇,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。面试官问系列文章如下:感…

连续投影算法_中航国画荣获“2020 IAV国际视听嘉年华” 大屏幕投影显示行业三大奖项!...

近日,“2020IAV国际视听嘉年华”在深圳湾创新生态园隆重举行,航空工业上电下属子公司中航国画作为2020年迪拜世博会中国馆官方合作伙伴应邀参加此次高峰论坛,并在展会期间凭借4K系列双色激光工程投影机、LP160UL系列超高亮度双色激光工程投影…

CMDB功能分析与实现方案

CMDB功能分析与实现方案 CMDB系统的主要功能 1.用户管理,记录测试,开发,运维人员的用户表 2.业务线管理,记录业务的详情 3.项目管理,指定此项目属于那一条业务线 4.应用管理,指定此应用的开发人员 5.主机管理,记录主机管理员,连接的网络设备,存储,云主机,物理主机等信息 6.主机…

他的前端焦虑:30岁以后的前端路怎么走? 你想过吗~

马云曾说,员工的离职原因很多,唯两点最真实:一是钱,没给到位;二是心,委屈了。当时间来到了年末,离职、跳槽、年终奖又成了年终热词,而此时辞职好似成为了一场勇敢者的游戏&#xff0…

码云 Gitee 新增仓库访问之 IP 白名单功能

码云企业版上线 IP 白名单功能,该功能主要用于企业禁止非指定 IP 访问代码仓库。如下图所示:使用方法:进入企业控制面板 -> 管理 -> 安全设置添加允许访问 Git 仓库的 IP 地址启用安全选项:只允许在信任范围内推拉代码其他关…

福利 | 抽奖送现金送书《Web前端工程师修炼之道》

很多关注了我的公众号的粉丝可能都不知道我,趁这次机会简单介绍下。你好,我是若川。江西人,某不那么知名的陶瓷大学毕业生,目前在杭州从事前端开发工作。常以若川为名混迹于江湖。更详细的可以点击关于我我历时一年才写了《学习源…

蒙特卡洛方法_基本理论-蒙特卡洛方法与定积分

全球图形学领域教育的领先者、自研引擎的倡导者、底层技术研究领域的技术公开者,东汉书院在致力于使得更多人群具备内核级竞争力的道路上,将带给小伙伴们更多的公开技术教学和视频,感谢一路以来有你的支持。我们正在用实际行动来帮助小伙伴们…