js面试-手写代码实现new操作符的功能
我们要搞清楚new操作符到底做了一些什么事情?
1.创建一个新的对象
2.将构造函数的作用域赋给新对象(因此this指向了这个新对象)
3.执行构造函数中的代码(为这个新对象添加属性)
4.返回新对象
上面给出了new操作符到底做了一些什么事情,我们就一步一步的实现这些,是不是就实现了new操作符的功能。
首先定义一个构造函数Person如下:
function Person(name) {
this.name = name;
}
Person.prototype.sayName = function () {
console.log(this.name);
}
然后创建模拟new操作符功能的函数如下:
function Person(name) {
this.name = name;
}
Person.prototype.sayName = function () {
console.log(this.name);
} function createPerson() {
// 1 创建一个新的对象
var o = {};
// 2 获取构造函数,以便实现作用域的绑定
var _constructor = [].shift.call(arguments);
// 3 由于通过new操作创建的对象实例内部的不可访问的属性[[Prototype]](有些浏览器里面为__proto__)
//指向的是构造函数的原型对象的,所以这里实现手动绑定。
o.__proto__ = _constructor.prototype;
// 4.作用域的绑定使用apply改变this的指向
_constructor.apply(o, arguments);
return o;
}
var person1 = createPerson(Person, 'ydb');
person1.sayName();
这样子就实现了new操作符的功能了。
其实上面代码还可以这样子写:
function Person(name) {
this.name = name;
}
Person.prototype.sayName = function () {
console.log(this.name);
} function createPerson() {
// 1 获取构造函数,以便实现作用域的绑定
var _constructor = [].shift.call(arguments);
// 2 创建一个对象
var o = Object.create(_constructor.prototype);
// 由于通过new操作创建的对象实例内部的不可访问的属性[[Prototype]](有些浏览器里面为__proto__)
//指向的是构造函数的原型对象的。
//而Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。// 4.作用域的绑定
_constructor.apply(o, arguments);
return o;
}
var person1 = createPerson(Person, 'ydb');
person1.sayName();
用Object.create可以创建一个没有任何属性的对象,如下:
var o = Object.create(null);
js面试-手写代码实现new操作符的功能的更多相关文章
- 2019前端面试系列——JS高频手写代码题
实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...
- 前端面试手写代码——JS函数柯里化
目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Cu ...
- 前端面试手写代码——call、apply、bind
1 call.apply.bind 用法及对比 1.1 Function.prototype 三者都是Function原型上的方法,所有函数都能调用它们 Function.prototype.call ...
- 前端面试手写代码——模拟实现new运算符
目录 1 new 运算符简介 2 new 究竟干了什么事 3 模拟实现 new 运算符 4 补充 预备知识: 了解原型和原型链 了解this绑定 1 new 运算符简介 MDN文档:new 运算符创建 ...
- 前端面试手写代码——JS数组去重
目录 1 测试用例 2 JS 数组去重4大类型 2.1 元素比较型 2.1.1 双层 for 循环逐一比较(es5常用) 2.1.2 排序相邻比较 2.2 查找元素位置型 2.2.1 indexOf ...
- Java面试手写代码题
1.栈实现 2.Iterator实现 3.单例 4.多线和控制(暂停,恢复,停止) 5.生产者消费者
- .netER的未来路,关于基础是否重要和应该自己手写代码吗?
http://www.cnblogs.com/onepiece_wang/p/5558341.html#!comments 引用"基础知识的学习,一开始可能是背书,但是在后续若干年的工作过程 ...
- UI到底应该用xib/storyboard完成,还是用手写代码来完成?
UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 ...
- javaScript(js)手写原生任务定时器源码
javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...
随机推荐
- We don't wanna work!
We don't wanna work! [JAG Asia 2016] 两个set,一个代表工作的,一个代表不工作的 其实是一个很简单的模拟,但是我竟然排序之前标号.... 检查代码的时候要从头开始 ...
- elastic search记录
安装与启动 插件安装 中文分词器 https://github.com/medcl/elasticsearch-analysis-ik elastic api GET _search { " ...
- slqmap简单使用
网址:-u 指定哪个参数:-p 需要登录用--cookie 获得所有数据库:--dbs 获得所有用户:--users 指定某个数据库:-D 显示所有表--tables 指定某个数据表:-T 显示列:- ...
- Web Service概述 及 应用案例
Web Service的定义 W3C组织对其的定义如下,它是一个软件系统,为了支持跨网络的机器间相互操作交互而设计.Web Service服务通常被定义为一组模块化的API,它们可以通过网络进行调用 ...
- JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单
1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...
- YII框架开发一个项目的通用目录结构:
testdrive/ index. assets/ css/ images/ themes/ yiic. commands/ ...
- iOS路由详解
本文如题,路由详解,注定是一篇详细解释iOS路由原理及使用的文章,由于此时正在外地出差,无法详细一一写出,只能不定时的补充. 一.什么是iOS路由 路由一词来源于路由器,可以实现层级之间消息转发的功能 ...
- OC门与OD门以及线与逻辑
OC(Open Collector)门又叫集电极开路门,主要针对的是BJT电路(从上往下依次是基极,集电极,发射极)OD(Open Drain)门又叫漏极开路门,主要针对的是MOS管(从上往下依次是漏 ...
- “冰桶挑战”之外:微软科技助力ALS患者
编者按:"直到ALS出现治疗方法,科技就是我的解药."ALS患者,前美国橄榄球联盟(NFL)球员Steve Gleason如是说.最近,一支微软首届黑客马拉松(Hackathon) ...
- Linux上部署Tomcat+Nginx负载均衡
前提:配置好了JDK. 我这里是vm上的linux虚拟机,可能不适用于所有情况. 一.Linux上配置Tomcat 1.下载地址:https://tomcat.apache.org/download- ...