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

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

  • 相关阅读:
    java-泛型及上界下界详解
    【CSDN】Spring+Spring MVC+Mybatis实战项目之云笔记项目
    mybatis
    spring笔记-spring mvc表单
    spring笔记-第一个spring mvc 项目
    巡风源码阅读与分析---AddPlugin()方法
    巡风源码阅读与分析---view.py
    BUGKUctf-web-writeup
    陕西省网络空间安全技术大赛部分题目writeup
    “百度杯”CTF比赛(二月场)-web-writeup
  • 原文地址:https://www.cnblogs.com/heshuaiblog/p/14008359.html
Copyright © 2011-2022 走看看