• 探索javascript中new操作符


    new操作符相信大家平时都用得不少,为了知其所以然,今天我们一起探索下new操作。

    首先,我们先思考下通过new操作符生成的对象都有哪些特点呢。

    1. 是一个对象;

    2. 具备构造函数原型对象的属性;

    3. 具备构造函数中this绑定的属性。

    接下来我们分别来探讨下这三个特点。

    1. 是一个对象。

    这一点相信很好理解,通过new操作符创建的是一个对象。可以配合下面例子理解:

    function Person() {}
    
    var person1 = new Person();
    console.log(Object.prototype.toString.call(person1)); //[object Object]

    2.  具备构造函数原型对象的属性。相信了解“原型”概念就能很好的理解这句话了。大家可以了解之前的一篇博客。同样我们也列举一个例子:

    function Person() {}
    Person.prototype.name = '张三';
    
    var person1 = new Person();
    console.log(person1.name); //张三

    3. 具备构造函数中绑定的属性。这句话可能有点令人迷糊,我们同样也列举一个例子:

    function Person() {
        this.age = 19;
    }
    Person.prototype.name = '张三';
    
    var person1 = new Person();
    console.log(person1.age); //19

    刚才我们已经了解了new操作符生产的对象具备了一些特性。接下来,我们自己写一个方法实现这些功能。

    我们依然根据特性来一步步实现new功能。

    1. 是一个对象。

    function myNew() {
        let ret = {};
    
        return ret;
    }

    现在我们返回了一个全新的对象。

    2. 具备构造函数原型对象的属性。

    function myNew() {
        const con = arguments[0];
        const params = [...arguments].splice(1);
        let ret = {};
    
        ret.__proto__ = con.prototype;
    
        return ret;
    }

    3. 具备构造函数中绑定的属性。

    function myNew() {
        const con = arguments[0];
        const params = [...arguments].splice(1);
        let ret = {};
    
        ret.__proto__ = con.prototype;
    
        con.call(ret, ...params);
    
        return ret;
    }

    至此,我们已经完成了这三个特性的实现。最后,附上全部的测试代码。

    function Person(sex) {
        this.age = 19;
        this.sex = sex;
    }
    
    Person.prototype.name = '张三'
    var person2 = myNew(Person, "men");
    console.log({ name: person2.name, age: person2.age, sex: person2.sex }); //{name: "张三", age: 19, sex: "men"}
    
    
    function myNew() {
        const con = arguments[0];
        const params = [...arguments].splice(1);
        let ret = {};
    
        ret.__proto__ = con.prototype;
    
        con.call(ret, ...params);
    
        return ret;
    }

    浅陋见识,不足之处,请大神指正。

  • 相关阅读:
    20165329 《Java程序设计》第九周学习总结
    20165329 四则运算2
    20165329 第八周补做
    20165329 《Java程序设计》第八周学习总结
    2017-2018-2 学号20165329 实验二《Java面向对象程序设计》实验报告
    20165329 结对编程项目-四则运算
    20165329 第七周学习总结
    20165329 第六周学习总结
    20165329 实验一 java环境的熟悉
    20165329 第五周学习总结
  • 原文地址:https://www.cnblogs.com/heshuaiblog/p/14008359.html
Copyright © 2020-2023  润新知