前言

当我们在 JavaScript 中使用 new 关键字调用一个函数时,它不仅仅是一个简单的函数调用。new 的作用是创建一个新的对象实例,并且在函数内部,this 关键字会指向这个新创建的对象。让我们来深入了解 new 的工作原理和它如何影响函数的执行。

创建空对象

  1. 对象字面量方式:

     1var obj = {}; 
    

    这种方式是创建一个空的 JavaScript 对象。对象字面量是一种简便的方式来创建对象,可以直接在大括号 {} 内指定对象的属性和方法。

  2. 使用 new Object() 方式:

     1var obj2 = new Object(); 
    

    这种方式使用 new 关键字来调用 Object 构造函数,创建了一个空的对象实例。new Object() 与对象字面量 {} 的效果是相同的,都创建了一个空的对象。

  3. 区别和注意事项:

    • 语法差异: 对象字面量 {} 是 JavaScript 中直接定义对象的一种简单方式,而 new Object() 则是通过调用 Object 构造函数来创建对象。
    • 灵活性: 对象字面量允许你在定义对象时直接指定属性和方法,非常便捷;而 new Object() 则通常用于需要动态创建对象的场景,或者需要传递参数给构造函数的情况。
    • 性能: 在实际应用中,对象字面量通常更加高效,因为它不涉及函数调用和原型链的查找,而直接创建对象。

    无论是使用对象字面量 {} 还是 new Object(),它们都是创建 JavaScript 对象的有效方式,选择取决于你的代码需求和风格习惯。

使用 new 创建对象实例:

  1. 定义构造函数:

     1function Car(color) {
     2    this.name = 'su7';
     3    this.height = 1400;
     4    this.length = 5000;
     5    this.weight = 1000;
     6    this.color = color;
     7}
    

    这里定义了一个 Car 构造函数,它接受一个 color 参数,并将一些属性赋值给每个实例对象。

  2. 创建对象实例:

     1let car1 = new Car('red');
     2let car2 = new Car('green');
    

    使用 new Car(...) 创建了两个 Car 对象实例 car1car2,分别传入 'red''green' 作为 color 参数。

  3. 修改实例属性:

     1car1.name = '劳斯莱斯';
    

    通过 car1.name = '劳斯莱斯'; 修改了 car1 对象的 name 属性。

  4. 输出对象:

     1console.log(car1);
     2console.log(car2);
    

    打印 car1car2 对象,观察它们的属性值是否正确。

  5. 完整的示例:

 1
 2function Car(color) {
 3    this.name = 'su7';
 4    this.height = 1400;
 5    this.length = 5000;
 6    this.weight = 1000;
 7    this.color = color;
 8}
 9
10let car1 = new Car('red');
11let car2 = new Car('green');
12
13car1.name = '劳斯莱斯';
14
15console.log(car1);
16console.log(car2);

输出结果:

在这个示例中:

  • Car 构造函数定义了 Car 对象的结构,并初始化了每个对象的属性。
  • 使用 new Car('red') 和 new Car('green') 分别创建了两个 Car 对象实例 car1 和 car2
  • 修改了 car1 对象的 name 属性为 '劳斯莱斯'
  • 打印了 car1 和 car2 对象,验证了它们的属性值。

返回新对象

最后,如果在构造函数中没有明确指定返回其他对象,那么 new 表达式会隐式返回这个新创建的对象。这就意味着你不需要在构造函数中显式地返回对象,JavaScript 会自动处理。

 1function Person(name, age) {
 2    this.name = name;
 3    this.age = age;
 4    
 5}
 6
 7let john = new Person('John', 30);
 8console.log(john); 

在这个例子中,new Person('John', 30) 返回的就是一个包含 nameage 属性的新对象 john

总结

使用 new 关键字来调用函数时,JavaScript 发生了以下几件事情:

  • 创建一个空的对象。
  • 将 this 绑定到这个新创建的对象。
  • 执行构造函数内部的代码,给这个新对象添加属性和方法。
  • 如果没有明确指定其他的返回对象,隐式返回这个新对象。

这种方式使得 JavaScript 具有了类似传统面向对象语言的对象创建和初始化的能力,允许通过构造函数来定义对象类型并创建对象实例。

个人笔记记录 2021 ~ 2025