ECMAScript7 사양의 instanceof 연산자에 대한 자세한 설명(예제 포함)

이 글은 ECMAScript7 사양의 인스턴스 오브 연산자(예제 포함)에 대한 자세한 설명을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 글에서는 주로 ECMAScript7 사양의 instanceof 연산자를 설명합니다.

사전 지식

유명한 기호

"유명한" 기호는 기호 개체에 정의된 내장 기호를 말합니다. ECMAScript7은 이러한 내장 기호를 참조하기 위해 @@name 형식을 사용합니다. 예를 들어 아래에 언급된 @@hasInstance는 실제로 Symbol.hasInstance입니다.

InstanceofOperator(O, C)

O 인스턴스 of C는 내부적으로 InstanceofOperator(O, C) 추상 연산을 호출합니다. 이 추상 연산의 단계는 다음과 같습니다.

C의 데이터 유형이 객체가 아닌 경우 유형 오류 예외가 발생합니다.

instOfHandler를 GetMethod(C, @@hasInstance)와 같게 합니다. 대략적인 의미는 객체 C의 @@hasInstance 속성 값을 가져오는 것입니다.

instOfHandler의 값이 정의되지 않은 경우 그런 다음:

Return ToBoolean(? Call(instOfHandler, C, « O »)), 대략적인 의미는 instOfHandler(O)를 실행한 다음 호출 결과를 Boolean 유형으로 강제하고 반환하는 것입니다.

C를 호출할 수 없으면 유형 오류 예외를 발생시킵니다.

OrdinaryHasInstance(C, O)의 결과를 반환합니다.

OrdinaryHasInstance(C, O)

OrdinaryHasInstance(C, O) 추상 연산 단계는 다음과 같습니다.

C를 호출할 수 없으면 false를 반환합니다.

C에 내부 슬롯[[BoundTargetFunction]]이 있으면, 그런 다음:

BC를 C의 내부 슬롯 [[BoundTargetFunction]] 값과 동일하게 합니다.

InstanceofOperator(O, BC)의 결과를 반환합니다.

O 유형이 객체가 아닌 경우 false를 반환합니다. P는 Get(C, "prototype")과 같습니다. 대략적인 의미는 C.prototype의 값을 얻는 것입니다.

P의 데이터 유형이 객체가 아닌 경우 유형 오류 예외가 발생합니다.

다음 단계를 반복하세요.

O를 O와 같게 합니다.[[ GetPrototypeOf 결과의 대략적인 의미]]()는 O의 프로토타입 객체를 가져오는 것입니다.

O가 null과 같으면 false를 반환합니다( P, O)가 true이면 true를 반환합니다.

SameValue 추상 연산은 JavaScript의 ==, ===를 참조하고 Object.js()의 Object.is()는 이 추상 연산의 결과를 사용합니다.

위 2단계에서 볼 수 있듯이 C가 바인드 함수인 경우 C가 바인드한 대상 함수에서 InstanceofOperator(O, BC) 작업이 다시 실행됩니다.

위의 6단계에서 볼 수 있듯이 객체 O의 프로토타입 객체를 반복적으로 얻은 다음 프로토타입 객체와 C의 프로토타입 속성을 비교하여 같으면 true가 반환될 때까지 동일한지 확인합니다. O는 null이 됩니다. 즉, 전체 프로토타입 체인이 탐색됩니다. false를 반환합니다.

Function.prototype[@@hasInstance](V)

위 InstanceofOperator(O, C) 추상 작업의 2단계와 3단계에서 C가 @@ hasInstance 속성을 정의하거나 상속하면 호출된다는 것을 알 수 있습니다. 4단계와 5단계로 진행하지 않고 속성 값을 계산합니다. 4단계와 5단계의 목적은 @@hasInstance 메서드를 구현하지 않는 브라우저와 호환되도록 하는 것입니다. 함수가 @@hasInstance 속성을 정의하거나 상속하지 않으면 의미 체계의 기본 인스턴스가 사용됩니다. 이는 OrdinaryHasInstance(C, O) 추상 작업에 설명된 단계입니다.

