javascript instanceof_javascript 스킬의 내부 메커니즘 분석

예:

코드 복사 코드는 다음과 같습니다.

// 코드 1
function Pig( ) {}
var pig = new Pig();
alert(pig 인스턴스of Pig) // => true

function FlyPig() {}
FlyPig .prototype = new Pig();
var flyPig = new FlyPig();
alert(flyPig instanceof Pig); // => true

다른 코드 보기 :

코드 복사 코드는 다음과 같습니다.

// 코드 2
함수 Pig() { Pig.prototype = {/* 일부 코드 */} }
var pig = new Pig()
alert(pig instanceof Pig); // =>
위의 돼지돼지는 왜 더 이상 돼지가 아닌가?

객체가 클래스의 인스턴스라는 것은 객체가 클래스의 메서드와 속성을 가지고 있다는 의미입니다. 자바스크립트에서는 돼지의 특징이 프로토타입에 반영됩니다.

코드 복사 코드는 다음과 같습니다.

// 코드 3

function Pig() {}
Pig.prototype = {
"돼지 먹이 먹기": function() {},
"sleep": function( ) {} ,
"长膘": function() {}
}
var pig = new Pig()
alert(pig 인스턴스of Pig); 🎜>

돼지의 특성이 동적으로 변하여 돼지가 소로 변하는 경우:

코드 복사 코드는 다음과 같습니다. // 코드 4

Pig.prototype = {

"eating grass": function() {},
"ploughing": function () {}
};
var niu= new Pig()
alert(pig 인스턴스of Pig) //=> false
alert(niu 인스턴스of Pig); ; true


Pig의 프로토타입이 변경되지 않은 경우 돼지는 여전히 돼지이므로 코드 3의 pig는 Pig의 인스턴스입니다. 프로토타입을 변경한 후 돼지는 더 이상 돼지가 아니라 돼지 가죽을 입은 소입니다. 따라서 코드 4에서 pig는 더 이상 Pig의 인스턴스가 아니지만 niu는 Pig의 인스턴스입니다.

추가 분석에 앞서 new의 내부 메커니즘을 살펴보겠습니다. 코드 2의 new Pig()는 실제로 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. // var pig = new Pig()의 동등한 의사 코드:

var pig = (function() {

var o = {};
o.__proto__ = Pig.prototype; / / 2번째 줄
Pig.call(o);
Pig.prototype = {/* 일부 코드 */}; // 4번째 줄
return o; ;


두 번째 줄에서 o.__proto__가 Pig.prototype이 가리키는 값을 가리키는 것을 볼 수 있습니다. 그러나 4행에서 Pig.prototype은 새 값을 가리킵니다. 즉, 5행이 반환되면 pig.__proto__ !== Pig.prototype이 코드 2의 pig가 Pig가 아닌 것으로 추론할 수 있습니다. Pig인지 여부에 대한 기준은 다음과 같습니다. 숨겨진 pig.__proto__ 속성이 Pig.prototype과 동일한지 확인하세요!

추가 확인을 위해 Firefox에서 instanceof의 내부 구현 코드를 시뮬레이션할 수 있습니다.

코드 복사

코드는 다음과 같습니다. /*** Gecko 엔진에서 인스턴스 시뮬레이션 */ function _instanceof (obj, cls) {

// instanceof의 왼쪽 피연산자는 null이 아닌 객체이거나 함수 객체여야 합니다.

if((typeof obj !== "object" || obj === null)
&& typeof obj !== "function" ) {
return false
}

// instanceof의 오른쪽 피연산자는 함수 객체여야 합니다
if(typeof cls != = "function") {
throw new Error ("잘못된 피연산자 인스턴스(" cls ")");
}

// 역추적 판단
var p = obj.__proto__, cp = cls.prototype;
while(p ) {
if(p === cp) return true;
p = p.__proto__;
return false;


테스트 페이지 ：simulate-intanceof.html

마지막으로 모두 테스트:

코드 복사


코드는 다음과 같습니다.

function Bird() {} var Bird = new Bird() var o = {}; __proto__ = o; Bird.prototype = o; alert(bird 인스턴스of Bird);