今天我们就来学习一下js里的new,看看它有哪些作用,怎么来模拟实现。
1、new的使用
下面我们来写一个例子,先来看看new是怎么使用的?
function Animal(type){
this.type = type; //实例上的属性
}
Animal.prototype.say = function(){
console.log('say')
}
let animal = new Animal('哺乳类');
console.log(animal.type);//哺乳类
animal.say(); //say复制代码
从这个例子中,我们知道了,通过Animal构造函数new出来的实例,可以访问到构造函数里的属性,和原型上的方法。
但是我们当前的构造函数并没有写return,如果写了return会是怎样呢?下面我们来看一下
function Animal(type){
this.type = type; //实例上的属性
return 'gjf';
}
let animal = new Animal('哺乳类');
console.log(animal.type);//哺乳类复制代码
上面的构造函数返回了字符串'gjf',但是并没有任何用处,和没有返回值是一样的,下面我们再写一个返回对象的构造函数,来看一下是什么结果呢?
function Animal(type){
this.type = type; //实例上的属性
return {name:'gjf'};
}
let animal = new Animal('哺乳类');
console.log(animal);//{name:'gjf'}复制代码
如果我们的构造函数返回一个对象的话,那么我们new出来的实例,就是返回的对象了。
2、new的几个作用
- new会返回一个对象,所以会在构造函数的内部创建一个对象
- 返回的对象,就是构造函数中的this,可以访问的构造函数中的属性
- 返回的对象,可以访问构造函数原型上的方法
- 返回普通的值或者没有返回值,把创建的对象返回,返回对象,就把构造函数里返回的对象返回
3、new的模拟实现
function Animal(type){
this.type = type; //实例上的属性
//如果当前构造函数返回的是一个引用类型,需要把这个对象返回
return {name:'gjf'}
}
Animal.prototype.say = function(){
console.log('say')
}
//new的实现
function mockNew(){
//Constructor => animal剩余的arguments就是其他的参数
let Constructor = [].shift.call(arguments);
let obj = {};//返回的结果
obj.__prototype__ = Constructor.prototype;//原型上的方法
let r = Constructor.apply(obj,arguments);
return r instanceof Object ? r : obj;
}
//1)如果Animal不写return的情况下
let animal = mockNew(Animal,'哺乳类');
console.log(animal.type);//哺乳类
animal.say(); //say
//2)如果Animal写了return的情况下
let animal = mockNew(Animal,'哺乳类');
console.log(animal);//{name:'gjf'}复制代码
好了,这里我们的new就实现完了,大家动手,自己试一试吧!!!