ECMAScript7 사양에서 @@hasInstance 속성은 Function의 프로토타입 속성에 정의됩니다. Function.prototype[@@hasInstance](V)의 단계는 다음과 같습니다.

F를 이 값과 같게 하고

OrdinaryHasInstance(F, V)의 결과를 반환합니다.

따라서 기본적으로 instanceof의 의미가 동일하고 둘 다 OrdinaryHasInstance(F, V)의 결과를 반환한다는 것을 알 수 있습니다. 왜 기본적으로 말합니까? Function.prototype[@@hasInstance] 메소드를 재정의하여 instanceof의 동작을 사용자 정의할 수 있기 때문입니다.

예

function A () {}
function B () {}

var a = new A
a.__proto__ === A.prototype // true
a.__proto__.__proto__ === Object.prototype // true
a.__proto__.__proto__.__proto__ === null // true

a instanceof A // true
a instanceof B // false

OrdinaryHasInstance(C, O)의 6단계에서 볼 수 있습니다.

A 인스턴스의 경우 P는 A.prototype입니다. 첫 번째 루프에서 a의 프로토타입 객체 a._proto__는 A입니다. .prototype, 즉 단계의 O는 A.prototype이므로 true가 반환됩니다.

B 인스턴스의 경우 P는 B.prototype입니다. 첫 번째 루프에서 a의 프로토타입 개체 a._proto__는 A입니다. P와 같지 않은 프로토타입, 두 번째 루프를 실행합니다. 이때 O는 a.__proto__.__proto__입니다. 즉, P와 같지 않은 Object.prototype입니다. 이때 O는 a.__proto__.__proto__입니다. .__proto__ , 이는 null입니다. 즉, 프로토타입 체인이 순회되었으므로 false가 반환됩니다.

위 예를 계속 진행하세요.

A.prototype.__proto__ = B.prototype

a.__proto__ === A.prototype // true
a.__proto__.__proto__ === B.prototype // true
a.__proto__.__proto__.__proto__ === Object.prototype // true
a.__proto__.__proto__.__proto__.__proto__ === null // true

a instanceof B // true

위 예에서는 B.prototype을 a의 프로토타입 체인에 있는 링크로 설정하여 B 인스턴스가 OrdinaryHasInstance(C, O)의 6단계에 있도록 합니다. 두 번, true가 반환되었습니다.

OrdinaryHasInstance(C, O)의 두 번째 단계에서 바인드 함수의 동작이 일반 함수의 동작과 다르다는 것을 알 수 있습니다.

function A () {}
var B = A.bind()

B.prototype === undefined // true

var b = new B
b instanceof B // true
b instanceof A // true

위의 예에서 B.prototype이 정의되지 않았음을 알 수 있습니다. 따라서, 바인드 함수에 작용하는 인스턴스오브의 반환 결과는 실제로 바인드된 대상 함수에 작용하는 반환 값이며, 이는 기본적으로 바인드 함수와는 아무런 관련이 없습니다.

InstanceofOperator(O, C)의 2단계와 3단계에서 프로토타입의 @@hasInstance 메서드를 재정의하여 instanceof의 동작을 사용자 정의할 수 있습니다.

function A () {}
var a = new A
a instanceof A // true

A[Symbol.hasInstance] = function () { return false }
a instanceof A // ?

在chrome浏览器测试了一下，发现还是输出true。然后看了一下ECMAScript6的文档，
ECMAScript6文档里面还没有规定可以通过@@hasInstance改变instanceof的行为，所以应该是目前chrome浏览器还没有实现ECMAScript7中的instanceof操作符的行为。

总结

本文主要讲解ECMAScript7规范中的instanceof操作符，希望大家能有所收获。

위 내용은 ECMAScript7 사양의 instanceof 연산자에 대한 자세한 설명(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!