如何手动实现一个New操作
写在前面
在所有的前端面试中常常喜欢考面试者如何手写一个new操作符,作为在准备秋招的大三党,我也要考虑这些。
那么我们先看看new操作符都干了什么事情,有哪些操作?通过下面的代码来进行思考:
function Otaku(name, age) { this.name = name; this.age = age; this.habit = 'pk'; }
Otaku.prototype.strength = 60; Otaku.prototype.sayYourName = function () { console.log('I am ' + this.name); }
const person = new Otaku('乔峰',5000); person.sayYourName(); console.log(person); ``` ![控制台打印结果](http://p9utic4op.bkt.clouddn.com/new.png)
## 解析
从控制台打印出来的结果我们可以看出new操作符大概做了一下几件事情:
1. 返回(产生)了一个新的对象 2. 访问到了类Otaku构造函数里的属性 3. 访问到Otaku原型上的属性和方法 并且设置了this的指向(指向新生成的实例对象) 通过上面的分析展示,可以知道new团伙里面一定有Object的参与,不然对象的产生就有点说不清了。 先来边写写:
```js
const person = new Otaku('乔峰',5000); const person1 = objectFactory(Otaku, '鸠摩智', 5000);
function objectFactory(obj, name, age) {}
function objectFactory() { console.log(arguements); const Constructor = [].shift.call(arguments); const args = arguments; let obj = new Object(); Constructor.call(obj,...args); return obj; }
```
- 上面的代码注释太多,剔除注释以后的代码:
```js function objectFactory() { let Constructor = [].shift.call(arguments); const obj = new Object(); obj.__proto__ = Conctructor.prototype; Constructor.call(obj,...arguments); return obj; } ``` - 还有另外一种操作:
```js function myNew(Obj,...args){ var obj = Object.create(Obj.prototype); Obj.apply(obj,args); return obj; }
|