zoukankan      html  css  js  c++  java
  • new的原理及实现

    new的过程

    // new运算的过程
    /**
     * 1、创建一个空对象;
     * 2、该空对象的原型指向构造函数(链接原型):将构造函数的 prototype 赋值给对象的 __proto__属性;
     * 3、绑定 this:将对象作为构造函数的 this 传进去,并执行该构造函数;
     * 4、返回新对象:如果构造函数返回的是一个对象,则返回该对象;否则(若没有返回值或者返回基本类型),返回第一步中新创建的对象;
     */
    var Person = function(name) {
        this.name = name
        console.log('name is ', this.name)
    }
    Person.prototype.getName = function() {
        return this.name
    }
    var objectFactory = function() {
        // 1、创建一个空对象
        var obj = new Object()
        console.log('before shift arguments = ',arguments)
        // 获取构造函数Person
        Constructor = [].shift.call(arguments)
        //因为arguments是类数组,并不是真正的数组,所以不能直接调用数组的shift方法,但是可以通过call调用。
        console.log('after shift arguments = ', arguments)
        console.log(`Constructor = ${Constructor}`)
        // 2、该空对象的原型指向构造函数: 将构造函数的prototype 赋值给空对象的 __proto__属性;
        obj.__proto__ = Constructor.prototype
        // 3、将空对象作为构造函数的this传进去,并执行该构造函数
        var ret = Constructor.apply(obj, arguments)
        // 4、返回新对象:如果构造函数返回的是一个对象,则返回该对象;否则(若没有返回值或者返回基本类型),返回第一步中新创建的对象;
        return typeof ret == 'object' ? ret : obj
    }
    var a = objectFactory(Person, 'wyh')
    console.log('执行后的name = ', a.name)
    

    new实现的第四步解释:

    构造函数返回值有如下三种情况:

    • 1、返回一个对象
    • 2、没有 return,即返回 undefined
    • 3、返回undefined 以外的基本类型

    情况1:返回一个对象

    function Car(color, name) {
        this.color = color;
        return {
            name: name
        }
    }
    
    var car = new Car("black", "BMW");
    car.color;
    // undefined
    
    car.name;
    // "BMW"
    

    实例 car 中只能访问到返回对象中的属性

    情况2:没有 return,即返回 undefined

    function Car(color, name) {
        this.color = color;
    }
    
    var car = new Car("black", "BMW");
    car.color;
    // black
    
    car.name;
    // undefined
    

    实例 car 中只能访问到构造函数中的属性,和情况1完全相反。

    情况3:返回undefined 以外的基本类型

    function Car(color, name) {
        this.color = color;
        return "new car";
    }
    
    var car = new Car("black", "BMW");
    car.color;
    // black
    
    car.name;
    // undefined
    

    实例 car 中只能访问到构造函数中的属性,和情况1完全相反,结果相当于没有返回值。

    所以需要判断下返回的值是不是一个对象,如果是对象则返回这个对象,不然返回新创建的 obj对象。

  • 相关阅读:
    Appium之开发计算器自动化测试脚本Demo
    Appium之开发环境搭建
    Javassist之常用API的应用 02
    阿里云提出的漏洞(Phpcms V9某处逻辑问题导致getshell漏洞解决方法)的问题
    z-index 层级关系
    html5移动端Meta设置
    js判断手机访问PC端跳转到手机站
    PHPCMS如何开启手机站点
    DedeCms文档关键词替换,优先替换长尾关键词
    [转载]利用@media screen实现网页布局的自适应,@media screen and
  • 原文地址:https://www.cnblogs.com/w-yh/p/12008171.html
Copyright © 2011-2022 走看看