JavasScript -- instanceof

我觉得弄清楚 instanceof 运算符,在 JavaScript 中算一个比较费神的事情.

---

01

一开始,我以为 instanceof 运算符和 constructor 有关.

比如下面这个例子.

function Animal () { }
const animal = new Animal()
console.log(animal instanceof Animal) // true

之所以,这为 true.

是因为如果我们展开这段代码的原型链的话.

会是下面这张图.

image.png

主要核心是找到原型对象上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 运算符是如何工作的呢?

于是又画了一张图.

image.png

查看图中,两个红色的方块.

分别是 Animal 和 Cat

于是一个比较清晰的关于 instanceof 运算符的如何工作的想法在我脑海里呈现了.

一开始,我老是以为 instanceof 运算符和 constructor 有关.
虽然,这个想法很符合直觉,但实际上是错的.

后来我又想instanceof运算符和原型对象有关.
但始终不得其法,无法将它们和instanceof后来的表达式(Animal or Cat) 联系起来.

最后,我发现instanceof运算符应该是还是和原型对象相关.
但也不是直接的关系.
它会找到原型链上所有的原型对象 prototype
然后在[反向追溯],这个prototype是挂载到哪个构造器上的.

因为除了 new Object 原型链上的原型对象肯定不只有一个.
于是在多个原型对象[反向追溯]的构造器中.
如果有一个满足了 instanceof 后面的那个表达式
那么instanceof表达式就返回true.

所以得出的结论二:

instanceof 运算符是找到表达式左右边的对象继承的所有原型对象.

然后根据这些找到的原型对象[反向追溯]它们是挂载在哪个构造器上的.

只要有一个是 instanceof 右边的构造器,那么整个表达式就返回 true

关键词:

prototype对象 反向追溯 挂载它的 构造器

一张图

image.png

绿色的路径,就是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()

1. 先修改 Animal.prototype = { }, 并弃用自己原先的 prototype.
2. 接着 new Animal() ,这个实例对象的 __proto__ 就是 Animal 修改之后的 prototype -> Animal.prototype = { }
3. __proto__ 找到了 prototype ,prototype 反向追溯找到了 Animal
4. 所以,结果返回为true.

第二段代码: 先new Animal() 再修改 Animal.prototype

1. 先实例化对象 new Animal(),此时 animal.__proto__ 指向了 Animal.prototype -> 这是对象1
2. 接着修改 Animal.prototype = {},设置成一个新的对象. 这是对象2
3. 对象2和对象1 不是同一个对象.
4. 但是此时 animal.__proto__ 仍然是指向的 对象1
5. 由于对象1被 Animal.prototype={} 给替换掉了.
6. 所以此时的 对象1 并没有被挂载到 Animal 上.
7. animal.__proto__ -> 对象1 -> 对象1 没有被挂载到 Animal.prototype -> 对象1 -> 无法反向追溯到 -> Animal
8. 所以,这里返回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 自己构造的.

有一点鸡生蛋,蛋生鸡的感觉.