快捷導(dǎo)航

JS中instanceof的使用小結(jié)

更新時(shí)間：2026年03月05日 09:56:12 作者：發(fā)現(xiàn)一只大呆瓜

在JavaScript中,instanceof是判斷引用類型的重要工具,本文就來(lái)介紹一下JS中instanceof的使用小結(jié),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在 JavaScript 中，instanceof 是判斷引用類型的重要工具。它不像 typeof 那樣只能識(shí)別基礎(chǔ)類型，而是能夠深入“家譜”，判斷一個(gè)實(shí)例是否屬于某個(gè)構(gòu)造函數(shù)。本文將帶你通過(guò)手寫實(shí)現(xiàn)，徹底掌握其底層原理。

一、實(shí)現(xiàn)思路

instanceof 運(yùn)算符用于檢測(cè)構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在某個(gè)實(shí)例對(duì)象的原型鏈上。

1. 實(shí)現(xiàn)思路

類型檢查：首先確保左側(cè)是一個(gè)對(duì)象或函數(shù)（基礎(chǔ)類型直接返回 false）。
獲取原型：取得左側(cè)對(duì)象的原型 __proto__ 和右側(cè)構(gòu)造函數(shù)的原型 prototype。
循環(huán)遍歷：沿著左側(cè)的原型鏈不斷向上查找（__proto__ = __proto__.__proto__）。
結(jié)果判定：
- 如果查找到某個(gè)環(huán)節(jié)等于右側(cè)的 prototype，則返回 true。
- 如果查找到原型鏈的盡頭（null）仍未找到，則返回 false。

二、具體實(shí)現(xiàn)

  function myInstanceof(obj, func) {
    if (typeof obj !== 'object' && typeof obj !== 'function') {
      return false;
    }
    let proto = obj.__proto__;
    const prototype = func.prototype;
    while (proto !== prototype) {
      if (proto === null) {
        return false;
      }
      proto = proto.__proto__;
    }
    return true;
  }
  const date = new Date();
  console.log(myInstanceof(date, Object));    // true

  console.log(myInstanceof([1, 2], Array)); // true

到此這篇關(guān)于JS中instanceof的使用小結(jié)的文章就介紹到這了,更多相關(guān)JS instanceof內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

uniapp添加操作日志的方法(uniapp、日志、文件、html5+)
近期一直在寫微信小程序,有一個(gè)問(wèn)題一直沒(méi)有解決,就是在測(cè)試環(huán)境中調(diào)試代碼會(huì)打印很多日志,方便看到問(wèn)題所在,這篇文章主要給大家介紹了關(guān)于uniapp添加操作日志(uniapp、日志、文件、html5+)的相關(guān)資料,需要的朋友可以參考下
2023-11-11
js監(jiān)聽(tīng)F11觸發(fā)全屏事件簡(jiǎn)單代碼舉例
這篇文章主要給大家介紹了關(guān)于js監(jiān)聽(tīng)F11觸發(fā)全屏事件的相關(guān)資料,自己工作中遇到的一點(diǎn)點(diǎn)小問(wèn)題,記錄一下,希望也能對(duì)你們有幫助,需要的朋友可以參考下
2024-05-05
npm install報(bào)錯(cuò)無(wú)法創(chuàng)建packge.json文件的解決辦法
當(dāng)你在運(yùn)行 npm install 時(shí)遇到錯(cuò)誤,提示無(wú)法找到 package.json 文件,也沒(méi)有創(chuàng)建一個(gè) package.json 文件,只創(chuàng)建了一個(gè)package-lock.json文件,本文給大家介紹詳細(xì)的解決辦法,需要的朋友可以參考下
2024-02-02
將函數(shù)的實(shí)際參數(shù)轉(zhuǎn)換成數(shù)組的方法
實(shí)際參數(shù)在函數(shù)中我們可以使用 arguments 對(duì)象獲得（注：形參可通過(guò) arguments.callee 獲得），雖然 arguments 對(duì)象與數(shù)組形似，但仍不是真正意義上的數(shù)組。
2010-01-01
JS中雙擊和單擊事件沖突的解決方法
這篇文章主要為大家詳細(xì)介紹了JS中雙擊和單擊事件沖突的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-04-04
JS字符串處理實(shí)例代碼
這篇文章介紹了JS字符串處理實(shí)例代碼,有需要的朋友可以參考一下
2013-08-08
cookie在javascript中的使用技巧以及隱私在服務(wù)器端的設(shè)置
cookie在javascript中的使用技巧，需要的朋友可以參考下
2012-12-12
JavaScript裝飾器的實(shí)現(xiàn)原理詳解
最近在使用TS+Vue的開(kāi)發(fā)模式，發(fā)現(xiàn)項(xiàng)目中大量使用了裝飾器，看得我手足無(wú)措，今天特意研究一下實(shí)現(xiàn)原理，方便自己理解這塊知識(shí)點(diǎn)，有需要的小伙伴也可以參考一下
2022-10-10
return false,對(duì)阻止事件默認(rèn)動(dòng)作的一些測(cè)試代碼
很明顯我們每個(gè)函數(shù)都返回false,如果返回值可以阻止事件默認(rèn)動(dòng)作，那么文本框?qū)o(wú)法輸入任何內(nèi)容。看下面我測(cè)試的結(jié)果，注意紅的部分。
2010-11-11
前端（JavaScript|Vue|React）如何實(shí)現(xiàn)流式輸出Streaming
本文詳細(xì)介紹了前端流式輸出的實(shí)現(xiàn)方法,包括核心原理、原生JavaScript實(shí)現(xiàn)、主流框架支持、高級(jí)優(yōu)化策略及實(shí)際應(yīng)用案例,流式輸出通過(guò)分塊傳輸數(shù)據(jù),提升用戶體驗(yàn),優(yōu)化資源利用,并提供了多種調(diào)試工具和注意事項(xiàng)
2026-01-01