instanceofคำหลักใน JavaScript อาจจะค่อนข้างสับสนเมื่อมันเป็นครั้งแรกที่พบเป็นคนมักจะคิดว่า JavaScript ไม่ได้เป็นภาษาการเขียนโปรแกรมเชิงวัตถุ

• มันคืออะไร?
• มันแก้ปัญหาอะไรได้บ้าง?
• มันเหมาะสมเมื่อใดและเมื่อใด

instanceof

ตัวถูกดำเนินการด้านซ้ายมือ (LHS) เป็นวัตถุจริงที่กำลังทดสอบกับตัวถูกดำเนินการด้านขวามือ (RHS) ซึ่งเป็นตัวสร้างที่แท้จริงของคลาส คำจำกัดความพื้นฐานคือ:

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

นี่คือตัวอย่างที่ดีและนี่คือตัวอย่างที่นำมาโดยตรงจากเว็บไซต์นักพัฒนาของ 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)

สิ่งหนึ่งที่ควรค่าแก่การกล่าวถึงคือinstanceofประเมินว่าเป็นจริงถ้าวัตถุสืบทอดมาจากต้นแบบของคลาส:

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

นั่นคือp instanceof Personเป็นความจริงตั้งแต่สืบทอดจากpPerson.prototype

ตามคำขอของ OP

ฉันได้เพิ่มตัวอย่างเล็ก ๆ ที่มีรหัสตัวอย่างและคำอธิบาย

เมื่อคุณประกาศตัวแปรคุณให้ประเภทเฉพาะ

ตัวอย่างเช่น

int i;
float f;
Customer c;

การแสดงดังกล่าวข้างต้นบางตัวแปรคือi, และf cชนิดที่มีinteger, floatและผู้ใช้กำหนดCustomerชนิดข้อมูล ประเภทดังกล่าวข้างต้นอาจเป็นภาษาใดก็ได้ไม่ใช่แค่ JavaScript อย่างไรก็ตามด้วย JavaScript เมื่อคุณประกาศตัวแปรที่คุณไม่ได้กำหนดประเภทไว้อย่างชัดเจนvar xx อาจเป็นตัวเลข / สตริง / ประเภทข้อมูลที่ผู้ใช้กำหนด ดังนั้นinstanceofมันคืออะไรตรวจสอบวัตถุเพื่อดูว่าเป็นชนิดที่ระบุไว้จากข้างบนรับCustomerวัตถุที่เราสามารถทำได้:

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!

ดังกล่าวข้างต้นที่เราเคยเห็นว่ามีการประกาศกับชนิดc Customerเราเพิ่งตรวจสอบแล้วว่าเป็นประเภทCustomerหรือไม่ แน่นอนมันจะกลับมาจริง จากนั้นยังคงใช้วัตถุที่เราตรวจสอบถ้ามันเป็นCustomer Stringไม่ใช่แน่นอนStringเราCustomerไม่ใช่วัตถุที่ไม่ใช่Stringวัตถุวัตถุ ในกรณีนี้มันจะคืนค่าเท็จ

มันง่ายจริงๆ!

มีแง่มุมที่สำคัญสำหรับอินสแตนซ์ที่ดูเหมือนจะไม่ครอบคลุมในความคิดเห็นใด ๆ : การสืบทอด ตัวแปรที่ถูกประเมินโดยการใช้งานของ instanceof สามารถคืนค่าจริงสำหรับ "หลายประเภท" เนื่องจากการสืบทอดต้นแบบ

ตัวอย่างเช่นลองกำหนดประเภทและประเภทย่อย:

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;

ตอนนี้เรามี "คลาส" สองสามตัวที่ช่วยให้สร้างอินสแตนซ์และค้นหาว่าอินสแตนซ์ของพวกเขาคืออะไร:

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

เห็นไหมว่าบรรทัดสุดท้าย? การเรียก "ใหม่" ทั้งหมดไปยังฟังก์ชันส่งคืนออบเจ็กต์ที่สืบทอดจาก Object สิ่งนี้ถือเป็นจริงแม้ว่าจะใช้การสร้างวัตถุแบบย่อ:

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

แล้วคำจำกัดความของ "คลาส" นั้นคืออะไร? พวกมันคืออะไร

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

ผมรู้สึกว่าการทำความเข้าใจว่าวัตถุใด ๆ ที่สามารถเป็นตัวอย่างของหลายประเภทเป็นสิ่งสำคัญเนื่องจากคุณของฉัน (ถูก) instanceofสมมติว่าคุณสามารถแยกความแตกต่างระหว่างการพูดและวัตถุและการทำงานโดยการใช้ เป็นตัวอย่างสุดท้ายนี้แสดงให้เห็นชัดเจนว่าฟังก์ชั่นคือวัตถุ

