用new和不用new调用构造函数，有什么区别

最新推荐文章于 2025-04-17 19:38:54 发布

原创最新推荐文章于 2025-04-17 19:38:54 发布 · 1.7k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端笔记专栏收录该内容

8 篇文章

订阅专栏

本文探讨了在JavaScript中使用new关键字与不使用new关键字调用构造函数的区别。主要从构造函数的执行环境、返回值类型及作用域等方面进行详细解析。

用new和不用new调用构造函数，有什么区别

一、没有return

        function Person(name) {
            this.name = name;
            console.log(this.name);
        }
        var a = Person('Tom'); // Tom 
        var b = new Person('LI') // LI
        console.log(a) // undefined
        console.log(b) // Person {name: "LI"}

1.不使用new：this对象指向window，并且，不会默认返回任何对象
2.使用new： this对象指向的是Person 实例

二、有return
1.简单数据类型：数值，字符串、布尔值、null、undefined

        function Person(name) {
            this.name = name;
            console.log(this.name);
            return 1
        }
        var a = Person('Tom') // Tom
        var b = new Person('LI') // LI 
        console.log(a) // 1
        console.log(b) // Person {name: "LI"} 
        console.log(a.name) // undefined
        console.log(b.name) // LI

2.复杂数据类型：对象即属性的集合（function、Array、Object）

        function Person(name) {
            this.name = name;
            console.log(this.name);
            return [1,2,3]
        }
        var a = Person('Tom') // Tom
        var b = new Person('LI') // LI 
        console.log(a) // [1,2,3]
        console.log(b) // [1,2,3]
        console.log(a.name) // undefined
        console.log(b.name) // undefined

（1）不使用new：return之后，得到的就是return的返回值
（2）使用new：return之后，就会出现两种情况，一种是返回的是简单数据类型，这时返回值会被自动忽略，返回的还是原来的实例。另一种是返回的是复杂数据类型，此时得到的就是return的返回对象。