JavaScript中的new操作符的具体使用

JavaScript中的new操作符是一个非常重要的概念，它可以让我们创建一个自定义的对象类型或者一个内置的对象类型，比如Array、Date、Function等。那么，new操作符到底做了什么呢？我们来一步一步分析。

new做了什么?

首先，当我们使用new操作符调用一个函数时，这个函数就会被当作一个构造函数，也就是说，它会用来创建一个新的对象实例。例如：

function Person(name) {  
    this.name = name;
}  
var p1 = new Person("Allen");  

这里，我们定义了一个Person函数，然后用new操作符创建了一个p1对象，这个对象的类型是Person，它有个name属性，赋值为"Allen"。

那么，具体来说，new操作符做了哪些事情呢？我们可以总结为以下四个步骤：

• 创建一个空的JavaScript对象，我们暂且叫它newInstance。
• 将newInstance的[[Prototype]]属性指向构造函数的prototype属性，如果prototype是一个对象的话。否则，newInstance保持为一个普通对象，它的[[Prototype]]指向Object.prototype。注意：[[Prototype]]是一个内部属性，它表示对象的原型链。通过这一步，newInstance就可以继承构造函数原型上的属性和方法。
• 执行构造函数，并将newInstance作为this的上下文（也就是说，在构造函数中所有对this的引用都指向newInstance）。这样，构造函数就可以给newInstance添加一些自身的属性和方法。
• 如果构造函数返回了一个非原始值（比如一个对象或者一个函数），那么这个返回值就会成为整个new表达式的结果。否则，如果构造函数没有返回任何值或者返回了一个原始值（比如一个数字或者一个字符串），那么newInstance就会成为整个new表达式的结果。（通常情况下，构造函数不会返回任何值，但是它可以选择这样做来覆盖正常的对象创建过程。）

例如：

function Foo(bar) {  
    this.bar = bar;  
}  
Foo.prototype.baz = function() {  
    console.log(this.bar);  
};  
var f1 = new Foo("Hello"); // f1是Foo类型的对象，它有bar属性和baz方法  
var f2 = new Foo("World"); // f2也是Foo类型的对象，它也有bar属性和baz方法  
f1.baz(); // Hello  
f2.baz(); // World  
function Bar() {  
    return {  
        name: "Bar"  
    };  
}  
var b1 = new Bar(); // b1是一个普通对象，它有name属性  
console.log(b1 instanceof Bar); // false  

这里，我们定义了两个函数Foo和Bar，并用new操作符创建了f1、f2和b1三个对象。可以看到，f1和f2都是Foo类型的对象，它们继承了Foo.prototype上的baz方法，并且有自己的bar属性。而b1则是一个普通对象，它只有name属性，并不属于Bar类型，因为Bar函数返回了一个对象。

底层实现上，class还是基于原型继承和构造函数的。基于这个理解:

function newInstance(constructor, ...args) {
  // 创建一个空对象，且 __proto__ 指向 constructor.prototype
  const obj = Object.create(constructor.prototype);
  // 执行构造函数并绑定 this 到新对象上
  const result = constructor.apply(obj, args);
  // 如果构造函数返回了一个对象，则返回该对象
  if (result && (typeof result === "object" || typeof result === "function")) {
    return result;
  }
  // 否则返回新对象
  return obj;
}
// 示例使用
function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  console.log(`Hello, I'm ${this.name}.`);
};
const person1 = newInstance(Person, "Allen");
person1.greet(); // 输出 "Hello, I'm Allen."

上述代码中，myNew 函数模拟了 new 操作符的行为，它接受两个参数：构造函数和构造函数的参数，返回一个新的实例对象。在函数内部，首先创建了一个新的空对象 obj，然后将该对象的 __proto__ 属性指向构造函数的原型对象，从而实现了原型继承。接着将构造函数的 this 绑定到新对象上，并执行构造函数。如果构造函数返回的是一个对象，则直接返回该对象，否则返回新创建的对象 obj。

到此这篇关于JavaScript中的new操作符的具体使用的文章就介绍到这了,更多相关JavaScript new操作符内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！