我们要搞清楚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操作符的功能的更多相关文章

  1. 2019前端面试系列——JS高频手写代码题

    实现 new 方法 /* * 1.创建一个空对象 * 2.链接到原型 * 3.绑定this值 * 4.返回新对象 */ // 第一种实现 function createNew() { let obj ...

  2. 前端面试手写代码——JS函数柯里化

    目录 1 什么是函数柯里化 2 柯里化的作用和特点 2.1 参数复用 2.2 提前返回 2.3 延迟执行 3 封装通用柯里化工具函数 4 总结和补充 1 什么是函数柯里化 在计算机科学中,柯里化(Cu ...

  3. 前端面试手写代码——call、apply、bind

    1 call.apply.bind 用法及对比 1.1 Function.prototype 三者都是Function原型上的方法,所有函数都能调用它们 Function.prototype.call ...

  4. 前端面试手写代码——模拟实现new运算符

    目录 1 new 运算符简介 2 new 究竟干了什么事 3 模拟实现 new 运算符 4 补充 预备知识: 了解原型和原型链 了解this绑定 1 new 运算符简介 MDN文档:new 运算符创建 ...

  5. 前端面试手写代码——JS数组去重

    目录 1 测试用例 2 JS 数组去重4大类型 2.1 元素比较型 2.1.1 双层 for 循环逐一比较(es5常用) 2.1.2 排序相邻比较 2.2 查找元素位置型 2.2.1 indexOf ...

  6. Java面试手写代码题

    1.栈实现 2.Iterator实现 3.单例 4.多线和控制(暂停,恢复,停止) 5.生产者消费者

  7. .netER的未来路,关于基础是否重要和应该自己手写代码吗?

    http://www.cnblogs.com/onepiece_wang/p/5558341.html#!comments 引用"基础知识的学习,一开始可能是背书,但是在后续若干年的工作过程 ...

  8. UI到底应该用xib/storyboard完成,还是用手写代码来完成?

    UI到底应该用xib/storyboard完成,还是用手写代码来完成? 文章来源:http://blog.csdn.net/libaineu2004/article/details/45488665 ...

  9. javaScript(js)手写原生任务定时器源码

    javaScript(js)手写原生任务定时器 功能介绍 定时器顾名思义就是在某个特定的时间去执行一些任务,现代的应用程序早已不是以前的那些由简单的增删改查拼凑而成的程序了,高复杂性早已是标配,而任务 ...

随机推荐

  1. 利用face_recognition,dlib与OpenCV调用摄像头进行人脸识别

    用已经搭建好 face_recognition,dlib 环境来进行人脸识别 未搭建好环境请参考:https://www.cnblogs.com/guihua-pingting/p/12201077. ...

  2. Docker系列六: 使用Docker官方公共仓库和私有仓库

    使用公共仓库 登陆官方网站:https://hub.docker.com/   注册账号和密码 在Docker hub中创建一个资源,  create  respositories,   创建后会提示 ...

  3. GSON转换成Long型变为科学计数法及时间格式转换异常的解决方案

    直接上工具类了,简单实用 public class GsonUtils { private static Gson gson = null; static { if (gson == null) { ...

  4. Different Integers

    牛客一 J题 树状数组 题目描述 Given a sequence of integers a1, a2, ..., an and q pairs of integers (l1, r1), (l2, ...

  5. ios 设置UITextField的placeholder大小颜色

    需求:产品嫌弃placeholder的字体太大,颜色太明显,要求跟正常输入时的字体及颜色不同 方法:设置placeholder的大小和颜色,实际上是设置placeholder的label的大小和颜色, ...

  6. 年度Java技术盘点,懂这些技术的程序员2019发展大好

    与一年前一样,Java仍然是最流行的编程语言.据TIOBE的数据显示,几十年来,Java比其他语言更常名列榜首,Java因为它拥有可移植性.可扩展性和庞大的用户社区,所以许多知名互联网公司使用Java ...

  7. 吴裕雄--天生自然python学习笔记:python文档操作自动生成菜单 Word 文件

    许多学校营养午餐的菜单是由教师来轮流制作 ,这是一个 比较烦锁的工作,如 果能自动用教师最熟悉的 Word 文件来生成一个菜单文件,使教师对生成的菜单稍作 修改即可使用,那将是一个不错的主意. 案例要 ...

  8. [LC] 165. Compare Version Numbers

    Compare two version numbers version1 and version2.If version1 > version2 return 1; if version1 &l ...

  9. python3下scrapy爬虫(第一卷:安装问题)

    一般爬虫都是用urllib包,requests包 配合正则.beautifulsoup等包混合使用,达到爬虫效果,不过有框架谁还用原生啊,现在我们来谈谈SCRAPY框架爬虫, 现在python3的兼容 ...

  10. Java - 面向对象练习 - market

    Marketpackage market; public class Market {    private String marname;    private Product[] producta ...