JavaScript의 new 연산자에 대한 자세한 설명-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-02-07 14:43:24

원래의

1684명이 탐색했습니다.

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 다음에 반환된 개체는 여전히 인스턴스화 후에도 개체라는 점에 유의하는 것이 중요합니다.