Javascript中isPrototypeOf和instanceof有什么区别？

Question

在我自己的一些旧代码中，我使用以下内容：

Object.prototype.instanceOf = function( iface )
{
 return iface.prototype.isPrototypeOf( this );
};

然后我这样做（例如）

[].instanceOf( Array )

这有效，但似乎以下内容会做同样的事情：

[] instanceof Array

现在，这当然只是一个非常简单的例子。因此，我的问题是：

a instanceof b ALWAYS 是否与 b.prototype.isPrototypeOf(a) 相同？

Answer 1

是的，他们做同样的事情，都遍历原型链寻找其中的特定对象。

两者之间的区别在于它们是什么以及如何使用它们，例如isPrototypeOf 是 Object.prototype 对象上可用的函数，它可以让您测试是否 >一个特定对象位于另一个对象的原型链中，由于该方法是在Object.prototype上定义的，因此它可用于所有对象。

instanceof 是一个运算符 它需要两个操作数，一个对象和一个 构造函数，它将测试传递的函数 prototype 属性是否存在于对象链上（通过 [[HasInstance]](V) 内部操作，仅在 Function 对象中可用）。

例如：

function A () {
  this.a = 1;
}
function B () {
  this.b = 2;
}
B.prototype = new A();
B.prototype.constructor = B;

function C () {
  this.c = 3;
}
C.prototype = new B();
C.prototype.constructor = C;

var c = new C();

// instanceof expects a constructor function

c instanceof A; // true
c instanceof B; // true
c instanceof C; // true

// isPrototypeOf, can be used on any object
A.prototype.isPrototypeOf(c); // true
B.prototype.isPrototypeOf(c); // true
C.prototype.isPrototypeOf(c); // true

Answer 2

a instanceof b 是否始终与 b.prototype.isPrototypeOf(a) 相同？

不，a instanceof b 的行为并不总是与 b.prototype.isPrototypeOf(a) 相同。

CMS的回答指出它们的不同之处在于它们是什么（一个是运算符，另一个是可用的内置方法在 Object.prototype 对象上）。这是正确的，但是也有一些特殊情况，在 b.prototype.isPrototypeOf(a) 时 a instanceof b 会导致 TypeError > 会工作得很好，反之亦然。

区别#1

instanceof 的右侧应该是一个构造函数。

如果 b 不是函数：

• a instanceof b 将导致 TypeError。

• b.prototype.isPrototypeOf(a) 会工作得很好。

const b = {
    prototype: {}
};
const a = Object.create( b.prototype );

console.log( b.prototype.isPrototypeOf(a) );    // true
console.log( a instanceof b );                  // TypeError: Right-hand side of 'instanceof' is not callable

差异#2

当使用 b.prototype.isPrototypeOf(a) 时，b.prototype 应该继承自 Object.prototype：

如果 b.prototype 无法访问 Object.prototype.isPrototypeOf() 方法：

• b.prototype.isPrototypeOf(a) 将导致 类型错误。
• a instanceof b 可以正常工作。

function B() {};
B.prototype = Object.create( null );

const a = new B();

console.log( a instanceof B );              // true
console.log( B.prototype.isPrototypeOf(a) ) // TypeError: B.prototype.isPrototypeOf is not a function

差异 #3

如果 instanceof 的右侧是绑定函数，则将其视为与其目标函数等效。

如果 b 是一个绑定函数：

• a instanceof b 就可以正常工作。
• b.prototype.isPrototypeOf(a) 将导致 TypeError（绑定函数没有 prototype 属性）。

function B() {};
const BoundB = B.bind( null );
const a = new B();

console.log( a instanceof BoundB );              // true
console.log( BoundB.prototype.isPrototypeOf(a) ) // TypeError: Cannot read property 'isPrototypeOf' of undefined

结论

• 如果您正在处理通过 Object.create() 建立的原型继承，而不使用构造函数，那么您可能应该使用 Object.prototype.isPrototypeOf() 方法（实际上，instanceof 的用例受到更多限制，因为 instanceof 期望其右侧参数是构造函数）。
• 如果您正在处理构造函数，则使用 instanceof 运算符会稍微安全一些（您将能够覆盖绑定函数以及 Object.prototype 不支持的情况）位于Constructor.prototype的原型链中）。

Answer 3

运算符优先级和真实性不同，因为一个是表达式，另一个是方法调用。需要强调的一件事是，两者都遍历原型链，因此您不能假设匹配的原型和相关对象之间存在一对一的映射：

var i = 0;

function foo()
{
console.log("foo");
console.log(i++ + ": " + Object.prototype.isPrototypeOf(Object) ) //true
console.log(i++ + ": " + Function.prototype.isPrototypeOf(Function) ) //true

console.log(i++ + ": " + Function.prototype.isPrototypeOf(Function) ) //true
console.log(i++ + ": " + Function.prototype.isPrototypeOf(Object) ) //true

console.log(i++ + ": " + RegExp.prototype.isPrototypeOf( RegExp(/foo/) ) ) //true
console.log(i++ + ": " + Object.prototype.isPrototypeOf( RegExp(/foo/) ) ) //true
console.log(i++ + ": " + Function.prototype.isPrototypeOf( RegExp(/foo/) ) ) //false
console.log(i++ + ": " + Object.prototype.isPrototypeOf(Math) ) //true
console.log(i++ + ": " + Math.isPrototypeOf(Math) ) //false
}

function bar()
{
console.log("bar");
console.log(i++ + ": " + (Object instanceof Object) ) //true

console.log(i++ + ": " + (Function instanceof Function) ) //true
console.log(i++ + ": " + (Function instanceof Object) ) //true

console.log(i++ + ": " + (RegExp(/foo/) instanceof RegExp) ) //true
console.log(i++ + ": " + (RegExp(/foo/) instanceof Object)  ) //true
console.log(i++ + ": " + (RegExp(/foo/) instanceof Function) ) //false
console.log(i++ + ": " + (Math instanceof Object) ) //true
console.log(i++ + ": " + (Math instanceof Math) ) //error
}
try
  {
  foo()
  }
catch(e)
  {
  console.log(JSON.stringify(e));
  }
finally
  {
  try
    {
    bar();
    }
  catch(e)
    {
    console.log(JSON.stringify(e));
    }
  }

参考

• ECMAScript 6 中的类（最终语义）