Kata instanceofkunci dalam JavaScript bisa sangat membingungkan ketika pertama kali ditemukan, karena orang cenderung berpikir bahwa JavaScript bukan bahasa pemrograman berorientasi objek.

• Apa itu?
• Masalah apa yang dipecahkan?
• Kapan itu tepat dan kapan tidak?

contoh

Operan Sisi Tangan Kiri (LHS) adalah objek aktual yang sedang diuji ke operan Sisi Tangan Kanan (RHS) yang merupakan konstruktor aktual dari suatu kelas. Definisi dasarnya adalah:

Checks the current object and returns true if the object
is of the specified object type.

Berikut adalah beberapa contoh bagus dan berikut adalah contoh yang diambil langsung dari situs pengembang Mozilla :

var color1 = new String("green");
color1 instanceof String; // returns true
var color2 = "coral"; //no type specified
color2 instanceof String; // returns false (color2 is not a String object)

Satu hal yang layak disebutkan adalah nilai instanceoftrue jika objek mewarisi dari prototipe kelas:

var p = new Person("Jon");
p instanceof Person

Itu p instanceof Personbenar karena pmewarisi dari Person.prototype.

Sesuai permintaan OP

Saya telah menambahkan contoh kecil dengan beberapa kode sampel dan penjelasan.

Ketika Anda mendeklarasikan variabel, Anda memberinya jenis tertentu.

Misalnya:

int i;
float f;
Customer c;

Di atas menunjukkan beberapa variabel, yaitu i, f, dan c. Jenisnya adalah integer, floatdan Customertipe data yang ditentukan pengguna . Jenis seperti di atas bisa untuk bahasa apa saja, bukan hanya JavaScript. Namun, dengan JavaScript saat Anda mendeklarasikan variabel yang tidak Anda tentukan jenisnya secara eksplisit var x,, x bisa berupa angka / string / tipe data yang ditentukan pengguna. Jadi apa yang instanceofdilakukannya adalah memeriksa objek untuk melihat apakah itu dari tipe yang ditentukan sehingga dari atas mengambil Customerobjek yang bisa kita lakukan:

var c = new Customer();
c instanceof Customer; //Returns true as c is just a customer
c instanceof String; //Returns false as c is not a string, it's a customer silly!

Di atas kita telah melihat yang cdideklarasikan dengan tipe Customer. Kami sudah baru dan memeriksa apakah itu tipe Customeratau tidak. Tentu, itu mengembalikan benar. Kemudian masih menggunakan Customerobjek yang kita periksa apakah itu a String. Tidak, jelas bukan Stringkita yang baru saja meluncurkan Customerobjek, bukan Stringobjek. Dalam hal ini, ia mengembalikan false.

Sesederhana itu!

Ada sisi penting dari contoh yang tampaknya tidak tercakup dalam salah satu komentar sejauh ini: warisan. Variabel yang sedang dievaluasi dengan menggunakan instanceof dapat mengembalikan true untuk beberapa "jenis" karena pewarisan prototypal.

Misalnya, mari kita tentukan jenis dan subtipe:

function Foo(){ //a Foo constructor
    //assign some props
    return this;
}

function SubFoo(){ //a SubFoo constructor
    Foo.call( this ); //inherit static props
    //assign some new props
    return this;
}

SubFoo.prototype = Object.create(Foo.prototype); // Inherit prototype
SubFoo.prototype.constructor = SubFoo;

Sekarang kita memiliki beberapa "kelas" yang memungkinkan kita membuat beberapa instance, dan mencari tahu apa yang mereka contoh:

var 
    foo = new Foo()
,   subfoo = new SubFoo()
;

alert( 
    "Q: Is foo an instance of Foo? "
+   "A: " + ( foo instanceof Foo ) 
); // -> true

alert( 
    "Q: Is foo an instance of SubFoo? " 
+   "A: " + ( foo instanceof SubFoo ) 
); // -> false

alert( 
    "Q: Is subfoo an instance of Foo? "
+   "A: " + ( subfoo instanceof Foo ) 
); // -> true

alert( 
    "Q: Is subfoo an instance of SubFoo? "
+   "A: " + ( subfoo instanceof SubFoo ) 
); // -> true

alert( 
    "Q: Is subfoo an instance of Object? "
+   "A: " + ( subfoo instanceof Object ) 
); // -> true

Lihat baris terakhir itu? Semua panggilan "baru" ke fungsi mengembalikan objek yang diwarisi dari Objek. Ini berlaku bahkan ketika menggunakan singkatan pembuatan objek:

alert( 
    "Q: Is {} an instance of Object? "
+   "A: " + ( {} instanceof Object ) 
); // -> true

Dan bagaimana dengan definisi "kelas" itu sendiri? Apa contohnya?

alert( 
    "Q: Is Foo an instance of Object? "
+   "A:" + ( Foo instanceof Object) 
); // -> true

