神奇的instanceof

最近问团队中小朋友，instanceof的作用是什么，他们就跟说说"某某是否是某某的实例",有的是说"某某是某某的构造函数"，总之感觉没有说到点上。

下面我把MDN官方的描述给出一下啊

instanceof - JavaScript | MDN

instanceof 运算符用于测试构造函数的 prototype 属性是否出现在对象原型链中的任何位置

说明什么，举例A instanceof B，

说白了，只要B变量的 prototype 在A变量的原型链上即可。因此，instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，如果查找失败，则会返回 false

下面参考源码

​
function instance_of(L, R) {
    var O = R.prototype; 
    L = L.__proto__;
    while (true) {    
        if (L === null)      
             return false;   
        if (O === L) 
             return true;   
        L = L.__proto__;  
    }
}

​

L表示对象实例，R表示构造函数或者父类型实例

取R的显式原型，取L的隐式原型

循环遍历，进行判断②中的两个值是否相等，相等返回true，不相等继续查找L的原型链

标准入门例子

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
const auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// expected output: true

console.log(auto instanceof Object);
// expected output: true

默认函数对象的原型都是Object，你可以理解为java的类的祖先都是java.util.Object一样

上面auto 的直接原型是Car，顶级祖先是Object。

下面进行了一轮修改

function Car(name){
    this.name = name;
}
//交通工具
function Trans(){
}

Trans.prototype = new Car()
const auto = new Trans()

console.log(auto instanceof Car);
// expected output: true
console.log(auto instanceof Trans);
// expected output: true
console.log(auto instanceof Object);
// expected output: true

我上面代码，Trans的默认原型是Object,但是我修改了他原型，使得Trans的原型指向了Car，

所以Tans的原型链上有三个，Trans->Car->Object,所以上面结果都是true。但是记住基础这个Oject是通过Car来指向的,

下面我再斗胆一下，我我修改一下Car的原型，看看是否再次变化。

function CarParent(){
}
function Car() { 
}
//交通工具
function Trans(){
}

Trans.prototype = new Car()
const auto0 = new Trans()
console.log(auto0 instanceof Car);
// expected output: true
console.log(auto0 instanceof CarParent); //false
// expected output: false
console.log(auto0 instanceof Trans);
// expected output: true
console.log(auto0 instanceof Object);
// expected output: true
console.log("修改car，并且手动让trans感知---------------")
//下面进行原型修改，将car的增加了原型修改，结果变了
Car.prototype = new CarParent()
// 这Trans的原型一定要再来一遍，如果只有上面不写这一个，那Car的指向变化，Trans感知不到，需要再次手动感知
//如果如果修改了某个对象的原型链，需要手动让在原使用他原型的地方手动再次指向，否则感知不到之前的原型变化
Trans.prototype = new Car()
const auto1 = new Trans()

console.log(auto1 instanceof Car);
// expected output: true
console.log(auto1 instanceof CarParent);//true le 
// expected output: true
console.log(auto1 instanceof Trans);
// expected output: true
console.log(auto1 instanceof Object);
// expected output: true

输出结果如：

> true
> false
> true
> true
> "修改car，并且手动让trans感知---------------"
> true
> true
> true
> true

auto1原型链上 依次是 Trans->Car->CarParent->Oject,,注意如果是中间部分插入修改，需要手动再次指向原来使用此原型的对象function的原型。

如果不手动指向则，感知不到

function CarParent(){
}
function Car() { 
}
//交通工具
function Trans(){
}

Trans.prototype = new Car()
const auto0 = new Trans()
console.log(auto0 instanceof Car);
// expected output: true
console.log(auto0 instanceof CarParent); //false
// expected output: false
console.log(auto0 instanceof Trans);
// expected output: true
console.log(auto0 instanceof Object);
// expected output: true
console.log("修改car，并且手动让trans感知---------------")
//下面进行原型修改，将car的增加了原型修改，结果变了
Car.prototype = new CarParent()
//Trans.prototype = new Car()// 这一定要再来一遍，如果只有上面不写这一个，那Car的指向变化，Trans感知不到，需要再次手动感知
const auto1 = new Trans()

console.log(auto1 instanceof Car);
// expected output: false
console.log(auto1 instanceof CarParent); 
// expected output: false
console.log(auto1 instanceof Trans);
// expected output: true
console.log(auto1 instanceof Object);
// expected output: true

结果不理想了：

> true
> false
> true
> true
> "修改car，并且手动让trans感知---------------"
> false
> false
> true
> true

auto1原型链上只拿到Trans和Object了，so大家注意下。