前端每日一问--谈谈instance的原理

instanceof

平时在工作和学习中,我们使用instanceof的频率不是很高,相比之下使用typeof的频率可能还要高不少

typeof:typeof 运算符返回一个用来表示表达式的数据类型的字符串。通常typeof返回的如下结果:"number"、"string"、"boolean"、"object"、"function" 和 "undefined"。null和对象typeof都会返回"object"。所以在判断某个数据类型是否是对象typeof就会有点吃力。

与typeof 方法不同的是,instanceof 方法要求开发者明确地确认对象为某特定类型。例如:

var strObj = new String('hello world')
console.log(strObj instanceof String) // true
复制代码

这段代码就是判断变量strObj是否为String对象的实例。通常使用instanceof 就是判断一个实例是否属于某种类型,

// 判断 foo 是否是 Foo 类的实例
function Foo(){} 
var foo = new Foo(); 
console.log(foo instanceof Foo)//true
复制代码

另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。例如:

// 判断 foo 是否是 Foo 类的实例 , 并且是否是其父类型的实例
function Aoo(){} 
function Foo(){} 
Foo.prototype = new Aoo();//JavaScript 原型继承
 
var foo = new Foo(); 
console.log(foo instanceof Foo)//true 
console.log(foo instanceof Aoo)//true
复制代码

咋一看instanceof其实还挺简单的,那来看看下面几个例子:

console.log(Object instanceof Object);//true 
console.log(Function instanceof Function);//true 
console.log(Number instanceof Number);//false 
console.log(String instanceof String);//false 
 
console.log(Function instanceof Object);//true 
console.log(Foo instanceof Function);//true 
console.log(Foo instanceof Foo);//false
复制代码

看了上面的代码是不是又晕头转向了?为什么 Object 和 Function instanceof 自己等于 true,而其他类 instanceof 自己却又不等于 true 呢?如何解释?要想从原理上了解 instanceof 的奥秘。

剖析instanceof原理,其内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。直接看instanceof的代码实现:

function instance_of(L, R) {//L 表示左表达式,R 表示右表达式
 var O = R.prototype;// 取 R 的显示原型
 L = L.__proto__;// 取 L 的隐式原型
 while (true) { 
   if (L === null) 
     return false; 
   if (O === L)// 这里重点:当 O 严格等于 L 时,返回 true 
     return true; 
   L = L.__proto__; 
 } 
}
复制代码

推演Object instanceof Object

// 为了方便表述,首先区分左侧表达式和右侧表达式
ObjectL = Object, ObjectR = Object; 
// 下面根据规范逐步推演
O = ObjectR.prototype = Object.prototype 
L = ObjectL.__proto__ = Function.prototype 
// 第一次判断
O != L 
// 循环查找 L 是否还有 __proto__ 
L = Function.prototype.__proto__ = Object.prototype 
// 第二次判断
O == L 
// 返回 true
复制代码

知道Object instanceof Object为true,其他的也就不难理解了。

猜你喜欢

转载自juejin.im/post/5be43eaa5188256ccc192cab