ホームページ ウェブフロントエンド jsチュートリアル JavaScriptのtypeofとinstanceofの違いの紹介(コード例)

JavaScriptのtypeofとinstanceofの違いの紹介(コード例)

Feb 25, 2019 am 10:25 AM
javascript 原理

この記事では、JavaScript の typeof と instanceof の違いについて説明します (コード例)。必要な方は参考にしていただければ幸いです。

JavaScript の typeof と instanceof は、変数が空かどうか、またはその型を判断するためによく使用されます。しかし、それらの間にはまだ違いがあります。

typeof

typeof は単項演算であり、オペランドの前に置かれ、オペランドは任意の型にすることができます。

戻り値は、オペランドの型を説明する文字列です。 (typeof 演算子は、式のデータ型を表すために使用される文字列を返します。)

typeof は、実際には、1 つのパラメーターについて、パラメーターの型を決定するインスタンスです。次の結果のみを返します:「数値」、「文字列」、「ブール値」、「オブジェクト」、「関数」、および「未定義」。

オペランドは数値です typeof(x) = "number"

文字列 typeof(x) = "string"

ブール値 typeof(x) = "boolean"

オブジェクト、配列、null typeof(x) = "object"

Function typeof(x) = "function"

console.log(typeof (123));//typeof(123)返回"number" 
console.log(typeof ("123"));//typeof("123")返回"string"
var param1 = "string";
var param2 = new Object();
var param3 = 10;
console.log(typeof(param1)+"\n"+typeof(param2)+"\n"+typeof(param3)); 
     // string object  number
ログイン後にコピー

typeof を使用して変数かどうかを取得できます。 a が存在しない (宣言されていない) 場合、エラーが発生するため、if(typeof a!="unknown"){alert("ok")} などの特殊なオブジェクトが存在する場合は、if(a) を使用しないでください。配列と Null typeof を使用すると、常にオブジェクトが返されます。これは typeof の制限です。

配列は、同じ名前の複数の入力など、js でよく使用されます。配列が動的に生成される場合は、送信時にそれらが配列であるかどうかを判断する必要があります。

    if(document.mylist.length != "undefined" ) {} //这个用法有误.
    正确的是 `if( typeof(document.mylist.length) != "undefined" ) {}` 

     或 `if( !isNaN(document.mylist.length) ) {}`
ログイン後にコピー

typeof のオペランド。は定義ではないため、戻り値は「未定義」になります。

JavaScript では、typeof 演算子を使用して変数の型を決定します。typeof 演算子を使用する場合、参照型を使用するときに問題が発生します。参照に関係なく、値を格納します。オブジェクトの種類に関係なく、「object」を返します。これには、オブジェクトが別のオブジェクトのインスタンスであるかどうかを検出するために、instanceof が必要です。

instanceof

instanceof 演算子は、オブジェクトのプロトタイプ チェーンにコンストラクターのプロトタイプ属性があるかどうかをテストするために使用されます。

構文: objectinstanceofconstructor

パラメータ: object (検出対象のオブジェクト)constructor (コンストラクター)

説明:instanceof 演算子は、constructor.prototype がパラメータ オブジェクトに存在するかどうかを検出するために使用されます。プロトタイプチェーン。

instance: インスタンス、example

ainstanceof b?alert("true"):alert("false"); //a は b のインスタンスです? True: False

instanceof は、変数がオブジェクトのインスタンスであるかどうかを判断するために使用されます。

如 :var a=new Array();

alert(a instanceof Array); // true,

同时 alert(a instanceof Object) //也会返回 true;

这是因为 Array 是 object 的子类。



再如:function test(){};

var a=new test();

alert(a instanceof test) 会返回true

alert(a==b);  //flase
ログイン後にコピー

Case:

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

例如:

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
ログイン後にコピー
// 定义构造函数
function C(){} 
function D(){} 

var o = new C();

// true,因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false,因为 D.prototype不在o的原型链上
o instanceof D; 

o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.

D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true
ログイン後にコピー

instanceof について言えば、もう 1 つの質問を挿入する必要があります。これは関数 Arguments であり、引数は Array であると誰もが考えるかもしれませんが、instanceof を使用してテストすると、見た目は非常に似ていますが、arguments は Array オブジェクトではないことがわかります。

Also:

Test var a=new Array();if (オブジェクトのインスタンス)alert('Y');elsealert('N');

'Y'を取得しました

しかし、 if (オブジェクトのウィンドウインスタンス)alert('Y');elsealert('N');

got 'N'

つまり、ここで、instanceof によってテストされるオブジェクトは、dom モデル オブジェクトではなく、js 構文のオブジェクトを指します。

typeof

alert(typeof(window)) を使用すると object が取得されるため、いくつかの違いがあります。

式 obj instanceof Foo が true を返す場合、これは、Foo.prototype 属性の値が変更される可能性があり、変更された値が obj のプロトタイプ チェーンに存在しない可能性があるため、式が常に true を返すことを意味します。この場合、元の式の値が返されます。偽になる。別のケースでは、元の式の値も変更されます。つまり、オブジェクト obj のプロトタイプ チェーンが変更されます。ただし、現在の ES 仕様では、オブジェクトのプロトタイプを読み取ることはできますが、変更することはできません。非標準の __proto__ マジック プロパティの助けを借りて実現できます。たとえば、obj.__proto__ = {} を実行すると、obj instanceof Foo は false を返します。

例: String オブジェクトと Date オブジェクトがどちらも Object 型に属することを示す

次のコードでは、instanceof を使用して次のことを証明します。 String オブジェクトと Date オブジェクトも Object 型に属します。

