【重温基础】instanceof运算符

发布时间:2019-08-13 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了【重温基础】instanceof运算符脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

最近开始在整理ES6/es7/ES8/ES9的知识点(已经上传到 我的博客 上),碰到一些知识点是自己已经忘记(用得少的知识点),于是也重新复习了一遍。
这篇文章要复习的 instanceof 是我在整理过程中遇到的,那就整理下来吧,不然容易忘记。
要是哪里写得不妥,欢迎各位大佬指点。

1.定义

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。 —— MDN

简单理解为:instanceof可以检测一个实例是否属于某种类型。
比如:

function F (){
    // ...
}
let a = new F ();

a instanceof F;      // true
a instanceof Object; // true  后面介绍原因

还可以在继承关系中用来判断一个实例是否属于它的父类型。
比如:

function F (){};
function G (){};
function Q (){};
G.PRototyPE = new F();   // 继承
 
let a = new G(); 
a instanceof F;      // true
a instanceof G;      // true
a instanceof Q;      // false

2.使用方法

语法为: object instanceof constructor

    @H_428_126@ object : 需要测试的函数
  • constructor : 构造函数

即:用instanceof运算符来检测constructor.prototype 是否存在参数object的原型链。

function F (){};
function G (){};
let a = new F ();

a instanceof F;      // true  因为:Object.getPrototypeOf(a) === F.prototype
a instanceof Q;      // false 因为:F.prototype不在a的原型链上
a instanceof Object; // true  因为:Object.prototype.isPrototypeOf(a)返回true
F.prototype instanceof Object;  // true,同上

注意

  1. a instanceof F 返回 true 以后,不一定永远都都返回为trueF.prototype属性的值有可能会改变
  2. 原表达式a的值也会改变,比如 a.__proto__ = {}之后,a instanceof F就会返回false了。

检测对象是不是特定构造函数的实例:

// 正确
if (!(obj instanceof F)) {
  // ...
}

// 错误 因为
if (!obj instanceof F);  // 永远返回false  
// 因为 !obj 在instanceof之前被处理 , 即一直使用一个布尔值检测是否是F的实例

3.实现instanceof

/**
* 实现instanceof
* @param obj{Object} 需要测试的对象
* @param fun{Function} 构造函数
*/
function _instanceof(obj, fun) {
    let f = fun.prototype;   // 取B的显示原型
    obj = obj.__proto__;       // 取A的隐式原型
    while (true) {
        //Object.prototype.__proto__ === null
        if (obj === null)
            return false;
        if (f === obj)        // 这里重点:当 f 严格等于 obj 时,返回 true
            return true;
        obj = obj.__proto__;
    }
}

4.instanceof 与 typeof 对比

相同
instanceoftypeof都能用来判断一个变量的类型。

区别
instanceof 只能用来判断对象、函数和数组,不能用来判断字符串和数字等:

let a = {};
let b = function () {};
let c = [];
let d = 'hi';
let e = 123;

a instanceof Object;  // true
b instanceof Object;  // true
c instanceof Array;   // true
d instanceof String;  // false
e instanceof Number;  // false

typeof :用于判断一个表达式的原始值,返回一个字符串。

typeof 42;         // "number"
typeof 'blubber';  // "string"
typeof true;       // "boolean"
typeof aa;         // "undefined"

一般返回结果有:

判断变量是否存在
不能使用:

if(a){
    //变量存在
}
// Uncaught ReferenceError: a is not defined

原因是如果变量未定义,就会报未定义的错,而应该使用:

if(typeof a != 'undefined'){
    //变量存在
}

5.参考资料

  1. MDN instanceof
  2. IBM instanceof
  3. js中typeof和instanceof用法区别

欢迎关注微信公众号【前端自习课】每天早晨,与您一起学习一篇优秀的前端技博文 .

脚本宝典总结

以上是脚本宝典为你收集整理的【重温基础】instanceof运算符全部内容,希望文章能够帮你解决【重温基础】instanceof运算符所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。