Heim > Web-Frontend > js-Tutorial > Einführung in den Unterschied zwischen „typeof' und „instanceof' in JavaScript (Codebeispiel)

Einführung in den Unterschied zwischen „typeof' und „instanceof' in JavaScript (Codebeispiel)

不言
Freigeben: 2019-02-25 10:25:19
nach vorne
2812 Leute haben es durchsucht

Dieser Artikel bietet Ihnen eine Einführung in den Unterschied zwischen „typeof“ und „instanceof“ in JavaScript. Ich hoffe, dass er für Freunde hilfreich ist.

Typeof und Instanzof werden in JavaScript häufig verwendet, um festzustellen, ob eine Variable leer ist oder welchen Typ sie hat. Aber es gibt immer noch Unterschiede zwischen ihnen:

typeof

typeof ist eine unäre Operation, die vor einem Operanden platziert wird, und der Operand kann von jedem beliebigen Typ sein.

Es wird eine Zeichenfolge zurückgegeben, die den Typ des Operanden beschreibt. (Der Operator „typeof“ gibt eine Zeichenfolge zurück, die zur Darstellung des Datentyps des Ausdrucks verwendet wird.)

typeof ist eigentlich eine Instanz zur Bestimmung des Typs des Parameters. Nur ein Parameter

typeof kann im Allgemeinen nur return Die folgenden Ergebnisse: „Zahl“, „Zeichenfolge“, „boolean“, „Objekt“, „Funktion“ und „undefiniert“.

Der Operand ist eine Zahl typeof(x) = "number"

String typeof(x) = "string"

Boolescher Wert typeof(x) = "boolean"

Objekt, Array und Null typeof(x) = "object"

Funktion 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
Nach dem Login kopieren

Wir können typeof verwenden, um zu ermitteln, ob eine Variable vorhanden ist existiert, wie zum Beispiel if(typeof a!="undefined"){alert("ok")}, verwenden Sie if(a) nicht, denn wenn a nicht existiert (nicht deklariert), tritt ein Fehler auf. Für spezielle Objekte wie Array und Null Die Verwendung von typeof gibt immer ein Objekt zurück. Dies ist die Einschränkung von typeof.

Arrays werden häufig in js verwendet, z. B. mehrere Eingaben mit demselben Namen. Wenn sie dynamisch generiert werden, müssen Sie beim Senden feststellen, ob es sich um Arrays handelt.

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

     或 `if( !isNaN(document.mylist.length) ) {}`
Nach dem Login kopieren

Der Operand von typeof ist keine Definition, der zurückgegebene Wert ist „undefiniert“.

In JavaScript werden Sie versuchen, den Typ einer Variablen mit dem Typeof-Operator zu bestimmen. Bei der Verwendung des Typeof-Operators tritt ein Problem bei der Verwendung von Referenzen auf Typen zum Speichern von Werten Unabhängig von der Referenz Egal um welchen Objekttyp es sich handelt, es wird „Objekt“ zurückgegeben. Dies erfordert, dass Instanzen erkennen, ob ein Objekt eine Instanz eines anderen Objekts ist.

instanceof

Der Instanzof-Operator wird verwendet, um zu testen, ob ein Objekt das Prototypattribut eines Konstruktors in seiner Prototypkette hat.

Syntax: Objektinstanz des Konstruktors
Parameter: Objekt (zu erkennendes Objekt) Konstruktor (ein Konstruktor)
Beschreibung: Der Operator „Instanz des Konstruktors“ wird verwendet, um zu erkennen, ob „constructor.prototype“ im Parameterobjekt vorhanden ist die Prototypenkette.

Instanz: Instanz, Beispiel

eine Instanz von b?alert("true"):alert("false"); //a ist eine Instanz von b? Wahr: Falsch

instanceof wird verwendet, um zu bestimmen, ob eine Variable eine Instanz eines Objekts ist,

如 :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
Nach dem Login kopieren

Fall:

另外,更重的一点是 `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
Nach dem Login kopieren
// 定义构造函数
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
Nach dem Login kopieren

Wenn es um „instanceof“ geht, müssen wir einfügen Noch eine Frage, nämlich die Funktion Argumente. Wir denken vielleicht alle, dass Argumente ein Array sind, aber wenn Sie zum Testen die Instanz von verwenden, werden Sie feststellen, dass Argumente kein Array-Objekt sind, auch wenn es ähnlich aussieht.

Außerdem:

Testen Sie var a=new Array();if (eine Instanz eines Objekts) Alert('Y');else Alert('N');

Habe 'Y'

aber wenn (Fensterinstanz des Objekts) Alert('Y');else Alert('N');

bekam 'N'

Also, Das hier von der Instanz von getestete Objekt bezieht sich auf das Objekt in der JS-Syntax, nicht auf das Dom-Modellobjekt.

Es gibt einige Unterschiede bei der Verwendung von typeof

alert(typeof(window)) will get object

Es sollte beachtet werden, dass, wenn der Ausdruck obj instanceof Foo true zurückgibt, Dies bedeutet nicht, dass der Ausdruck immer true zurückgibt, da sich der Wert des Foo.prototype-Attributs ändern kann und der geänderte Wert möglicherweise nicht in der Prototypenkette von obj vorhanden ist. In diesem Fall wird der Wert des ursprünglichen Ausdrucks zurückgegeben falsch werden. In einem anderen Fall ändert sich auch der Wert des ursprünglichen Ausdrucks, dh die Prototypkette des Objekts obj wird geändert. In der aktuellen ES-Spezifikation können wir zwar nur den Prototyp des Objekts lesen, ihn aber nicht ändern Mithilfe von nicht standardmäßigen __proto__-Magieeigenschaften sind erreichbar. Nach der Ausführung von obj.__proto__ = {} gibt die obj-Instanz von Foo beispielsweise false zurück.

Beispiel: Zeigen Sie, dass String-Objekte und Date-Objekte beide zum Objekttyp gehören.
Der folgende Code verwendet „instanceof“, um zu beweisen, dass String- und Date-Objekte ebenfalls zum Objekttyp gehören.

例子: 表明String对象和Date对象都属于Object类型

下面的代码使用了instanceof来证明:String和Date对象同时也属于Object类型。
var simpleStr = "This is a simple string"; 
var myString  = new String();
var newStr    = new String("String created with constructor");
var myDate    = new Date();
var myObj     = {};

simpleStr instanceof String; // returns false, 检查原型链会找到 undefined
myString  instanceof String; // returns true
newStr    instanceof String; // returns true
myString  instanceof Object; // returns true

myObj instanceof Object;    // returns true, despite an undefined prototype
({})  instanceof Object;    // returns true, 同上

myString instanceof Date;   // returns false

myDate instanceof Date;     // returns true
myDate instanceof Object;   // returns true
myDate instanceof String;   // returns false
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonEinführung in den Unterschied zwischen „typeof' und „instanceof' in JavaScript (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage