Analysis on the internal mechanism of JavaScript instanceof _javascript skills

Like what:

Copy Code code as follows:

Code 1
function Pig () {}
var pig = new Pig ();
Alert (pig instanceof Pig); => true

function Flypig () {}
Flypig.prototype = new Pig ();
var flypig = new Flypig ();
Alert (Flypig instanceof Pig); => true

Look at another piece of code:

Copy Code code as follows:

Code 2
function Pig () {Pig.prototype = {/* some code */}}
var pig = new Pig ();
Alert (pig instanceof Pig); => false

Why is the top pig pig no longer a pig pig?
When an object is an instance of a class, it means that the object has methods and properties of that class. In JavaScript, the characteristics of a pig are embodied in the prototype:

Copy Code code as follows:

Code 3
function Pig () {}
Pig.prototype = {
"Eat hogwash": function () {},
"Sleep": function () {},
' are fattening up ': function () {}
};
var pig = new Pig ();
Alert (pig instanceof Pig); => true

If the characteristics of the pig are changed dynamically, the pig becomes a cow:

Copy Code code as follows:

Code 4
Pig.prototype = {
"Grazing": function () {},
' Plow ': function () {}
};
var niu= new Pig ();
Alert (pig instanceof Pig); => false
Alert (Niu instanceof Pig); => true

When the prototype of Pig is not changed, pigs are pigs, so Pig in code 3 is an example of Pig. After changing the prototype, the pig is not a pig, but a cow in pigskin. So in code 4 pig is no longer an instance of pig, Niu is an example of pig.

Before further analysis, first review the internal mechanism of new. The new Pig () in code 2 is actually equivalent to:

Copy Code code as follows:

var pig = equivalent pseudo code for New Pig ():
var pig = (function () {
var o = {};
o.__proto__ = Pig.prototype; Line 2
Pig.call (o);
Pig.prototype = {/* some code */}; Line 4
return o; Line 5
})();

As you can see, at line 2 o'clock, o.__proto__ points to the value that Pig.prototype points to. But at line 4 o'clock, Pig.prototype points to the new value. In other words, when line 5 returns, pig.__proto__!== Pig.prototype. It is this change that causes the pig in code 2 not to be pig.

Can be boldly deduced: instanceof Judge Pig is not pig basis is: to see whether the hidden pig.__proto__ property is equal to Pig.prototype!

For further confirmation, we can simulate instanceof's internal implementation code under FIREFOX:

Copy Code code as follows:

/**
* Under Gecko engine, simulate instanceof
*/
function _instanceof (obj, CLS) {
The left operand of the instanceof must be a non-null object or a Function object
if ((typeof obj!== "Object" | | obj = = NULL)
&& typeof obj!== "function") {
return false;
}

The right operand of the instanceof must be a function object
if (typeof cls!== "function") {
throw new Error ("Invalid instanceof operand (" + CLS + ")");
}

Back up to judge
var p = obj.__proto__, CP = Cls.prototype;
while (p) {
if (p = = cp) return true;
p = p.__proto__;
}
return false;
}

Test page: simulate-intanceof.html

The final Test everyone:

Copy Code code as follows:

function Bird () {}
var Bird = new Bird ();
var o = {};
bird.__proto__ = o;
Bird.prototype = o;
Alert (bird instanceof bird);/True or false?