rreeee

以上がJavaScriptのtypeofとinstanceofの違いの紹介(コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

nohupの機能と原理の解析 nohupの機能と原理の解析 Mar 25, 2024 pm 03:24 PM

nohup の役割と原理の分析 Unix および Unix 系オペレーティング システムでは、nohup はバックグラウンドでコマンドを実行するためによく使用されるコマンドです。ユーザーが現在のセッションを終了したり、ターミナル ウィンドウを閉じたりしても、コマンドはまだ実行され続けています。この記事では、nohup コマンドの機能と原理を詳しく分析します。 1. nohup の役割: バックグラウンドでのコマンドの実行: nohup コマンドを使用すると、ターミナル セッションを終了するユーザーの影響を受けることなく、長時間実行されるコマンドをバックグラウンドで実行し続けることができます。これは実行する必要があります

Struts フレームワークの原則と実践についての深い議論 Struts フレームワークの原則と実践についての深い議論 Feb 18, 2024 pm 06:10 PM

Struts フレームワークの原理分析と実践的な調査 JavaWeb 開発で一般的に使用される MVC フレームワークとして、Struts フレームワークは優れた設計パターンとスケーラビリティを備えており、エンタープライズ レベルのアプリケーション開発で広く使用されています。この記事では、Struts フレームワークの原理を分析し、読者がフレームワークをよりよく理解して適用できるように、実際のコード例を使用してそれを検討します。 1. Struts フレームワークの原理の分析 1. MVC アーキテクチャ Struts フレームワークは MVC (Model-View-Con) に基づいています。

MyBatis のバッチ挿入実装原理の深い理解 MyBatis のバッチ挿入実装原理の深い理解 Feb 21, 2024 pm 04:42 PM

MyBatis は、さまざまな Java プロジェクトで広く使用されている人気のある Java 永続層フレームワークです。その中でも、バッチ挿入は、データベース操作のパフォーマンスを効果的に向上させることができる一般的な操作です。この記事では、MyBatis でのバッチ挿入の実装原理を深く調査し、特定のコード例を使用して詳細に分析します。 MyBatis でのバッチ挿入 MyBatis では、通常、バッチ挿入操作は動的 SQL を使用して実装されます。複数の挿入値を含む S を構築することによって

MyBatis ページングプラグインの原理の詳細な説明 MyBatis ページングプラグインの原理の詳細な説明 Feb 22, 2024 pm 03:42 PM

MyBatis は優れた永続層フレームワークであり、XML とアノテーションに基づいたデータベース操作をサポートし、シンプルで使いやすく、豊富なプラグイン メカニズムも提供します。その中でも、ページング プラグインは、よく使用されるプラグインの 1 つです。この記事では、MyBatis ページング プラグインの原理を詳しく説明し、具体的なコード例で説明します。 1. ページング プラグインの原理 MyBatis 自体はネイティブ ページング機能を提供しませんが、プラグインを使用してページング クエリを実装できます。ページング プラグインの原理は主に MyBatis を傍受することです

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

Linux RPM ツールの機能と原理についての詳細な説明 Linux RPM ツールの機能と原理についての詳細な説明 Feb 23, 2024 pm 03:00 PM

Linux システムの RPM (RedHatPackageManager) ツールは、システム ソフトウェア パッケージのインストール、アップグレード、アンインストール、管理を行うための強力なツールです。これは RedHatLinux システムで一般的に使用されるソフトウェア パッケージ管理ツールであり、他の多くの Linux ディストリビューションでも使用されます。 RPM ツールの役割は非常に重要で、システム管理者とユーザーがシステム上のソフトウェア パッケージを簡単に管理できるようになります。 RPM を通じて、ユーザーは新しいソフトウェア パッケージを簡単にインストールし、既存のソフトウェアをアップグレードできます。

Linuxのchageコマンドの機能と動作原理の詳細な分析 Linuxのchageコマンドの機能と動作原理の詳細な分析 Feb 24, 2024 pm 03:48 PM

Linuxシステムのchageコマンドは、ユーザーアカウントのパスワード有効期限を変更するコマンドであり、アカウントの最長使用日と最短使用可能日を変更することもできます。このコマンドはユーザー アカウントのセキュリティ管理において非常に重要な役割を果たし、ユーザー パスワードの使用期間を効果的に制御し、システムのセキュリティを強化します。 CHAGE コマンドの使用方法: CHAGE コマンドの基本構文は次のとおりです: chage [オプション] ユーザー名 たとえば、ユーザー「testuser」のパスワードの有効期限を変更するには、次のコマンドを使用できます。

Astar ステーキングの原則、収入の解体、エアドロップ プロジェクトと戦略、および運営のナニー レベルの戦略 Astar ステーキングの原則、収入の解体、エアドロップ プロジェクトと戦略、および運営のナニー レベルの戦略 Jun 25, 2024 pm 07:09 PM

目次 Astar Dapp ステーキングの原則 ステーキング収益 潜在的なエアドロップ プロジェクトの解体: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap ステーキング戦略と運用 「AstarDapp ステーキング」は今年初めに V3 バージョンにアップグレードされ、ステーキング収益に多くの調整が加えられましたルール。現在、最初のステーキング サイクルが終了し、2 番目のステーキング サイクルの「投票」サブサイクルが始まったばかりです。 「追加報酬」特典を獲得するには、この重要な段階を把握する必要があります (6 月 26 日まで続く予定で、残りは 5 日未満です)。 Astarステーキング収入を詳しく説明します。

See all articles