首页手记 javascript中的new关键字做了什么？

javascript中的new关键字做了什么？

标签：

Node.js JavaScript

首先我们来看一段非常熟悉的代码：

function Hero(name,ability){
    this.name=name;
    this.ability=ability;
}
Hero.prototype.getAbility=function(){
    return this.ability;
}
var invoker=new Hero('Invoker','invoke')
console.log(invoker.getAbility());     //invoke
console.log(Object.getPrototypeOf(invoker)===Hero.prototype)     //true

var invoker=new Hero('Invoker','invoke')首先我们得明确这里的 new Hero后的Hero到底是什么？你可能会不假思索的认为这就是个class类嘛。在ES6之前javascript中并没有传统类的概念。这里的Hero不是类，而是构造器函数。顺带提一句在es6里function* (){}这样的函数被称为生成器函数。所以说Hero毫无疑问就是个函数，只不过它的调用方式，是通过new关键字来调用的。调用之后的结果就是生成了一个新的对象，如果我们了解javascript这门语言的特性，就不难知道，生成一个新对象实质上就是对Object.prototype对象进行克隆，然后伴随其他操作。所以我们可以通过下面代码理解这个过程：

function Hero(name,ability){
    this.name=name;
    this.ability=ability;
}

Hero.prototype.getAbility=function(){
    return this.ability;
}

var createObj=function(){
    var obj=new Object(),
        argumentsArray=[].slice.apply(arguments),//把arguments这个类数组转换为数组
        Constructor=argumentsArray[0],//取得参数中的构造器函数（第一个参数）
        Params=argumentsArray.slice(1);//取得参数中的剩余部分
        obj.__proto__=Constructor.prototype;//原型指向
    var newObj=Constructor.apply(obj,Params);//使用传入的构造器Constructor为新对象newObj设置属性
    return typeof newObj==='object'?newObj:obj;//返回新对象
}

这样，我们可以看到使用下面的代码，会产生一样的效果

var Invoker=createObj(Hero,'invoker','invoke');
var Invoker1=new Hero('invoker','invoke');
console.log(Invoker.getAbility());     //invoke
console.log(Invoker1.getAbility());     //invoke

我们可以把上面的Hero，改为ES6中的class‘语法糖’的方式重写一下，可以对比一下：

class Hero{
        constructor(name,ability){
        this.name=name;
        this.ability=ability;
    }
    getAbility(){
    return this.ability;
    }
}
let Invoker=new Hero('invoker','invoke');
console.log(Invoker.getAbility());
typeof Hero//function