js里new的模拟实现

晴天
556 阅读2分钟
今天我们就来学习一下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就实现完了，大家动手，自己试一试吧！！！


avatar
文章
阅读
粉丝