写在前面的话
前端的入门相对简单,相对于其他方向天花板可能会相对较低。但是在市场上一个优秀的前端依旧是很抢手的。能够站在金字塔上的人往往寥寥无几。
目前前端也已经一年半了,在公司的知识栈相对落后,就业形势不容乐观,所以有必要自己琢磨,往中高级前端进阶。后续我将推出《JavaScript进阶系列》,一方面是一个监督自己学习的一个过程,另一方面也会给看到的童鞋一些启发。
JavaScript新建对象的过程
在ES5中定义一个函数来创建对象,如下:
function Person(name){
this.name = name;
}
var person = new Person("xuan")
复制代码
JavaScript调用new的过程主要由下面四步组成:
- 新生成一个对象
- 链接到原型中
- 绑定this
- 返回新对象
下面跟着我按照这个思路来创建对象:
function create(){
//Todo
}
person = create(Person,"xuan");//create(ObjectName,...arguments)
复制代码
我们使用如上所示的函数来模拟new对象。
首先第一步新建一个对象:
function create(){
var obj = new Object();
return obj;
}
person = create(Person,"xuan");
复制代码
现在已经创建并返回一个对象,当然现在打印出来肯定是一个普通的对象,毕竟流程还没有走完,我们接着往下看。第二步链接到原型中。
function create(){
var obj = new Object();
var constructor = [].shift.call(arguments);
console.log(constructor);
console.log(arguments);
obj.__proto__ = constructor.prototype;
return obj;
}
person = create(Person,"xuan");
复制代码
现在把构造函数和参数都打印出来了。没问题!第三步绑定this,如下:
function create() {
let obj = new Object();
let constructor = [].shift.call(arguments)
obj.__proto__ = constructor.prototype
constructor.apply(obj, arguments);
console.log(obj);
return obj;
}
person = create(Person,"xuan");
复制代码
打印结果实现new对象的效果。
现在改一下构造函数代码:
function Person(name){
this.name = name;
return {
name:"abc"
}
}
var person = new Person("xuan");
console.log(person);
console.log(Object.prototype.toString.call(person));
复制代码
效果如下:
所以我们要处理第三步绑定this中apply函数的返回值:
function create() {
let obj = new Object();
let constructor = [].shift.call(arguments)
obj.__proto__ = constructor.prototype
//constructor.apply(obj, arguments);
let res = constructor.apply(obj, arguments);
if(res){
return res;
}else{
return obj;
}
}
person = create(Person,"xuan");
复制代码
完美!
现在我们思考一下这里的res返回值有三种情况:undefined,基本类型,对象。
如果res是undefined时,返回obj;
如果res是基本类型我们也返回obj;
如果res是对象我们返回res对象;
综合一下:
如果返回的res对象是Object类型那么返回res,否则返回obj。当然其他的判断条件也是可以的。最后代码优化如下:
function create() {
let obj = new Object();
let constructor = [].shift.call(arguments)
obj.__proto__ = constructor.prototype
//constructor.apply(obj, arguments);
let res = constructor.apply(obj, arguments);
return res instanceof Object?res:obj;
}
person = create(Person,"xuan");
复制代码
几个问题
现在的代码已经完美了么?我自己先提几个问题。
- new Object()创建的对象纯净么?
- 为啥使用[].shift.call()来进行参数分割?arguments是一个数组么?