简单了解Javascript的new关键字

前言

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

创建空对象

1. 对象字面量方式：

   var obj = {}; // 创建对象字面量
   

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

2. 使用 new Object() 方式：

   var obj2 = new Object(); // 创建对象实例
   

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

3. 区别和注意事项：

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

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

使用 new 创建对象实例：

1. 定义构造函数：

   function Car(color) {
       this.name = 'su7';
       this.height = 1400;
       this.length = 5000;
       this.weight = 1000;
       this.color = color;
   }
   

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

2. 创建对象实例：

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

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

3. 修改实例属性：

   car1.name = '劳斯莱斯';
   

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

4. 输出对象：

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

   打印 car1 和 car2 对象，观察它们的属性值是否正确。

5. 完整的示例：

function Car(color) {
    this.name = 'su7';
    this.height = 1400;
    this.length = 5000;
    this.weight = 1000;
    this.color = color;
}

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

car1.name = '劳斯莱斯';

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

输出结果：

在这个示例中：

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

返回新对象

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

function Person(name, age) {
    this.name = name;
    this.age = age;
    // 注意，这里不需要显式地返回 this
}

let john = new Person('John', 30);
console.log(john); // Output: Person { name: 'John', age: 30 }

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

总结

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

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

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