새로운 객체를 생성할 때 js가 무엇을 하는지 아시나요?

머리말

JavaScript에서는 new 연산자를 통해 인스턴스 객체를 생성할 수 있으며, 이 인스턴스 객체는 원본 객체의 속성과 메서드를 상속합니다. 따라서 new의 존재 의미는 단순히 객체를 인스턴스화하는 것이 아니라 JavaScript에서 상속을 구현한다는 것입니다.

new의 역할

먼저 예시를 통해 new의 역할을 이해해 봅시다. new 的作用，示例如下：

function Person(name) {
  this.name = name
}
Person.prototype.sayName = function () {
  console.log(this.name)
}
const t = new Person('小明')
console.log(t.name)  // 小明
t.sayName()  // 小明

从上面的例子中我们可以得出以下结论：

• new 通过构造函数 Person 创建出来的实例对象可以访问到构造函数中的属性。

• new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性，也就是说通过 new 操作符，实例与构造函数通过原型链连接了起来。

构造函数 Person 并没有显式 return 任何值（默认返回 undefined），如果我们让它返回值会发生什么事情呢？

function Person(name) {
  this.name = name
  return 1
}
const t = new Person('小明')
console.log(t.name)  // 小明

在上述例子中的构造函数中返回了 1，但是这个返回值并没有任何的用处，得到的结果还是和之前的例子完全一样。我们又可以得出一个结论：

构造函数如果返回原始值，那么这个返回值毫无意义。

我们再来试试返回对象会发生什么：

function Person(name) {
  this.name = name
  return {age: 23}
}
const t = new Person('小明')
console.log(t)  // { age: 23 }
console.log(t.name)  // undefined

通过上面这个例子我们可以发现，当返回值为对象时，这个返回值就会被正常的返回出去。我们再次得出了一个结论：

构造函数如果返回值为对象，那么这个返回值会被正常使用。

总结：这两个例子告诉我们，构造函数尽量不要返回值。因为返回原始值不会生效，返回对象会导致 new 操作符没有作用。

实现 new

首先我们要清楚，在使用 new

function _new(fn, ...args) {
  const newObj = Object.create(fn.prototype);
  const value = fn.apply(newObj, args);
  return value instanceof Object ? value : newObj;
}

위의 예시를 통해 다음과 같은 결론을 내릴 수 있습니다.

< ul>

new Person 생성자를 통해 생성된 인스턴스 객체는 생성자의 속성에 액세스할 수 있습니다.

new 생성자 Person을 통해 생성된 인스턴스는 생성자 프로토타입 체인의 속성, 즉 new 연산자를 통해 액세스할 수 있습니다. , 인스턴스와 생성자는 프로토타입 체인을 통해 연결됩니다.

생성자 Person은 어떤 값도 명시적으로 반환하지 않습니다(기본값은 정의되지 않음을 반환함). 값을 반환하면 어떻게 되나요?

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function () {
  console.log(this.name);
};

const t = _new(Person, "小明");
console.log(t.name);  // 小明
t.sayName();  // 小明

위 예제의 생성자는 1을 반환했지만 이 반환 값은 쓸모가 없으며 결과는 이전 예제와 정확히 동일합니다. 또 다른 결론을 내릴 수 있습니다.

생성자가 원래 값을 반환하면 반환 값은 의미가 없습니다.

객체가 반환되면 어떻게 되는지 살펴보겠습니다.

rrreee🎜위의 예를 통해 반환값이 객체일 경우 반환값이 정상적으로 반환되는 것을 알 수 있습니다. 우리는 다시 한 번 결론을 내렸습니다. 🎜

🎜생성자의 반환 값이 객체인 경우 반환 값은 정상적으로 사용됩니다. 🎜

🎜요약: 이 두 가지 예는 생성자가 값을 반환하지 않도록 노력해야 함을 알려줍니다. 원래 값을 반환하면 적용되지 않으므로 개체를 반환하면 new 연산자가 적용되지 않습니다. 🎜

new를 구현하려면🎜🎜먼저 new 연산자를 사용할 때 js가 수행하는 작업을 알아야 합니다. 🎜🎜🎜js는 내부적으로 생성됩니다. object🎜🎜이 개체는 생성자 프로토타입의 속성에 액세스할 수 있으므로 개체를 생성자에 연결해야 합니다🎜🎜생성자 내부의 이 개체는 새 개체에 할당됩니다(즉, 새 개체를 가리킵니다)🎜🎜Return 원래 값은 무시해야 하며 반환된 개체는 정상적으로 처리되어야 합니다🎜🎜🎜단계를 알고 나면 새 기능 구현을 시작할 수 있습니다.🎜rrreee🎜테스트 예는 다음과 같습니다.🎜rrreee🎜위 내용은 대략 JavaScript에서 new 연산자의 역할과 new 연산자를 구현하는 방법. 🎜🎜

위 내용은 새로운 객체를 생성할 때 js가 무엇을 하는지 아시나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!