สิ่งนี้ก็มีความสำคัญเช่นกันหากคุณใช้รูปแบบการสืบทอดและต้องการยืนยันลูกหลานของวัตถุด้วยวิธีอื่นนอกเหนือจากการพิมพ์ด้วยเป็ด

instanceofหวังว่าจะช่วยให้ทุกคนสำรวจ

คำตอบอื่น ๆ ที่นี่ถูกต้อง แต่พวกเขาไม่เข้าใจวิธีการinstanceofใช้งานจริงซึ่งอาจเป็นที่สนใจของนักกฎหมายด้านภาษาบางคน

วัตถุทุกชิ้นใน JavaScript มีต้นแบบซึ่งสามารถเข้าถึงได้ผ่าน__proto__คุณสมบัติ ฟังก์ชั่นยังมีprototypeคุณสมบัติซึ่งเป็นค่าเริ่มต้น__proto__สำหรับวัตถุใด ๆ ที่สร้างขึ้นโดยพวกเขา prototypeเมื่อมีฟังก์ชั่นจะถูกสร้างขึ้นก็จะได้รับวัตถุที่ไม่ซ้ำกันสำหรับ instanceofผู้ประกอบการใช้เป็นเอกลักษณ์นี้เพื่อให้คำตอบ นี่คือสิ่งที่instanceofอาจดูเหมือนว่าคุณเขียนมันเป็นฟังก์ชั่น

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__;
  }
}

นี่คือการถอดความรุ่น ECMA-262 5.1 (หรือที่เรียกว่า ES5) ส่วนที่ 15.3.5.3

โปรดทราบว่าคุณสามารถกำหนดวัตถุใด ๆ ให้กับprototypeคุณสมบัติของฟังก์ชันอีกครั้งและคุณสามารถกำหนด__proto__คุณสมบัติของวัตถุใหม่หลังจากที่สร้างขึ้นแล้ว สิ่งนี้จะให้ผลลัพธ์ที่น่าสนใจแก่คุณ:

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

ฉันคิดว่ามันคุ้มค่าที่จะสังเกตว่าอินสแตนซ์ของมันถูกกำหนดโดยการใช้คำหลัก "ใหม่" เมื่อประกาศวัตถุ ในตัวอย่างจาก 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)

สิ่งที่เขาไม่ได้เอ่ยถึงคือสิ่งนี้

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

การระบุ "ใหม่" คัดลอกสถานะสิ้นสุดจริงของฟังก์ชันตัวสร้างสตริงลงใน color1 var แทนที่จะตั้งค่าเป็นค่าส่งคืน ฉันคิดว่าสิ่งนี้จะแสดงสิ่งที่ดีกว่าคำหลักใหม่

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'

การใช้ "ใหม่" กำหนดค่าของ "this" ภายในฟังก์ชันให้กับ var ที่ประกาศขณะที่ไม่ได้ใช้จะกำหนดค่าส่งคืนแทน

และคุณสามารถใช้มันสำหรับการจัดการและแก้ไขข้อผิดพลาดเช่นนี้:

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);

มันคืออะไร?

Javascript เป็นภาษาต้นแบบซึ่งหมายความว่ามันใช้ต้นแบบสำหรับ 'การสืบทอด' instanceofประกอบการทดสอบถ้าฟังก์ชั่นคอนสตรัคของprototypepropertype อยู่ใน__proto__ห่วงโซ่ของวัตถุ ซึ่งหมายความว่าจะทำดังต่อไปนี้ (สมมติว่า testObj เป็นวัตถุฟังก์ชั่น):

obj instanceof testObj;

1. ตรวจสอบว่าต้นแบบของวัตถุเท่ากับต้นแบบของตัวสร้าง: obj.__proto__ === testObj.prototype >> ถ้ามันtrue instanceofจะกลับมาtrueจะกลับมา
2. จะปีนขึ้นไปต้นแบบลูกโซ่ ตัวอย่างเช่น: obj.__proto__.__proto__ === testObj.prototype >> ถ้าเป็นจะกลับมาtrue instanceoftrue
3. จะทำซ้ำขั้นตอนที่ 2 จนกว่าจะตรวจสอบต้นแบบเต็มของวัตถุ หากไม่มีที่ไหนในห่วงโซ่ต้นแบบของวัตถุที่ถูกจับคู่กับtestObj.prototypeจากนั้นผู้ประกอบการจะกลับมาinstanceoffalse

