【重温基础】instanceof运算符

jimhs 发布于2019-08-23 13:50 / 2755人阅读

摘要：需要测试的函数构造函数即用运算符来检测是否存在参数的原型链。区别只能用来判断对象函数和数组，不能用来判断字符串和数字等用于判断一个表达式的原始值，返回一个字符串。一般返回结果有函数数组，对象。

最近开始在整理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。

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,同上

注意：

a instanceof F 返回 true 以后，不一定永远都都返回为true，F.prototype属性的值有可能会改变。

原表达式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 对比

相同：
instanceof和typeof都能用来判断一个变量的类型。

区别：
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"

一般返回结果有：

number

boolean

string

function（函数）

object（NULL,数组，对象）

undefined。

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

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

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

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

5.参考资料

MDN instanceof

IBM instanceof

js中typeof和instanceof用法区别

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99643.html

【重温基础】15.JS对象介绍

摘要：构造函数通常首字母大写，用于区分普通函数。这种关系常被称为原型链，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。中所有的对象，都有一个属性，指向实例对象的构造函数原型由于是个非标准属性，因此只有和两个浏览器支持，标准方法是。从这篇文章开始，复习 MDN 中级教程的内容了，在初级教程中，我和大家分享了一些比较简单基础的知识点，并放在我的【Cute-JavaScript】系...

booster 2019-08-23 14:43 评论0 收藏0
【重温基础】5.表达式和运算符

摘要：系列目录复习资料资料整理个人整理重温基础语法和数据类型重温基础流程控制和错误处理重温基础循环和迭代重温基础函数本章节复习的是中的表达式和运算符，用好这些可以大大提高开发效率。本文是重温基础系列文章的第五篇。今日感受：家的意义。系列目录：【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理) 【重温基础】1.语法和数据类型【重温基础】2.流程控制和错误处理【重温基...

马忠志 2019-08-23 14:08 评论0 收藏0
【重温基础】12.使用对象

摘要：本文是重温基础系列文章的第十二篇。注意对象的名称，对大小写敏感。基础用法第一个参数是目标对象，后面参数都是源对象。用途遍历对象属性。用途将对象转为真正的结构。使用场景取出参数对象所有可遍历属性，拷贝到当前对象中。类似方法合并两个对象。本文是重温基础系列文章的第十二篇。今日感受：需要总结下2018。这几天，重重的感冒发烧，在家休息好几天，伤···。系列目录：【复习资料...

garfileo 2019-08-23 14:27 评论0 收藏0
重温JS基础--引用类型(三)

摘要：今天把接下来引用类型中的一些内容全部记录完毕基本包装类型为了便于操作基本类型值，还提供了种特殊的引用类型。这三种类型具有与各自的基本类型响应的特殊行为。重写后的返回对象表示的数值类型，另外两个方法则返回字符串形式的数值。今天把接下来引用类型中的一些内容全部记录完毕~ 基本包装类型为了便于操作基本类型值，JavaScript还提供了3种特殊的引用类型：Boolean, Number,...

kel 2019-08-21 16:46 评论0 收藏0
重温JS基础--继承

摘要：继承了如上，我们通过方法借调了超类的构造函数，实际上是在新创建的实力环境下调用了构造函数。组合继承组合继承的基本思想将原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。继承方法在上面这个例子中，构造函数定义了两个属性和。在ECMAScript中只支持实现继承，而且实现继承主要是依靠原型链来实现的。 1. 什么是原型链继承基本思想：利用原型让一个引用类型继承另一个...

sixleaves 2019-08-21 17:21 评论0 收藏0