JavaScriptのinstanceof_javascriptスキルの内部機構の解析

例:

コードをコピー コードは次のとおりです:

// コード 1
function Pig( ) {}
var pig = new Pig();
alert(pig instanceof Pig) // => true

function FlyPig() {}
FlyPig .prototype = new Pig();
var flyPig = new FlyPig();
alert(flyPiginstanceof Pig); // => 別のコードを見てください。 :

コードをコピー コードは次のとおりです: // コード 2

関数Pig() { Pig.prototype = {/* いくつかのコード */} }

var pig = new Pig()
alert(pig instanceof Pig); // =>
上記の豚豚はなぜ豚ではなくなったのですか?
オブジェクトがクラスのインスタンスである場合、それはオブジェクトがクラスのメソッドとプロパティを持つことを意味します。 JavaScript では、ブタの特徴がプロトタイプに反映されます:

コードをコピー

コードは次のとおりです: // コード 3 function Pig() {} Pig.prototype = {

"豚の餌を食べる": function() {},

"寝る": function( ) {} ,
"长膘": function() {}
};
var pig();
alert(pig instanceof Pig); 🎜>

豚の特性が動的に変更され、豚が牛になる場合:

コードをコピーします

コードは次のとおりです: // コード 4 Pig.prototype = { "草を食べる": function() {}, "耕す": function () {}

};

var niu= new Pig();
alert(pig instanceof Pig); //=> ; true


Pig のプロトタイプが変更されていない場合、pig は依然として 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; // 5 行目
})() ;


2 行目で、o.__proto__ が Pig.prototype が指す値を指していることがわかります。ただし、4 行目では、Pig.prototype は新しい値を指しています。つまり、5 行目が返されると、 pig.__proto__ !== Pig.prototype になります。この変更により、コード 2 の pig が Pig ではなくなると推測できます。instanceof が pig を決定します。 Pig かどうかの基準は次のとおりです: 非表示の pig.__proto__ 属性が Pig.prototype と等しいかどうかを確認してください。

さらに確認するには、Firefox でのinstanceof の内部実装コードをシミュレートできます:

コードをコピーします


コードは次のとおりです:

/*** Gecko エンジンの下で、instanceof をシミュレートします。*/ 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 ("invalidinstanceof operand(" cls ")");
}

// バックトラック判定
var p = obj.__proto__, cp = cls.prototype;
while(p ) {
if(p === cp) return true;
p = p.__proto__;


テストページ：simulate-intanceof.html

最後に全員をテストします:




コードをコピーします


コードは次のとおりです:

function Bird() {}
varbird = new Bird();
var o = {}; __proto__ = o;

Bird.prototype = o; // true または false?