new · 前端笔记

[TOC] # new new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 当代码 new Foo(...) 执行时，会发生以下事情： 1. 一个继承自 Foo.prototype 的新对象被创建。 2. 使用指定的参数调用构造函数 Foo ，并将 this 绑定到新创建的对象。没有指定参数列表、Foo 不带任何参数调用的情况下，`new Foo` 等同于 `new Foo()` 3. 如果构造函数返回了一个对象，这个对象即是new 表达式的结果，如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤） ~~~ function Foo (name) { this.name = name console.log(this) } Foo.prototype.sayHi = function (){ console.log(this.name) } // 第一步 var foo = new Foo(123) foo.sayHi() // 123 // 第二步 var foo1 = new Foo(123) // 返回 {name: 123} var foo2 = Foo(123) // 返回 window对象 ~~~ ## 返回值构造函数返回值有如下三种情况： * 返回一个对象 * 没有 return，即返回 undefined * 返回 undefined 以外的基本类型 情况1：返回一个对象 ~~~ function Car(color, name) { this.color = color; return { name: name } } var car = new Car("black", "BMW"); car.color; // undefined car.name; // "BMW" ~~~ 实例 car 中只能访问到返回对象中的属性。 情况2：没有 return，即返回 undefined ~~~ function Car(color, name) { this.color = color; } var car = new Car("black", "BMW"); car.color; // black car.name; // undefined ~~~ 实例 car 中只能访问到构造函数中的属性，和情况1完全相反。 情况3：返回undefined 以外的基本类型 ~~~ function Car(color, name) { this.color = color; return "new car"; } var car = new Car("black", "BMW"); car.color; // black car.name; // undefined ~~~ 与情况2相同 ## 模拟 new ~~~ function objectFactory() { // 使用objectFactory的时候,把arguments,转化为数组 var args = Array.prototype.slice.call(arguments); //提取第1个构建对象 var Constructor = args.shift(); // 创建constructor实例 instance var instance = Object.create(Constructor.prototype); // 使用apply函数运行args, 把 instance 绑定到 this var temp = Constructor.apply(instance, args); //返回对象判断是object 还是 null 还是实例 return temp instanceof Object ? temp : instance; } ~~~ # 参考资料 * [JavaScript深入之new的模拟实现](https://github.com/mqyqingfeng/Blog/issues/13) * [new运算符](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)