JS基础巩固系列：【4】instanceof的比较原理

js instanceof 的实现类比如下：

1
2
3
4
5
6
7
8
9
10
11
function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R.prototype;// 取 R 的显示原型
    L = L.__proto__;// 取 L 的隐式原型
    while (true) { 
        if (L === null) 
            return false; 
        if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
            return true; 
        L = L.__proto__; 
    } 
}

根据instanceof的比较逻辑，修改代码，使得cat instanceof Animal结果为true

原代码：

1
2
3
4
5
function Animal(){}

function Cat(){}
var cat = new Cat();
console.log(cat instanceof Animal);   //true

修改方案1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Animal(){}

function Cat(){
    this.__proto__ = new Animal();
}
var cat = new Cat();

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R.prototype;// 取 R 的显示原型
    L = L.__proto__;// 取 L 的隐式原型
    var i = 1;
    while (true) { 
        console.log(`第${i}次比较`, L, O)
        if (L === null) 
            return false; 
        if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
            return true; 
        L = L.__proto__; 
        i++;
    } 
}
console.log(cat instanceof Animal);   //true
//instance_of(cat, Animal)

这里执行了2次比较：

  • cat.__proto__和Animal.prototype，Animal的实例和Animal.prototype比较，不等于；
  • Animal的实例的__proto__ 和 Animal.prototype，相等；

修改方案2:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Animal(){}
function Cat(){}
Cat.prototype = new Animal();
var cat = new Cat();

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式
    var O = R.prototype;// 取 R 的显示原型
    L = L.__proto__;// 取 L 的隐式原型
    var i = 1;
    while (true) { 
        console.log(`第${i}次比较`, L, O)
        if (L === null) 
            return false; 
        if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true 
            return true; 
        L = L.__proto__; 
        i++;
    } 
}
console.log(cat instanceof Animal);   //true
//instance_of(cat, Animal)

这里执行了2次比较：

  • cat.__proto__和Animal.prototype，即Animal的实例和Animal.prototype比较，不等于；
  • Animal的实例的__proto__和Animal.prototype比较，相等；