alert( 
    "Q: Is Foo an instance of Function? "
+   "A:" + ( Foo instanceof Function) 
); // -> true

Saya merasa bahwa memahami bahwa objek apa pun dapat menjadi turunan dari jenis GANDA adalah penting, karena Anda saya (salah) menganggap bahwa Anda dapat membedakan antara, katakan dan objek dan fungsi dengan menggunakan instanceof. Seperti contoh terakhir ini jelas menunjukkan fungsi adalah objek.

Ini juga penting jika Anda menggunakan pola pewarisan apa pun dan ingin mengonfirmasi keturunan objek dengan metode selain mengetik bebek.

Semoga itu bisa membantu siapa pun menjelajah instanceof .

Jawaban lain di sini benar, tetapi mereka tidak masuk ke dalam bagaimana instanceofsebenarnya bekerja, yang mungkin menarik bagi beberapa pengacara bahasa di luar sana.

Setiap objek dalam JavaScript memiliki prototipe, yang dapat diakses melalui __proto__properti. Fungsi juga memiliki prototypeproperti, yang merupakan inisial __proto__untuk objek apa pun yang dibuat olehnya. Ketika suatu fungsi dibuat, itu diberikan objek unik untuk prototype. The instanceofOperator menggunakan keunikan ini untuk memberikan jawaban. Inilah yang instanceofmungkin terlihat jika Anda menulisnya sebagai fungsi.

function instance_of(V, F) {
  var O = F.prototype;
  V = V.__proto__;
  while (true) {
    if (V === null)
      return false;
    if (O === V)
      return true;
    V = V.__proto__;
  }
}

Ini pada dasarnya memparafrasekan ECMA-262 edisi 5.1 (juga dikenal sebagai ES5), bagian 15.3.5.3.

Perhatikan bahwa Anda dapat menetapkan ulang objek apa pun ke properti fungsi prototype, dan Anda dapat menetapkan ulang __proto__properti objek setelah dibangun. Ini akan memberi Anda beberapa hasil menarik:

function F() { }
function G() { }
var p = {};
F.prototype = p;
G.prototype = p;
var f = new F();
var g = new G();

f instanceof F;   // returns true
f instanceof G;   // returns true
g instanceof F;   // returns true
g instanceof G;   // returns true

F.prototype = {};
f instanceof F;   // returns false
g.__proto__ = {};
g instanceof G;   // returns false

Saya pikir perlu dicatat bahwa instanceof ditentukan oleh penggunaan kata kunci "baru" ketika mendeklarasikan objek. Dalam contoh dari JonH;

var color1 = new String("green");
color1 instanceof String; // returns true
var color2 = "coral";
color2 instanceof String; // returns false (color2 is not a String object)

Yang tidak dia sebutkan adalah ini;

var color1 = String("green");
color1 instanceof String; // returns false

Menentukan "baru" sebenarnya menyalin kondisi akhir fungsi konstruktor String ke dalam color1 var, bukan hanya mengaturnya ke nilai kembali. Saya pikir ini lebih baik menunjukkan apa kata kunci baru;

function Test(name){
    this.test = function(){
        return 'This will only work through the "new" keyword.';
    }
    return name;
}

var test = new Test('test');
test.test(); // returns 'This will only work through the "new" keyword.'
test // returns the instance object of the Test() function.

var test = Test('test');
test.test(); // throws TypeError: Object #<Test> has no method 'test'
test // returns 'test'

Menggunakan "baru" memberikan nilai "ini" di dalam fungsi ke var yang dideklarasikan, sementara tidak menggunakannya memberikan nilai kembali sebagai gantinya.

Dan Anda dapat menggunakannya untuk penanganan kesalahan dan debugging, seperti ini:

try{
    somefunction();
} 
catch(error){
    if (error instanceof TypeError) {
        // Handle type Error
    } else if (error instanceof ReferenceError) {
        // Handle ReferenceError
    } else {
        // Handle all other error types
    }
}

//Vehicle is a function. But by naming conventions
//(first letter is uppercase), it is also an object
//constructor function ("class").
function Vehicle(numWheels) {
    this.numWheels = numWheels;
}

//We can create new instances and check their types.
myRoadster = new Vehicle(4);
alert(myRoadster instanceof Vehicle);

Apa itu?

Javascript adalah bahasa prototipe yang artinya menggunakan prototipe untuk 'warisan'. yang instanceofOperator tes jika konstruktor fungsi ini prototypepropertype hadir dalam __proto__rantai obyek. Ini berarti bahwa ia akan melakukan hal berikut (dengan asumsi testObj adalah objek fungsi):

obj instanceof testObj;

1. Periksa apakah prototipe objek sama dengan prototipe konstruktor: obj.__proto__ === testObj.prototype >> jika ini true instanceofakan kembalitrue .
2. Akan memanjat rantai prototipe. Sebagai contoh: obj.__proto__.__proto__ === testObj.prototype >> jika ini true instanceofakan kembalitrue .
3. Akan mengulangi langkah 2 hingga prototipe penuh objek diperiksa. Jika tidak ada rantai prototipe objek yang cocok testObj.prototypemaka instanceofoperator akan kembali false.

