【重溫基礎】instanceof運算符

jimhs 發布于2019-08-23 13:50 / 2554人閱讀

摘要：需要測試的函數構造函數即用運算符來檢測是否存在參數的原型鏈。區別只能用來判斷對象函數和數組，不能用來判斷字符串和數字等用于判斷一個表達式的原始值，返回一個字符串。一般返回結果有函數數組，對象。

最近開始在整理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用法區別

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優秀的前端技術博文 .

GPU云服務器云服務器 instanceof java instanceof instanceof用法 instanceof什么意思

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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