• 技术文章 >web前端 >前端问答

    javascript中new的用法是什么

    长期闲置长期闲置2022-01-28 16:24:47原创406

    在JavaScript中,new运算符用于创建一个自定义对象实例,或者是一个构造函数内置对象的实例;new创建出来的实例可以访问构造函数Person内的属性。

    本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

    javascript中new的用法是什么

    new 的用途

    new:new 运算符用于创建一个自定义对象实例,或者是一个构造函数内置对象的实例。啥意思呢,有点拗口,我们先看个栗子先。

    new F() 时,发生了什么

    第一版

    栗子在这:

    function Person(name, age) {
        this.name = name
        this.age = age
        console.log(this) // Person{name: "xuedinge", age: "20"}
    }
    Person.prototype.have = "cat"
    const person = new Person("xuedinge", "20")
    console.log(person.name) // xuedinge
    console.log(person.have) // cat
    console.log(person) // Person{name: "xuedinge", age: "20"}

    从这个栗子中,我们可以看到,new 具有以下能力:

    1、new 创建出来的实例可以访问构造函数Person内的属性;

    2、new 创建出来的实例可以访问构造函数原型上的属性;

    3、new 可以将构造函数中的this绑定到新创建出来的对象上;

    那我们就先针对new的这三个能力先实现一下:

    function fakeNew(Fn) {
        // 创建一个空对象
        let obj = new Object()
        // 将新对象的原型指针指向构造函数的原型
        obj.__proto__ = Fn.prototype
        // 处理除了 Fn 以外的剩余参数
        Fn.apply(obj, [].slice.call(arguments, 1))
        return obj
    }

    看下效果

    function Person(name, age) {
        this.name = name
        this.age = age
        console.log(this) // Person {name: "xuedinge", age: "20"}
    }
    Person.prototype.have = "cat"
    function fakeNew(Fn) {
        // 创建一个空对象
        let obj = new Object()
        // 将新对象的原型指针指向构造函数的原型
        obj.__proto__ = Fn.prototype
        // 处理除了 Fn 以外的剩余参数
        Fn.apply(obj, [].slice.call(arguments, 1))
        return obj
    }
    const newPerson = fakeNew(Person, "xuedinge", "20")
    console.log(newPerson.name) // xuedinge
    console.log(newPerson.have) // 20
    console.log(newPerson) // Person {name: "xuedinge", age: "20"}

    看样子跟new的能力比较相像了。但是当构造函数里有返回值时,是怎么样子的呢,再看个:

    // 当返回值是对象时:
    function Person(name, age) {
        this.name = name
        this.age = age
        console.log(this) // Person {name: "xuedinge", age: "20"}
        return {
          car: "leikesasi"
        }
    }
    Person.prototype.have = "cat"
    const person = new Person("xuedinge", "20")
    console.log(person.name) // undefined
    console.log(person.have) // undefined
    console.log(person.car) // leikesasi
    console.log(person) // {car: "leikesasi"}

    可以看出,当构造函数有返回值是对象时,new创建的实例对象就是构造函数返回的结果,当返回值是普通对象时呢,看下面这个:

    // 当返回值是普通值时:
    unction Person(name, age) {
        this.name = name
        this.age = age
        console.log(this) // Person{name: "xuedinge", age: "20"}
        return "leikesasi"
    }
    Person.prototype.have = "cat"
    const person = new Person("xuedinge", "20")
    console.log(person.name) // xuedinge
    console.log(person.have) // cat
    console.log(person) // Person{name: "xuedinge", age: "20"}

    当返回值是普通对象时,跟没有返回值时,结果是一致的。

    相关推荐:javascript学习教程

    以上就是javascript中new的用法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 前端 html
    上一篇:javascript中call和apply有什么区别 下一篇:JavaScript中常用对象有哪些
    千万级数据并发解决方案

    相关文章推荐

    • JavaScript有哪两种异步处理方式• 深入浅析JavaScript进阶之BOM技术• 怎么利用javascript求0到200中不能被13整除的数• javascript中命名变量有哪些规则• javascript中focus是什么意思
    1/1

    PHP中文网