如何区分对象字面量和其他 Javascript 对象？

Question

更新：我正在重新表述这个问题，因为对我来说重要的一点是识别对象文字：

如何区分对象文字和任何其他 Javascript 对象（例如 DOM 节点、日期对象等）？我怎样才能编写这个函数：

function f(x) {
    if (typeof x === 'object literal')
        console.log('Object literal!');
    else
        console.log('Something else!');
}

这样它只打印对象文字！作为下面第一次调用的结果：

f({name: 'Tom'});
f(function() {});
f(new String('howdy'));
f('hello');
f(document);

---

原始问题

我正在编写一个设计的Javascript函数接受对象文字、字符串或 DOM 节点作为其参数。它需要以稍微不同的方式处理每个参数，但目前我无法弄清楚如何区分 DOM 节点和普通的旧对象文字。

这是我的函数的一个大大简化的版本，以及对我需要处理的每种参数的测试：

function f(x) {
    if (typeof x == 'string')
        console.log('Got a string!');
    else if (typeof x == 'object')
        console.log('Got an object literal!');
    else
        console.log('Got a DOM node!');
}

f('hello');
f({name: 'Tom'});
f(document);

此代码将为后两个调用记录相同的消息。我不知道要在 else if 子句中包含什么内容。我尝试过其他具有相同效果的变体，例如 x instanceof Object 。

我知道这对我来说可能是糟糕的 API/代码设计。即使是这样，我仍然想知道如何做到这一点。

Answer 1

如何区分对象文字和任何其他 Javascript 对象（例如 DOM 节点、Date 对象等）？

简短的回答是你不能。

对象文字类似于：

var objLiteral = {foo: 'foo', bar: 'bar'};

而使用对象构造函数创建的同一对象可能是：

var obj = new Object();
obj.foo = 'foo';
obj.bar = 'bar';

我认为没有任何可靠的方法来区分创建了两个对象。

为什么它很重要？

一般的功能测试策略是测试传递给函数的对象的属性，以确定它们是否支持要调用的方法。这样你就不必真正关心对象是如何创建的。

您可以使用“鸭子打字”，但仅限于有限的范围。例如，您不能仅仅因为对象具有 getFullYear() 方法就保证它是 Date 对象。同样，仅仅因为它具有 nodeType 属性并不意味着它是一个 DOM 对象。

例如，jQuery isPlainObject 函数认为，如果一个对象具有 nodeType 属性，则它是 DOM 节点，如果它具有 setInterval 属性，则它是 Window 对象。这种鸭子类型非常简单，并且在某些情况下会失败。

您可能还注意到，jQuery 依赖于以特定顺序返回的属性 - 另一个危险的假设，任何标准都不支持（尽管一些支持者正在尝试更改标准以适应他们假设的行为）。

2014 年 4 月 22 日编辑：在版本 1.10 中，jQuery 包含一个 support.ownLast 属性，该属性基于测试单个属性（显然这是为了 IE9 支持），以查看继承的属性是首先枚举还是最后枚举。这仍然忽略了一个事实，即对象的属性可以以任何顺序返回，无论它们是继承的还是自己的，并且可能会混乱。

对于“普通”对象来说，最简单的测试可能是：

function isPlainObj(o) {
  return typeof o == 'object' && o.constructor == Object;
}

对于使用对象文字或对象构造函数创建的对象来说，这始终是正确的，但对于以其他方式创建的对象来说，很可能给出虚假结果，并且可能（可能会）跨帧失败。您也可以添加一个 instanceof 测试，但我看不出它做了任何构造函数测试没有做的事情。

如果您传递 ActiveX 对象，最好将其包装在 try..catch 中，因为它们可能返回各种奇怪的结果，甚至引发错误。

编辑 2015 年 10 月 13 日

当然，这里存在一些陷阱：

isPlainObject( {constructor: 'foo'} ); // false, should be true

// In global scope
var constructor = Object;
isPlainObject( this );        // true, should be false

弄乱构造函数属性会导致问题。还有其他陷阱，例如由 Object 之外的构造函数创建的对象。

由于 ES5 现在几乎无处不在，因此有 Object.getPrototypeOf 检查对象的[[Prototype]]。如果它是 Object.prototype 中的构建，那么该对象就是一个普通对象。然而，一些开发人员希望创建没有继承属性的真正“空”对象。这可以通过以下方式完成：

var emptyObj = Object.create(null);

在本例中，[[Prototype]] 属性为 null。因此，仅仅检查内部原型是否是 Object.prototype 是不够的。

还有一种相当广泛使用的：

Object.prototype.toString.call(valueToTest)

