本节书摘来自异步社区《JavaScript启示录》一书中的第1章,第1.18节,作者:【美】Cody Lindley著,更多章节内容可以访问云栖社区“异步社区”公众号查看
任何对象实例化时,都是在幕后将constructor属性创建为对象/实例的属性。这是指创建对象的构造函数。下面创建一个Object()对象,保存在变量foo中,然后验证constructor属性在创建的对象中是否可用。
<!DOCTYPE html><html lang="en"><body><script> var foo = {}; console.log(foo.constructor === Object) /* 输出true, 因为object()构建了 foo */ console.log(foo.constructor) // 指向Object()构造函数 </script></body></html>如下功能非常方便:如果正在使用一些实例,而无法看到是谁或者是什么创建了它(尤其是别人编写的代码),那么可以以此确定它是否是一个数组或一个对象等。
下面实例化JavaScript语言中的大多数预配置对象。请注意,在字面量/原始值上使用constructor属性能够指向正确的构造函数。
<!DOCTYPE html><html lang="en"><body><script> var myNumber = new Number('23'); var myNumberL = 23; // 字面量方式 var myString = new String('male'); var myStringL = 'male'; // 字面量方式 var myBoolean = new Boolean('true'); var myBooleanL = true; // 字面量方式 var myObject = new Object(); var myObjectL = {}; // 字面量方式 var myArray = new Array(); var myArrayL = []; // 字面量方式 var myFunction = new Function(); var myFunctionL = function () { }; // 字面量方式 var myDate = new Date(); var myRegExp = new RegExp('/./'); var myRegExpL = /./; // 字面量方式 var myError = new Error(); console.log( // 所有这些都返回true myNumber.constructor === Number, myNumberL.constructor === Number, myString.constructor === String, myStringL.constructor === String, myBoolean.constructor === Boolean, myBooleanL.constructor === Boolean, myObject.constructor === Object, myObjectL.constructor === Object, myArray.constructor === Array, myArrayL.constructor === Array, myFunction.constructor === Function, myFunctionL.constructor === Function, myDate.constructor === Date, myRegExp.constructor === RegExp, myRegExpL.constructor === RegExp, myError.constructor === Error ); </script></body></html>constructor属性也适用于用户自定义的构造函数。如下代码中,我们定义了一个CustomConstructor()构造函数,然后使用new关键字调用构造函数来生成一个对象。一旦创建了对象,就可以使用constructor属性了。
<!DOCTYPE html><html lang="en"><body><script> var CustomConstructor = function CustomConstructor() { return 'Wow!'; }; var instanceOfCustomObject = new CustomConstructor(); // 输出true console.log(instanceOfCustomObject.constructor === CustomConstructor); // 返回CustomConstructor()函数的一个引用 // 返回 'function() { return 'Wow!'; };' console.log(instanceOfCustomObject.constructor); </script></body></html>注意
大家可能会感到困惑,当不返回对象时,原始值为何拥有指向构造函数的constructor属性。使用原始值的时候,依然调用了构造函数,因此原始值和构造函数依然有关系。然而,最终的结果是一个原始值。对用户自定义的构造函数表达式,如果想让constructor属性记录构造函数的实际名称,则必须给予构造函数表达式一个实际名称(如var Person = function Person(){};)。