js new 关键字的过程

326 阅读1分钟

前言:最近同事在复习js基础知识的时候,问了一个js new关键字做了什么的问题。于是在一通回忆以后。。。

new 关键字

先来看看new 关键字怎么使用。在js中,通过构造函数生成实例对象,可以用new 关键字:

function Dog(name) {
  this.name = name;
}
Dog.prototype.shut = function() {
  console.log(this.name+'汪!!!')
}
var dog = new Dog('小李')
dog.name //小李
dog.shut()//"小李汪!!!"
console.log(dog instanceof Dog) //true

以上就是new 的作用,他通过构造函数生成了一个实例对象。(instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上)。我们简单分析下new过程大概干了些什么: 1,首先肯定创建了一个对象{},因为我们最后得到的就是这个。 2,然后将对象的原型链指向了构造函数(DOg),因为我们是通过当前构造函数得到的实例对象(而我们如果创建一个新的空对象,那它的原型链应该指向Object这个构造函数)。 3,然后将构造函数this对象上的属性“copy”到新建的对象上。大概流程有了,我们来试着用代码来实现这个过程:

function copyNew() {
  var obj = {}; //创建一个新的对象
  var Constructor = [].shift.call(arguments); //获取传入的构造函数
  obj.__proto__ = Constructor.prototype; //将obj指向正确的原型
  var res = Constructor.apply(obj, arguments) //借用传入的构造函数,给obj赋值属性.
  return typeof(res) === 'object' ? res : obj; //并且如果构造函数有返回值且为object类型,那么将返回此值而不是obj
}

然后用我们实现的“new” 来生成一个实例对象:

var dog = copyNew(Dog, '小黄')
dog.name //小黄
dog.shut()//"小黄汪!!!"
console.log(dog instanceof Dog) //true

以上