最近问团队中小朋友,instanceof的作用是什么,他们就跟说说"某某是否是某某的实例",有的是说"某某是某某的构造函数",总之感觉没有说到点上。
下面我把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大家注意下。