js中的new到底做了什么?

最新推荐文章于 2024-03-13 21:31:08 发布

湖边看客

最新推荐文章于 2024-03-13 21:31:08 发布

阅读量271

点赞数 1

文章标签： javascript 前端原型模式

本文链接：https://blog.csdn.net/VVVVV16/article/details/127822826

版权

本文探讨了JavaScript中new关键字的工作原理，重点讲解了构造函数返回值的判断及其对创建对象的影响。实例说明了基本类型和引用类型返回值的区别，并给出了封装新功能create()来模拟new行为的方法。

摘要由CSDN通过智能技术生成

new的时候

1.创建一个空对象

2.将空对象的原型指向于构造函数的原型

3.将空对象作为构造函数的上下文(改变this的指向)

4.对构造函数有返回值的处理判断

//返回值是基本类型

  function fnObj() {
        this.name = '张三'
        return 11111111
    }

    console.log(new fnObj());

结果:

//返回值是引用类型

  function FnObj(age) {
        this.age = age
        return {}
    }
    console.log(FnObj(12));

结果:

因此,我们可以得出结论:

New里面可以对构造函数的return 返回值进行判断

如果 return的是基本类型则这个返回值就会被忽略

当然如果返回的是引用类型这个new 就没用了

根据这个我们可以自己封装一个 new的功能

  function Fun(age, name) {
        this.age = age
        this.name = name
        return 222
    }


    //从new的使用我们可以知道
    //new的第一个参数  就是一个函数   第二个参数  是 new的时候传进去的参数
    function create(fn, ...args) {
        //1.创建一个空对象
        var obj = {}    //var obj =Object.create({})
        //2.将空对象的原型   指向于构造函数的原型
        Object.setPrototypeOf(obj, fn.prototype)
        //3.将空对象作为构造函数的上下文(改变this的指向)
        var result = fn.apply(obj, args);
        //4.对构造函数有返回值的处理判断
        return result instanceof Object ? result : obj
    }

    console.log(create(Fun, 18, '张三'));

结果: