javascript - JavaScript 中的 instanceof 运算符是什么？

Question

JavaScript 中的instanceof关键字在第一次遇到时可能会很混乱，因为人们倾向于认为 JavaScript 不是一种面向对象的编程语言。

它是什么？
它解决了哪些问题？
什么时候合适，什么时候不合适？

score 303 · Accepted Answer

实例

左侧 (LHS) 操作数是被测试到右侧 (RHS) 操作数的实际对象，右侧 (RHS) 操作数是类的实际构造函数。基本定义是：

检查当前对象，如果对象属于指定对象类型，则返回 true。

这里有一些很好的例子，下面是一个直接取自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，如果对象继承自类的原型，则计算结果为 true：

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

这是p instanceof Person真的，因为p继承自Person.prototype.

根据 OP 的要求

我添加了一个带有一些示例代码和解释的小示例。

当你声明一个变量时，你给它一个特定的类型。

例如：

int i;
float f;
Customer c;

上面显示了一些变量，即i、f和c。类型是integer,float和用户定义的Customer数据类型。上述类型可以用于任何语言，而不仅仅是 JavaScript。然而，在 JavaScript 中，当你声明一个变量时，你没有明确定义一个类型var x，x 可以是一个数字/字符串/用户定义的数据类型。那么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是用 type 声明的Customer。我们已经新建了它并检查了它是否属于类型Customer。当然，它返回 true。然后仍然使用Customer我们检查它是否是一个对象String。不，绝对不是String我们新的Customer对象而不是String对象。在这种情况下，它返回 false。

真的就是这么简单！

score 97 · Accepted Answer

instanceof 有一个重要方面，到目前为止似乎没有在任何评论中涉及：继承。由于原型继承，使用 instanceof 评估的变量可能会为多个“类型”返回 true。

例如，让我们定义一个类型和一个子类型：

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

我觉得理解任何对象都可以是 MULTIPLE 类型的实例很重要，因为您（错误地）假设您可以通过使用区分对象和函数instanceof。正如最后一个例子清楚地表明一个函数是一个对象。

如果您使用任何继承模式并希望通过鸭子类型以外的方法确认对象的后代，这也很重要。

希望对任何探索的人有所帮助instanceof。

score 89 · Accepted Answer

这里的其他答案是正确的，但他们没有深入了解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

score 46 · Accepted Answer

我认为值得注意的是，instanceof 是通过在声明对象时使用“new”关键字来定义的。在 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

指定“new”实际上将 String 构造函数的结束状态复制到 color1 var 中，而不仅仅是将其设置为返回值。我认为这更好地显示了 new 关键字的作用；

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'

使用“new”将函数内部的“this”的值分配给声明的var，而不使用它则分配返回值。

score 8 · Accepted Answer

您可以将其用于错误处理和调试，如下所示：

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

score 5 · Accepted Answer

它是什么？

Javascript 是一种原型语言，这意味着它使用原型进行“继承”。运算符instanceof测试构造函数的prototypepropertype 是否存在于__proto__对象的链中。这意味着它将执行以下操作（假设 testObj 是一个函数对象）：

obj instanceof testObj;

检查对象的原型是否等于构造函数的原型：obj.__proto__ === testObj.prototype >> 如果是，true instanceof则返回true。
将爬上原型链。例如：obj.__proto__.__proto__ === testObj.prototype >> 如果这true instanceof将返回true.
将重复步骤 2，直到检查对象的完整原型。如果对象的原型链上没有任何地方匹配，testObj.prototype则instanceof操作符将返回false。

例子：

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()函数首先检查原型是否位于对象上。在此之后，选择适当的方法来执行。不执行此检查可能会导致执行不存在的方法，从而导致引用错误。

什么时候合适，什么时候不合适？

我们已经讨论过了。当您需要在使用对象之前检查对象的原型时使用它。

score 3 · Accepted Answer

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

score 1 · Accepted Answer

关于“什么时候合适，什么时候不合适？”这个问题，我的 2 美分：

instanceof在生产代码中很少有用，但在您想要断言您的代码返回/创建正确类型的对象的测试中很有用。通过明确您的代码返回/创建的对象类型，您的测试作为理解和记录代码的工具变得更加强大。

score 0 · Accepted Answer

我刚刚找到了一个真实的应用程序，我想现在会更频繁地使用它。

如果您使用 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...
};

score 0 · Accepted Answer

instanceof只是语法糖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 中也没有，但sinceclass再次只是语法糖......但这是另一个故事。

score 0 · Accepted Answer

@SebastianSimon 我的最后一个答案是 8 岁（当我跛脚时），我可能写了一些公牛*命中 :)

简而言之 - 目前我使用的唯一情况instanceof是我使用class实例时，行为取决于我将收到的类，例如。我想区分 404 是 ErrorA(resource not exist) 还是 ErrorB(service not found) - 库响应代码令人困惑，但幸运的是它使用不同的错误类抛出。

绝对（目前）我不会用它来检查反映原语的类型 - 你不能确定库是返回'msg'还是new String('msg').

它们都有属于String类的方法，因为'msg'原语在内部被包装到字符串对象中。内部意味着解释器。他们都是，Strings但instanceof运营商似乎在这里不够 - 检查是否某事。是原始的或类我会使用typeof&&的混合instanceof- 但仅适用于从外部 JS 库返回的东西。

Currenlty TypeScript 正在解决这个问题，您不再需要使用typeof和进行如此繁琐的检查instanceof。

javascript - JavaScript 中的 instanceof 运算符是什么？

11 回答 11

实例

根据 OP 的要求

例子：

例子：

Related

Reference