javascript--深入理解new关键字

javascript中的new关键字类似于其它高级语言中的new，都是用来创建一个实例对象。创建出来的对象和一般定义var obj = {} 或者 object.create() 不同点在于new出来的对象是直接继承构造函数。

我们可以打印一下new出来的对象和直接定义的对象：

function Animal(name) {
   this.name = name
}
var obj = {}
var dog = new Animal('dog')
console.log(dog)
console.log(obj)

可以看到new出来的dog实例是直接继承Animal函数的，构造函数constructor是Animal，obj对象则是直接继承Object.

 

所以这里可以了解到new关键字的两大功能：

1，创建并返回一个对象

2，该对象直接继承new后面的函数

 

再来看看执行new操作具体做了哪些事情：

function Animal(name) {
   this.name = name
   console.log('hello')
}
Animal.prototype.age = 10
var dog = new Animal('dog')
console.log(dog)

可以看到执行new操作后就执行了一遍Animal函数，然后继承了Animal函数原型并将this指向构造函数。所以模拟new写一个实现它的函数：

function Animal(name) {
   this.name = name
   console.log('hello')
}
Animal.prototype.age = 10
      
function newObj(f, args) {
   var obj = {}
   obj.__proto__ = Animal.prototype
   var data = f.apply(obj, args)
   return typeof data === 'object' ? data : obj
}
var dog = newObj(Animal, ['dog'])
console.log(dog)

执行上面代码后发现和用new关键字的结果是一样的。

分析一下上面的代码，首先定义一个对象，obj.__proto__ = Animal.prototype这句用来继承Animal的原型，var data = f.apply(obj, args)这句用apply将传进来的函数指向obj，并将返回值给data，最后return typeof data === 'object' ? data : obj返回一个对象，这一句判断data的类型是因为如果构造函数有返回值并且是object类型的，那么new出来的对象直接等于返回值，否则返回的是实例obj（这里就不打印了，感兴趣的打印一下就知道了）。