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;
    }

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

  • 相关阅读:
    移动Oracle数据库表空间文件。
    Web页面嵌入复杂WinForm控件权限问题
    关于bleand2000下面oracle服务器优化
    祝大家新年快乐!
    CentOS安装配置MongoDB及PHP MongoDB 扩展安装配置 新风宇宙
    FastDFS介绍和配置过程 新风宇宙
    ubuntu下安装redisserver和phpredis 新风宇宙
    PHP安装fastDFS扩展 新风宇宙
    用socket发送流数据示用 php://input? 接受post数据(可实现php和c/c++数据通讯) 新风宇宙
    linux操作系统下c语言编程入门 新风宇宙
  • 原文地址:https://www.cnblogs.com/heshuaiblog/p/14008359.html
Copyright © 2011-2022 走看看