JavaScript의 new 연산자에 대한 자세한 설명

小云云
풀어 주다: 2018-02-07 14:43:24
원래의
1672명이 탐색했습니다.

JavaScript에서 개체를 인스턴스화할 때 일반적인 방법은 new 연산자를 사용하는 것입니다. 이 글은 여러분에게 도움이 되기를 바라며 주로 JavaScript의 새로운 연산자에 대한 자세한 설명을 공유합니다.

var Foo = function(x, y) {    this.x = x    this.y = y
}var foo = new Foo(1, 2) // Foo {x: 1, y: 2}
로그인 후 복사

그럼 새 오퍼레이터는 정확히 무슨 일을 하는 걸까요? foo 객체가 어떤 객체인지 살펴보겠습니다.

우선 foo 자체는 객체이고 x와 y라는 두 가지 속성을 갖습니다. 동시에 대부분의 브라우저 콘솔에서는 __proto__라는 약간 더 가벼운 속성도 볼 수 있습니다. 여기에는 생성자와 __proto__라는 두 가지 속성이 있습니다.

__proto__는 접근자 속성입니다. 이는 현재 객체 자체의 [[Prototype]]을 가리킵니다. 이 [[Prototype]]은 단지 생성자 Foo의 프로토타입 객체 Foo.prototype을 나타내는 기호일 뿐입니다. MDN 설명은 에 있습니다.

foo.__proto__ === Foo.prototype // true
로그인 후 복사
我们, 그래서 우리는 일반적으로

var Foo = function(x, y) {    this.x = x    this.y = y
}// 1. 创建一个空对象var foo = {}// 2. 调用构造函数,并且将构造函数的`this`指向fooFoo.call(foo, 1, 2)// 3. foo继承Foo的原型对象foo.__proto__ = Foo.prototype
로그인 후 복사
E 등을 기술합니다. 비록 마지막 FOO를 위의 New FOO()의 객체와 동일하게 작성하지만 상황은 그것만이 아닙니다.

new 연산자가 함수를 작동한다는 것을 알고 있습니다. 위의 예에서 Foo 함수는 명시적으로 값을 반환하지 않으므로 이 함수를 실행한 후에는 반환 값이 정의되지 않습니다. 생성자가 명시적으로 값을 반환하지 않는 경우 새 작업을 수행한 후 생성자가 인스턴스화한 개체가 반환됩니다.

특정 값을 반환하면 어떻게 되나요?

           

var Foo = function(x, y) {    this.x = x    this.y = y    return {        a: this.x
    }
}var foo = new Foo(1, 2) // {a: 1}
로그인 후 복사
foo는 이 함수를 실행한 후의 반환 값이므로 이때는 new Foo()와 Foo() 사이에 차이가 없으므로 일반적으로 생성자에서 특정 값을 반환하도록 선택하지 않습니다.

생성자에서 개체가 아닌 숫자 또는 문자열 값과 같은 일반 값을 반환하는 경우 new 다음에 반환된 개체는 여전히 인스턴스화 후에도 개체라는 점에 유의하는 것이 중요합니다.

관련 권장 사항:

js 함수의 새 호출과 일반 호출의 차이점

BUG에서 시작하는 new 정보

js에서 new 연산자의 실행 프로세스는 무엇입니까

위 내용은 JavaScript의 new 연산자에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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