美文网首页
2019-09-18 new 关键字的实现原理

2019-09-18 new 关键字的实现原理

作者: 我的昵称好听吗 | 来源:发表于2019-09-29 19:43 被阅读0次

1.创建一个新对象;

2.将新对象的原型指向构造函数的原型链;

3.将构造函数的this指向新对象,并将初始化时的参数传入;

4.判断构造函数中是否返回了其他对象,如果有返回对象,则将构造函数的返回对象返回;否则返回新对象;

    // 构造函数1,有return
    function Test1 (options) {
        return {
            name: '哈哈',
            opt: options || ''
        };
    }

    // 构造函数2,属性和方法在原型和构造函数上。
    function Test2 (options) {
        this.width = 120;
        this.opt = options || '';
    }
    Test2.prototype.height = 123;

    function _new () {
        // 创建一个新对象;
        var newFunc = {};

        // 构造函数初始化时传入的参数
        var args = Array.prototype.slice.call(arguments, 1);

        // 默认第一个参数为构造函数
        var Func =  arguments[0];

        // 将新对象的原型指向构造函数的原型链;
        // prototype是一个拥有`constructor`内部方法的对象(函数)才有的属性(函数同时也有__proto__,只要是对象就有`__proto__`)。newFunc 不是一个函数,没有`constructor`,没有prototype,只有`__proto__`;
        newFunc.__proto__ = Func.prototype;

        // 将构造函数的this指向新对象;
        var res = Func.apply(newFunc, args);

        // 判断构造函数中是否返回了其他对象,如果有返回对象,则将构造函数的返回对象返回;否则返回新对象;
        if (res && (typeof res === 'object' || typeof res === 'function')) {
            return res;
        }

        return newFunc;
    }

    var test1 = _new(Test1, 'lalala');
    var newTest1 = new Test1('lalala');
    var test2 = _new(Test2, 'lalala');
    var newTest2 = new Test2('lalala');
    console.log('_new', test1);
    console.log('new', newTest1);
    console.log('_new', test2);
    console.log('new', newTest2);
image.png

扩展:

prototype和proto分别是什么?

prototype(显式原型)是对象的一个属性(每个对象都有一个prototype属性),这个属性是一个指针,指向一个对象,通过它可以向对象添加属性和方法。

proto(隐式原型)是对象的一个内置属性,是JS内部使用寻找原型链的属性,也就是说,当我们访问obj这个对象中的x属性时,如果在obj中找不到,那么就会沿着proto依次向上查找。

具体可以查看:https://www.cnblogs.com/Double-Zhang/p/7682211.html

相关文章

  • 2019-09-18 new 关键字的实现原理

    1.创建一个新对象; 2.将新对象的原型指向构造函数的原型链; 3.将构造函数的this指向新对象,并将初始化时的...

  • Java 多线程原理

    ReentrantLock 实现原理 synchronized 关键字原理 你应该知道的 volatile 关键字...

  • JS new 创建对象原理

    前言 怎么new一个对象呢?今天我们就来谈谈JS中,怎样使用new关键字创建一个对象及其实现原理。下文中涉及到的题...

  • new方法实现原理

    本小节知识: 【掌握】new方法实现原理 1.new方法实现原理 完整的创建一个可用的对象:Person *p=[...

  • new实现原理

    假如让你实现一个new的功能,首先我们需要搞清楚:new关键字都做了什么工作? 在浏览器控制台打印一下结果: 从结...

  • new关键字的原理

    new关键字做了哪些事 创建一个新对象 将构造函数的作用域赋给新对象(更改this指向) 执行构造函数的代码(为新...

  • 源码时代前端干货分享|new关键字底层原理-执行过程

    构造对象关键字:new 众所周知,js是用new来产生对象的,那么今天我们就来说说js里new产生对象的构造原理。...

  • js学习札记-new关键字

    js 的new关键字解析的过程中引擎执行了很多步骤,我们可以自己写一个仿new的函数来实现new关键字。 说js ...

  • Android面试准备

    Retrofit的实现与原理 关键字: 动态代理 HashMap原理 关键字:数组散列+单链表HashMap由数组...

  • js基础-new关键字

    js 的new关键字解析的过程中引擎执行了很多步骤,我们可以自己写一个仿new的函数来实现new关键字。 js n...

网友评论

      本文标题:2019-09-18 new 关键字的实现原理

      本文链接:https://www.haomeiwen.com/subject/owghuctx.html