神奇的instanceof

最新推荐文章于 2025-01-23 18:08:03 发布

原创最新推荐文章于 2025-01-23 18:08:03 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#原型链 #instanceof

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细解释了JavaScript中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大家注意下。