ตัวอย่าง:

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

มันแก้ปัญหาอะไรได้บ้าง?

มันแก้ปัญหาการตรวจสอบได้อย่างสะดวกสบายถ้าวัตถุนั้นมาจากต้นแบบที่แน่นอน ตัวอย่างเช่นเมื่อฟังก์ชั่นรับวัตถุซึ่งสามารถมีต้นแบบต่าง ๆ จากนั้นก่อนที่จะใช้วิธีการจากห่วงโซ่ต้นแบบเราสามารถใช้ตัวinstanceofดำเนินการเพื่อตรวจสอบว่าวิธีการเหล่านี้อยู่บนวัตถุ

ตัวอย่าง:

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);

ที่นี่ในtalk()ฟังก์ชั่นก่อนมีการตรวจสอบว่าต้นแบบอยู่บนวัตถุ หลังจากนี้จะมีการเลือกวิธีการที่เหมาะสมเพื่อดำเนินการ การไม่ตรวจสอบนี้อาจส่งผลให้เกิดการดำเนินการวิธีการที่ไม่มีอยู่และทำให้เกิดข้อผิดพลาดในการอ้างอิง

มันเหมาะสมเมื่อใดและเมื่อใด

พวกเราไปที่นี่แล้ว ใช้มันเมื่อคุณต้องการตรวจสอบต้นแบบของวัตถุก่อนที่จะทำอะไรกับมัน

ในคำถาม "เมื่อใดเหมาะสมและเมื่อไม่เหมาะสม" 2 cents ของฉัน:

instanceofไม่ค่อยมีประโยชน์ในรหัสการผลิต แต่มีประโยชน์ในการทดสอบที่คุณต้องการยืนยันว่ารหัสของคุณส่งคืน / สร้างวัตถุประเภทที่ถูกต้อง ด้วยความชัดเจนเกี่ยวกับประเภทของวัตถุที่โค้ดของคุณส่งคืน / สร้างการทดสอบของคุณจะมีประสิทธิภาพมากขึ้นเป็นเครื่องมือสำหรับการทำความเข้าใจและจัดทำเอกสารโค้ดของคุณ

instanceofเป็นเพียงน้ำตาล syntactic สำหรับ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 เพียงแค่ขึ้นอยู่กับต้นแบบของตัวสร้างของวัตถุ

ตัวสร้างเป็นเพียงฟังก์ชั่นปกติ พูดอย่างเคร่งครัดมันเป็นวัตถุฟังก์ชั่นเนื่องจากทุกอย่างเป็นวัตถุใน Javascript และฟังก์ชั่นวัตถุนี้มีต้นแบบเพราะทุกฟังก์ชั่นมีต้นแบบ

ต้นแบบเป็นเพียงวัตถุปกติซึ่งตั้งอยู่ภายในสายโซ่ต้นแบบของวัตถุอื่น นั่นหมายถึงการอยู่ในห่วงโซ่ต้นแบบของวัตถุอื่นทำให้วัตถุไปยังต้นแบบ:

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

instanceofผู้ประกอบการควรหลีกเลี่ยงเพราะมันปลอมเรียนซึ่งไม่อยู่ใน Javascript แม้จะมีclassคำสำคัญไม่ได้อยู่ใน ES2015 เช่นกันเพราะclassมันเป็นเพียงแค่ประโยคน้ำตาลสำหรับ ... แต่นั่นเป็นอีกเรื่อง

ฉันเพิ่งพบแอปพลิเคชันในโลกแห่งความเป็นจริงและฉันจะใช้บ่อยขึ้นในตอนนี้ฉันคิดว่า

หากคุณใช้เหตุการณ์ jQuery บางครั้งคุณต้องการเขียนฟังก์ชันทั่วไปซึ่งอาจเรียกได้โดยตรง (โดยไม่มีเหตุการณ์) คุณสามารถใช้instanceofเพื่อตรวจสอบว่าพารามิเตอร์แรกของฟังก์ชันของคุณเป็นตัวอย่างjQuery.Eventและตอบสนองอย่างเหมาะสม

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

ในกรณีของฉันฟังก์ชั่นที่จำเป็นในการคำนวณบางอย่างสำหรับทุกคน (ผ่านเหตุการณ์คลิกที่ปุ่ม) หรือองค์ประกอบที่เฉพาะเจาะจงเพียงอย่างเดียว รหัสที่ฉันใช้:

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