《JavaScript启示录》——1.18 构造函数实例都拥有指向其构造函数的Constructor属性

简介: 任何对象实例化时,都是在幕后将constructor属性创建为对象/实例的属性。这是指创建对象的构造函数。下面创建一个Object()对象,保存在变量foo中,然后验证constructor属性在创建的对象中是否可用。

本节书摘来自异步社区《JavaScript启示录》一书中的第1章,第1.18节,作者:【美】Cody Lindley著,更多章节内容可以访问云栖社区“异步社区”公众号查看

1.18 构造函数实例都拥有指向其构造函数的Constructor属性

任何对象实例化时,都是在幕后将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(){};)。
相关文章
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
313 1
|
9月前
|
前端开发 JavaScript Java
【Java进阶】JavaScript电灯开关实例:从理论到实践
这个例子展示了JavaScript的基本功能,包括操作HTML元素,监听事件,以及改变元素的样式。通过学习和理解这个例子,你可以了解到JavaScript在网页中的应用,以及如何使用JavaScript来创建交互式的网页。
196 13
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
248 56
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
304 1
|
存储 前端开发 JavaScript
JavaScript常用的内置构造函数
JavaScript提供的内置构造函数在数据处理、对象创建、异常处理和异步操作等方面发挥了重要作用。掌握这些构造函数及其用法,对于开发高效、可靠的JavaScript应用至关重要。通过合理使用这些内置构造函数,开发者可以更好地管理和操作各种类型的数据,提升开发效率和代码质量。
179 1
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
存储 JavaScript 前端开发
js中map属性
js中map属性
296 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
313 2