Contoh:

function Person(name) {
  this.name = name;
}
var me = new Person('Willem');

console.log(me instanceof Person); // true
// because:  me.__proto__ === Person.prototype  // evaluates true

console.log(me instanceof Object); // true
// because:  me.__proto__.__proto__ === Object.prototype  // evaluates true

console.log(me instanceof Array);  // false
// because: Array is nowhere on the prototype chain

Masalah apa yang dipecahkan?

Itu memecahkan masalah dengan mudah memeriksa apakah suatu objek berasal dari prototipe tertentu. Misalnya, ketika suatu fungsi menerima objek yang dapat memiliki berbagai prototipe. Kemudian, sebelum menggunakan metode dari rantai prototipe, kita bisa menggunakaninstanceof operator untuk memeriksa apakah metode ini ada di objek.

Contoh:

function Person1 (name) {
  this.name = name;
}

function Person2 (name) {
  this.name = name;
}

Person1.prototype.talkP1 = function () {
  console.log('Person 1 talking');
}

Person2.prototype.talkP2 = function () {
  console.log('Person 2 talking');
}


function talk (person) {
  if (person instanceof Person1) {
    person.talkP1();
  }
  
  if (person instanceof Person2) {
    person.talkP2();
  }
  
  
}

const pers1 = new Person1 ('p1');
const pers2 = new Person2 ('p2');

talk(pers1);
talk(pers2);

Di sini, di talk()fungsi pertama diperiksa jika prototipe terletak pada objek. Setelah ini, metode yang sesuai diambil untuk dieksekusi. Tidak melakukan pemeriksaan ini dapat mengakibatkan mengeksekusi metode yang tidak ada dan dengan demikian kesalahan referensi.

Kapan itu tepat dan kapan tidak?

Kami agak sudah membahas ini. Gunakan saat Anda perlu memeriksa prototipe objek sebelum melakukan sesuatu dengannya.

Pada pertanyaan "Kapan itu tepat dan kapan tidak?", 2 sen saya:

instanceofjarang berguna dalam kode produksi, tetapi berguna dalam pengujian di mana Anda ingin menegaskan bahwa kode Anda mengembalikan / membuat objek dari jenis yang benar. Dengan secara eksplisit tentang jenis objek yang dikembalikan / dibuat oleh kode Anda, pengujian Anda menjadi lebih kuat sebagai alat untuk memahami dan mendokumentasikan kode Anda.

instanceofhanyalah gula sintaksis untuk isPrototypeOf:

function Ctor() {}
var o = new Ctor();

o instanceof Ctor; // true
Ctor.prototype.isPrototypeOf(o); // true

o instanceof Ctor === Ctor.prototype.isPrototypeOf(o); // equivalent

instanceof hanya tergantung pada prototipe konstruktor suatu objek.

Konstruktor hanyalah fungsi normal. Sebenarnya itu adalah objek fungsi, karena semuanya adalah objek dalam Javascript. Dan objek fungsi ini memiliki prototipe, karena setiap fungsi memiliki prototipe.

Prototipe hanyalah objek normal, yang terletak di dalam rantai prototipe objek lain. Itu berarti berada dalam rantai prototipe objek lain membuat objek prototipe:

function f() {} //  ordinary function
var o = {}, // ordinary object
 p;

f.prototype = o; // oops, o is a prototype now
p = new f(); // oops, f is a constructor now

o.isPrototypeOf(p); // true
p instanceof f; // true

The instanceofOperator harus dihindari karena palsu kelas, yang tidak ada di Javascript. Meskipun classkata kunci tidak dalam ES2015, karena classlagi-lagi hanya gula sintaksis untuk ... tapi itu cerita lain.

Saya baru saja menemukan aplikasi dunia nyata dan akan menggunakannya lebih sering sekarang, saya pikir.

Jika Anda menggunakan acara jQuery, kadang-kadang Anda ingin menulis fungsi yang lebih umum yang juga dapat dipanggil langsung (tanpa acara). Anda dapat menggunakan instanceofuntuk memeriksa apakah parameter pertama dari fungsi Anda adalah instance dari jQuery.Eventdan bereaksi dengan tepat.

var myFunction = function (el) {                
    if (el instanceof $.Event) 
        // event specific code
    else
        // generic code
};

$('button').click(recalc);    // Will execute event specific code
recalc('myParameter');  // Will execute generic code

Dalam kasus saya, fungsi yang diperlukan untuk menghitung sesuatu baik untuk semua (melalui acara klik pada tombol) atau hanya satu elemen tertentu. Kode yang saya gunakan:

var recalc = function (el) { 
    el = (el == undefined || el instanceof $.Event) ? $('span.allItems') : $(el);
    // calculate...
};