JavaScript의 \'new\' 연산자는 내부적으로 어떻게 작동하며, 이 연산자를 사용하여 객체를 생성하는 데 관련된 주요 단계는 무엇입니까?

DDD
풀어 주다: 2024-10-28 16:49:30
원래의
609명이 탐색했습니다.

How does the

JavaScript에서 "new" 연산자의 내부 작동 이해

JavaScript의 수수께끼 측면 중 하나로 간주되는 "new" 연산자 객체 생성에서의 역할로 개발자들을 매료시켰습니다. 이 기사에서는 "new" 연산자의 복잡한 메커니즘을 살펴보고 대체 구현을 통해 그 본질을 드러냅니다.

"new" 연산자 뒤에 숨은 기능

"new" 연산자는 뒤에 오는 함수의 [[Construct]] 메서드를 내부적으로 호출합니다. 이 메소드는 객체 생성 프로세스에서 중추적인 역할을 합니다.

  1. 객체 초기화:

    • 원래 그대로의 기본 JavaScript 객체를 초기화합니다. .
  2. 프로토타입 연결:

    • 새로 생성된 객체의 내부 [[Prototype]] 속성 사이에 연결을 설정합니다. 및 함수의 프로토타입 속성.
    • 함수의 프로토타입 속성이 객체가 아닌 경우 대신 Object.prototype을 선택합니다.
  3. 함수 호출 :

    • 새로 생성된 객체를 "this" 값으로 활용하여 "new" 연산자와 관련된 함수가 실행됩니다.

반환 값 수수께끼

"new" 연산자의 결과는 호출된 함수의 반환 값에 따라 달라집니다.

  • 기본 반환 값: 함수가 원시값(예: 숫자, 문자열)을 반환하는 경우 내부에서 생성된 객체를 반환합니다.
  • 객체 반환 값: 함수가 객체를 반환하는 경우, 내부 개체는 삭제되고 반환된 개체가 우선적으로 적용됩니다.

대체 구현

"new" 연산자의 내부 작동을 이해하려면 다음을 수행하세요. 해당 동작을 모방하는 대체 구현 탐색:

<code class="javascript">function NEW(f) {
  var obj, ret, proto;

  proto = Object(f.prototype) === f.prototype ? f.prototype : Object.prototype;
  obj = Object.create(proto);
  ret = f.apply(obj, Array.prototype.slice.call(arguments, 1));

  if (Object(ret) === ret) {
    return ret;
  }
  return obj;
}</code>
로그인 후 복사

사용 예:

<code class="javascript">function Foo (arg) {
  this.prop = arg;
}

Foo.prototype.inherited = 'baz';

var obj = NEW(Foo, 'bar');

console.log(obj.prop);          // 'bar'
console.log(obj.inherited);     // 'baz'
console.log(obj instanceof Foo); // true</code>
로그인 후 복사

결론

통과 이 대체 구현을 통해 우리는 객체 생성 및 프로토타입 체인 설정에서 "새로운" 운영자의 중요한 역할에 대한 포괄적인 이해를 얻었습니다. 이 복잡한 메커니즘을 이해하면 개발자는 JavaScript의 객체 지향 프로그래밍 기능을 활용할 수 있습니다.

위 내용은 JavaScript의 \'new\' 연산자는 내부적으로 어떻게 작동하며, 이 연산자를 사용하여 객체를 생성하는 데 관련된 주요 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