被指定为基于内部 [[Class]] 属性返回一个字符串，对于对象来说是 [object Object]。然而，这种情况在 ECMAScript 2015 中发生了变化，因此可以对其他类型的对象执行测试，默认值为 [object Object]，因此该对象可能不是“普通对象”，而只是一个不被识别为其他对象的对象。因此，该规范指出：

“[使用 toString 进行测试]不提供可靠的类型测试
其他类型的内置或程序定义对象的机制。”

http://www.ecma-international.org/ecma-262/6.0/index.html#sec-object.prototype.tostring

因此，更新的函数允许 ES5 之前的主机， [[Prototype]] 为 null 的对象以及其他没有 getPrototypeOf 的对象类型（例如 null，谢谢 Chris Nielsen)

请注意，无法填充 getPrototypeOf，因此可能不会。如果需要支持较旧的浏览器（例如 IE 8 及更低版本，根据 MDN）。

/*  Function to test if an object is a plain object, i.e. is constructed
**  by the built-in Object constructor and inherits directly from Object.prototype
**  or null. Some built-in objects pass the test, e.g. Math which is a plain object
**  and some host or exotic objects may pass also.
**
**  @param {} obj - value to test
**  @returns {Boolean} true if passes tests, false otherwise
*/
function isPlainObject(obj) {

  // Basic check for Type object that's not null
  if (typeof obj == 'object' && obj !== null) {

    // If Object.getPrototypeOf supported, use it
    if (typeof Object.getPrototypeOf == 'function') {
      var proto = Object.getPrototypeOf(obj);
      return proto === Object.prototype || proto === null;
    }
    
    // Otherwise, use internal class
    // This should be reliable as if getPrototypeOf not supported, is pre-ES5
    return Object.prototype.toString.call(obj) == '[object Object]';
  }
  
  // Not an object
  return false;
}


// Tests
var data = {
  'Host object': document.createElement('div'),
  'null'       : null,
  'new Object' : {},
  'Object.create(null)' : Object.create(null),
  'Instance of other object' : (function() {function Foo(){};return new Foo()}()),
  'Number primitive ' : 5,
  'String primitive ' : 'P',
  'Number Object' : new Number(6),
  'Built-in Math' : Math
};

Object.keys(data).forEach(function(item) {
  document.write(item + ': ' + isPlainObject(data[item]) + '<br>');
});

Answer 2

类似于@RobG示例：

function isPlainObject(obj) {
    return  typeof obj === 'object' // separate from primitives
        && obj !== null         // is obvious
        && obj.constructor === Object // separate instances (Array, DOM, ...)
        && Object.prototype.toString.call(obj) === '[object Object]'; // separate build-in like Math
}

测试：

function isPlainObject(obj) {
	return	typeof obj === 'object'
		&& obj !== null
		&& obj.constructor === Object
		&& Object.prototype.toString.call(obj) === '[object Object]';
}

var data = {
  '{}': {},
  'DOM element': document.createElement('div'),
  'null'       : null,
  'Object.create(null)' : Object.create(null),
  'Instance of other object' : new (function Foo(){})(),
  'Number primitive ' : 5,
  'String primitive ' : 'P',
  'Number Object' : new Number(6),
  'Built-in Math' : Math
};

Object.keys(data).forEach(function(item) {
  document.write(item + ':<strong>' + isPlainObject(data[item]) + '</strong><br>');
});

Answer 3

由于所有 DOM 节点都继承自 Node 接口，您可以尝试以下操作：

if(typeof x === 'string') {
    //string
} else if(x instanceof Node) {
    //DOM Node
} else {
    //everything else
}

但我不确定这是否适用于旧版本的 Internet Explorer

Answer 4

将 DOM 节点的检查移到对象文字上方。检查 DOM 节点上存在的某些属性来检测节点。我正在使用nodeType。它不是很万无一失，因为您可以传入一个对象 {nodeType: 0 } ，这会破坏这个。

if (typeof x == 'string') { /* string */ }
else if ('nodeType' in x) { /* dom node */ }
else if (typeof x == 'object') { /* regular object */ }

像上面这样的所有鸭子类型检查，甚至 instanceof 检查都注定会失败。要真正确定给定对象是否实际上是 DOM 节点，您需要使用传入对象本身以外的其他内容。

Answer 5

也许是这样的？

var isPlainObject = function(value){
    if(value && value.toString && value.toString() === '[object Object]')
        return true;

    return false;
};

或者另一种方法：

var isObject = function(value){
    var json;

    try {
        json = JSON.stringify(value);
    } catch(e){

    }

    if(!json || json.charAt(0) !== '{' || json.charAt(json.length - 1) !== '}')
        return false;

    return true;
};

Answer 6

如果您不介意使用软件包，我建议使用 lodash 来实现此目的：

https://lodash .com/docs/4.17.15#isPlainObject