|
最近问团队中小朋友，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大家注意下。
|