我觉得弄清楚 instanceof 运算符,在 JavaScript 中算一个比较费神的事情.
01
一开始,我以为 instanceof 运算符和 constructor 有关.
比如下面这个例子.
function Animal () { }
const animal = new Animal()
console.log(animal instanceof Animal) // true
之所以,这为 true.
是因为如果我们展开这段代码的原型链的话.
会是下面这张图.
主要核心是找到原型对象上prototype的constructor是否指向的是 instanceof 运算符后面的表达式.
因为这样很符合直觉.
我如果是你的实例话,那么你就是我的构造器.
02
为了验证, instanceof 运算符的确是 constructor 相关.
我于是又写了下列这段代码.
function Animal () { }
Animal.prototype = { name:'呵呵' } // prototype被设置成了一个空对象,压根就没有constructor属性了.
const animal = new Animal()
console.log(animal.__proto__.name) // 呵呵
console.log(animal.__proto__ === Animal.prototype) //true
console.log(animal instanceof Animal) // true
输出
animal.__proto__.name:呵呵
animal.__proto__ === Animal.prototype:true
animal instanceof Animal:true
发现即使我把原型对象改了,里面根本就没有一个constructor属性,就更不谈指向Animal这个构造函数了.
但是实际返回的仍然是 true
于是得出结论一
instanceof运算符和constructor没有一毛钱关系!!!!
instanceof运算符和constructor没有一毛钱关系!!!!
instanceof运算符和constructor没有一毛钱关系!!!!
03
为了弄清楚到底 instanceof 运算符是怎么工作的.
于是我又添加了下面这段代码.
function Cat () { }
Cat.prototype = new Animal()
const cat = new Cat()
console.log(`cat instanceof Cat:${cat instanceof Cat}`) // true
console.log(`cat instanceof Animal:${cat instanceof Animal}`) // true
在这里,我们把 Cat 的 prototype 指向了一个 new Animal() 的实例
原型继承链条是
Cat : new Animal() : Animal.prototype
相当于是,Cat 把自己的 protoype 弃用了.
转而使用 new Animal()
然后利用 new Animal() : Animal.prototype 把原型链连接起来.
输出结果
cat instanceof Cat:true
cat instanceof Animal:true
既然根据01我们已经知道了一条铁律
instanceof运算符和 prototype 的 constructor 无关.
但这里并没有排除和prototype无关
那么这里
-
cat instanceof Cat:true -
cat instanceof Animal:true
可否推测出来 instanceof 运算符是如何工作的呢?
于是又画了一张图.
查看图中,两个红色的方块.
分别是 Animal 和 Cat
于是一个比较清晰的关于 instanceof 运算符的如何工作的想法在我脑海里呈现了.
一开始,我老是以为 instanceof 运算符和 constructor 有关.
虽然,这个想法很符合直觉,但实际上是错的.
后来我又想instanceof运算符和原型对象有关.
但始终不得其法,无法将它们和instanceof后来的表达式(Animal or Cat) 联系起来.
最后,我发现instanceof运算符应该是还是和原型对象相关.
但也不是直接的关系.
它会找到原型链上所有的原型对象 prototype
然后在[反向追溯],这个prototype是挂载到哪个构造器上的.
因为除了
new Object原型链上的原型对象肯定不只有一个.
于是在多个原型对象[反向追溯]的构造器中.
如果有一个满足了 instanceof 后面的那个表达式
那么instanceof表达式就返回true.
所以得出的结论二:
instanceof 运算符是找到表达式左右边的对象继承的所有原型对象.
然后根据这些找到的原型对象[反向追溯]它们是挂载在哪个构造器上的.
只要有一个是 instanceof 右边的构造器,那么整个表达式就返回 true
关键词:
prototype对象反向追溯挂载它的构造器
一张图
绿色的路径,就是prototype对象继承的路径,也就是原型链.
红色路径,就是 instanceof 运算符的计算路径.(instanceof运算符必须借助原型链)
04
证明03得出的结论:
instanceof运算符是借助表达式左边的对象的原型链.
然后根据原型链上的所有原型对象,反向追溯挂载它们自己的构造器.
并根据返回的这个构造器来和表达式右边进行对比.
如果在里面就返回true.
不在里面就返回false.
考虑一个情况?
const animal = new Animal()
/// 用什么办法让下列表达式返回false????
animal instanceof Animal ===> false
代码片段一
function Animal () { }
Animal.prototype = { }
const animal = new Animal()
console.log(`animal instanceof Animal:${animal instanceof Animal}`) // true
console.log(`animal.__proto__ === Animal.prototype:${animal.__proto__ === Animal.prototype}`) // true
输出结果
animal instanceof Animal:true
animal.__proto__ === Animal.prototype:true
代码片段二
function Animal () { }
const animal = new Animal()
Animal.prototype = { }
console.log(`animal instanceof Animal:${animal instanceof Animal}`) // false
console.log(`animal.__proto__ === Animal.prototype:${animal instanceof Animal}`) // false
输出结果
animal instanceof Animal:false
animal.__proto__ === Animal.prototype:false
两段代码的唯一差异就在于:
第一段代码: 先修改 Animal.prototype 再修改 new Animal()
- 先修改
Animal.prototype = { }, 并弃用自己原先的prototype. - 接着
new Animal(),这个实例对象的__proto__就是Animal修改之后的prototype->Animal.prototype = { } -
__proto__找到了prototype,prototype反向追溯找到了Animal - 所以,结果返回为true.
第二段代码: 先new Animal() 再修改 Animal.prototype
- 先实例化对象
new Animal(),此时animal.__proto__指向了Animal.prototype-> 这是对象1 - 接着修改
Animal.prototype = {},设置成一个新的对象. 这是对象2 -
对象2和对象1不是同一个对象. - 但是此时
animal.__proto__仍然是指向的对象1 - 由于
对象1被Animal.prototype={}给替换掉了. - 所以此时的
对象1并没有被挂载到Animal上. -
animal.__proto__->对象1->对象1没有被挂载到Animal.prototype->对象1-> 无法反向追溯到 ->Animal - 所以,这里返回false
通过两段代码的分析:证明了03中对instanceof运算符工作机制的分析结果.
05
在一般情况下,我们使用instanceof运算符.
左右都会写一个实例对象.
obj instanceof Object
但是请不要忘记了,在 JavaScript 除了原始类型.
其他的都是对象.
Object , String ,Function ,Array ,Regex , Boolean , Number
这些构造函数本质上也是对象.
既然 instanceof 运算符,希望左边是一个对象.
而上面那样也是对象,所以可以改改以前的定势思维.
左边必须接一个实例化对象了.
利用上述推测出来的instanceof运算符工作机制.请看一下下面的代码:
请把这些构造函数当对象来看待
// Object是一个构造函数身份的对象
// 它是由 Function 构造的.
// Object.__proto__ === Function.prototype
// prototype 反向追溯到 Function
// 所以这里返回 true
console.log(Object instanceof Function) // true
同理,下面的返回都会是true
console.log(Number instanceof Function) // true
console.log(String instanceof Function) // true
console.log(Boolean instanceof Function) // true
console.log(Array instanceof Function) // true
console.log(RegExp instanceof Function) // true
console.log(Date instanceof Function) // true
我们已经知道了,
Object 作为一个函数是由 Function 来构造的.
console.log(Object instanceof Function) // true
Function.prototype.globalFn = function () {
console.log('呵呵')
}
Object.globalFn() // 呵呵.
那 Function 作为一个对象是被哪个构造器构造的呢?
console.log(Function.__proto__ === Function.prototype) // true
Function 是由 Function 自己构造的.
有一点鸡生蛋,蛋生鸡的感觉.