zoukankan      html  css  js  c++  java
  • 探索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;
    }

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

  • 相关阅读:
    【转载】 HTTP 中 GET 与 POST 的区别
    JS 浏览器cookie的设置,读取,删除
    JS Event事件流(冒泡机制、捕获机制、事件绑定)
    DOM节点树和元素树--深度遍历
    Html_Task4(知识点:水平居中+垂直居中/position/float/border-radius)
    百度前端技术学院—斌斌学院题库
    百度前端技术学院—-小薇学院(HTML+CSS课程任务)
    js正则表达式
    js设计模式(一)发布订阅模式
    vue学习笔记(一)——利用vue-cli搭建一个前端项目
  • 原文地址:https://www.cnblogs.com/heshuaiblog/p/14008359.html
Copyright © 2011-2022 走看看