要创建构造函数的实例,肯定要使用到new关键字,但是,到底需要哪些过程呢?
我们以下面为例,首先穿件一个构造函数
function dog(){
this.name='happy'
}
接下来我们分步骤来解析创建实例的过程:
1.首先,需要创建一个空对象 var obj={}
2.接下来我们需要把obj的__proto__属性指向构造函数的prototype, obj.__proto__=dog.prototype,
__proto__即原型属性,是每一个对象都拥有的属性,众所周知,js中所有的类型皆为对象,这个属性并非所有浏览器都有实现,而他的标准属性为[[prototype]].
而prototype是函数才拥有的属性,即原型对象。
3.接着,我们需要利用call方法,将dog函数内部的this指针替换为obj,并立即执行dog函数,由于指针被替换,所以dog函数内部的属性会被复制到obj对象,这样obj就会拥有dog所有的内部属性, dog.call(obj)
4.最后,我们判断下obj属性是否为Object类型,如果是,返回obj对象,如果不是,则返回{}
把上面的步骤还原成方法
function _new(){
var obj={}
obj.__proto__=dog.prototype
dog.call(obj)
return typeof obj==='object' ? obj:{}
}
当然,在实例化时,有时候会传入一些初始值,并且,我们也不会只对一个构造函数实例化,这个时候,我们只需对上面的方法进行一些改动
function _new(func) {
var obj = {}
obj.__proto__ = func.prototype
const args=[].slice.call(arguments)
args.splice(0,1)
func.apply(obj, args)
return typeof obj === 'object' ? obj : {}
}
这样的话,就可以满足要求啦,定义一个cat函数
function cat(name,color){
this.name=name
this.color=color
}
var instance=_new(cat,'ali','yellow')
console.log(instance.name) // ali
console.log(instance.color) // yellow
当然,在实际开发中,我们只需使用new关键就行了,上述代码只是用来解释实例化的过程。
如果有想学习web前端的程序员,加VX:TZ07900, 免费送web前端视频教程噢