JS基础源码之手写模拟new

news2024/12/24 2:16:10

JS基础源码之手写模拟new

手写模拟new
- 初步实现
- 最终实现

手写模拟new

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一。
我们先看看new实现了哪些功能：

function Person (name,age){
	this.name = name;
	this.age = age;
	this.habit = 'Games';
}
Person.prototype.strength = 80;
Person.prototype.sayYourName = function (){
	console.log('I am ', this.name);
}
var person = new Person('kin',18);
console.log(person.name);//kin
console.log(person.habit);//Games
console.log(person.strength);//80
person.sayYourName();// I am kin

我们可以看到，实例person可以：

访问到Otaku构造函数里的属性；
访问到Otaku.prototype中的属性；
接下来，我们可以尝试着模拟一下：
因为new是关键字，所以无法像bind函数一样直接覆盖，所以我们写一个函数，命名为objectFactory，来模拟new的效果，用的时候是这样的：

function Person(){
	...
}
//使用new
var person = new Person(...);
//使用objectFactory
var person = objectFactory(Person,...)

初步实现

因为new的结果是一个新的对象，所以在模拟实现的时候，我们也要建立一个新对象，假设这个对象叫obj，因为obj会具有Person构造函数里的属性，我们可以使用Person.apply(obj,arguments)来给obj添加新的属性。
然后，实例的proto属性会指向构造函数的prototype,也正是因为建立起这样的关系，实例可以访问原型上的属性。

//第一版代码
function objectFactory(){
	var obj = new Object();
	Constructor = [].shift.call(arguments);
	obj.__proto__ = Constructor.prototype;
	Constructor.apply(obj,arguments);
	return obj;
}

在这一版中，我们：

用new Object()的方式新建了一个对象obj;
取出第一个参数，就是我们要传入的构造函数。此外因为shift会修改原数组，所以arguments会被去除第一个参数；
将obj的原型指向构造函数，这样obj就可以访问到构造函数原型中的属性；
使用apply，改变构造函数this的指向到新建的对象，这样obj就可以访问到构造函数中的属性；
返回obj;
测试下：

function Person (name,age){
	this.name = name;
	this,age = age;
	this,habit = 'Games';
}
Person.prototype.strength = 88;
Person.prototype.sayYourName = function(){
	console.log('I am',this.name);
}
function objectFactory(){
	var obj = new Object();
	Constructor = [].shift.call(arguments);
	obj.__proto__ = Constructor.prototype;
	Constructor.apply(obj,arguments);
	return obj;
};
var person = objectFactory(Person,'kin',17);
console.log(person.name);//kin
console.log(person.habit);//Games
console.log(person.strength);//88
person.sayYourName();// I am kin

最终实现

假如构造函数有返回值

function Person(name,age){
	this.strength = 90;
	this.age = age;
	return {
		name:name,
		habit:'Games'
	}
}
var person = new Person('kin',12);
console.log(person.name);//kin
console.log(person.habit);//Games
console.log(person.strength);//undefined
console.log(person.age);//undefined

在这个案例中，构造函数返回了一个对象，在实例person中只能访问返回的对象中的属性。
而且还要注意一点，在这里我们是返回一个对象，假如我们只是返回一个基本类型的值呢？
我们再看一个例子：

Function Person(name,age){
	this.strength = 60;
	this.age = age;
	return 'handsome boy';
}
var person = new Otaku('kin',12);
console.log(person.name);//undefined
console.log(person.age);//undefined
console.log(person.strength);//60
console.log(person.age);//18

这次尽管有返回值，但是相当于没有对返回值进行处理。
所以我们还需要判断返回的值是不是一个对象，如果是一个对象，我们就返回这个对象，如果没有，我们该返回什么就返回什么。

//最终版的代码
function objectFactory(){
	var obj = new Object();
	Constructor = [].shift.call(arguments);
	obj.__proto__ = Constructor.apply(obj,arguments);
	return typeof ret == 'object' ? ret : obj;
};