JavaScript中的new操作符怎么使用

本篇内容介绍了“JavaScript中的new操作符怎么使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

new做了什么?

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

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

这里，我们定义了一个

Person

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函数返回了一个对象。

如何手写一个new

底层实现上，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