《JavaScript启示录》——1.18 构造函数实例都拥有指向其构造函数的Constructor属性
2023-09-11 14:17:43 时间
本节书摘来自异步社区《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启示录》——导读 本书的撰写意图是通过考察原生JavaScript对象和不同环境对原生对象的支持的细微差别,来给读者展现准确的JavaScript世界观:复杂值、原始值、作用域、继承、head对象等。
《JavaScript启示录》——1.21 JavaScript对象和Object()对象 不要将一般术语“JavaScript对象”与Object()对象混淆。前者指的是JavaScript中对象的概念。Object()对象(如var myObject = new Object())是JavaScript中表示的一个非常特殊的值。
《JavaScript启示录》——1.20 构造函数创建的实例可拥有自己独立的属性(实例属性) 在JavaScript中,对象在任何时候都可以扩展(即动态属性)。正如前面提到的,确切地说,JavaScript拥有易变对象(mutable object)。这意味着通过构造函数创建的对象可以扩展属性。
《JavaScript启示录》——1.19 验证对象是否是特定构造函数的实例 原始值使用对象包装器,判断实例时(如 foo instanceof String //返回false),instanceof操作符将返回false。如果使用new操作符创建字符串 foo ,instanceof操作符会返回true。
《JavaScript启示录》——1.17 动态属性支持易变对象 复杂对象是由动态属性构成的。这使得用户自定义对象和大多数原生对象可以产生突变。这意味着JavaScript中的大多数对象都可以随时更新或更改。正因为如此,可以通过增加原生对象,来改变JavaScript本身的原生预配置特性。
《JavaScript启示录》——1.16 typeof操作符 typeof操作符用于返回正在使用值的类型。但它返回的值并不一致,或者说,逻辑上不一致。下面的代码展示了使用typeof操作符所返回的值。
《JavaScript启示录》——1.15 复杂对象具有动态属性 一个新变量,指向现有的复杂对象,并没有复制该对象。这就是复杂对象有时被称为引用对象的原因。复杂对象可以根据需求有任意多个引用,即使对象改变,它们也总是指向同一个对象。
《JavaScript启示录》——1.14 复杂对象比较采用引用比较 复杂对象只有在引用相同的对象(即有相同的地址)时才相等。包含相同对象的两个变量彼此不相等,因为它们并不指向同一个对象。
《JavaScript启示录》——1.13 如何存储或复制复杂值 复杂值是通过引用进行存储和操作的,理解这一点相当重要。创建一个包含复杂对象的变量时,其值是内存中的一个引用地址。引用一个复杂对象时,使用它的名称(即变量或对象属性)通过内存中的引用地址获取该对象值。当考虑试图复制一个复杂值时会发生什么事的时候,这就非常重要了。
《JavaScript启示录》——1.12 复杂值(或组合值) 原生对象构造函数Object()、Array()、Function()、Date()、Error()和RegExp()是复杂类型,因为它们可以包含一个或多个原始值或复杂值。本质上,复杂值可以由很多不同类型的JavaScript对象组成。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
相关文章
- JavaScript动画实例:炸开的小球
- JavaScript动画实例:烟花绽放迎新年
- JavaScript动画实例:沿五角星形线摆动的小圆
- JavaScript动画实例:曲线的绘制
- JavaScript动画实例:递归分形图动态展示
- JavaScript图形实例:正弦曲线
- 网页载入进度条中的javascript
- onload in JavaScript
- Chrome格式化JavaScript
- jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等) 初识document.onkeydown及其兼容性问题 js学习笔记27----键盘事件 JavaScript onkeydown事件入门实例(键盘某个按键被按下)
- JavaScript 常用实例
- 【学习笔记25】JavaScript字符串的基本认识
- 【学习笔记26】JavaScript字符串的方法
- javascript 设计模式
- JavaScript: setTimeout & setInterval
- 如何选择Javascript模板引擎(javascript template engine)?
- 《深入理解JavaScript》——1.11 异常捕获
- 《JavaScript面向对象精要》——1.4 内建类型实例化
- 《jQuery与JavaScript入门经典》——2.2 调试HTML元素
- H5中JavaScript常用代码片段
- JavaScript定时器详解及实例
- 浅析JavaScript中in操作符(for in/for of)、Object.keys()和Object.getOwnPropertyNames()的区别
- 快速掌握JavaScript面试基础知识(三)
- 华为OD机试 - 连续子串(JavaScript) | 机试题+算法思路+考点+代码解析 【2023】
- .Net 与 Javascript 混合编程系列
- javaScript 超时与间歇掉用
- 打开电邮附件要小心:新JavaScript勒索工具加密文件无解
- 记录下项目中常用到的JavaScript/JQuery代码一(大量实例)