《JavaScript启示录》——1.6 从构造函数创建字面量值

简介: 在针对字符串、数字和布尔值使用字面量值时,只有在该值被视为对象的情况下才会创建实际的复杂对象。换句话说,在尝试使用与构造函数有关联的方法或检索属性(如var charactersInFoo = 'foo'.length)之前,一直在使用原始数据类型。

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

1.6 从构造函数创建字面量值

JavaScript提供了叫做“字面量”的快捷方式——用于创建大多数原生对象值,而不必使用new Foo()或new Bar()这样的方式。大多数情况下,字面量语法与使用new操作符的效果相同。但是也有例外:Number()、String()和Boolean(),请看下面的注释。

如果你有其他编程背景,可能更熟悉用字面量方式创建对象。下面我使用new操作符实例化原生JavaScript构造函数,然后创建相应的字面量等价形式。

<!DOCTYPE html><html lang="en"><body><script>

var myNumber = new Number(23); // 对象
var myNumberLiteral = 23; // 原始数字值,而非对象

var myString = new String('male'); // 对象
var myStringLiteral = 'male'; //原始字符值,而非对象

var myBoolean = new Boolean(false); // 对象
var myBooleanLiteral = false; //原始布尔值,而非对象

var myObject = new Object();
var myObjectLiteral = {};

var myArray = new Array('foo', 'bar');
var myArrayLiteral = ['foo', 'bar'];

var myFunction = new Function("x", "y", "return x*y");
var myFunctionLiteral = function (x, y) { return x * y };

var myRegExp = new RegExp('\bt[a-z]+\b');
var myRegExpLiteral = /\bt[a-z]+\b/;

// 验证创建自同样的构造函数的字面量

console.log(myNumber.constructor, myNumberLiteral.constructor);
console.log(myString.constructor, myStringLiteral.constructor);
console.log(myBoolean.constructor, myBooleanLiteral.constructor);
console.log(myObject.constructor, myObjectLiteral.constructor);
console.log(myArray.constructor, myArrayLiteral.constructor);
console.log(myFunction.constructor, myFunctionLiteral.constructor);
console.log(myRegExp.constructor, myRegExpLiteral.constructor);

</script></body></html>

这里你需要注意的是,在一般情况下,使用字面量只是隐藏了与使用new操作符相同的基本过程。重要的是,它方便多了!

但在原始字符串、数字和布尔值方面,事情变得更复杂了。在这些情况下,字面量值具有原始值的特点,而不是复杂对象值的特点。请查看如下注意事项。

注意

在针对字符串、数字和布尔值使用字面量值时,只有在该值被视为对象的情况下才会创建实际的复杂对象。换句话说,在尝试使用与构造函数有关联的方法或检索属性(如var charactersInFoo = 'foo'.length)之前,一直在使用原始数据类型。当这种情况发生时,JavaScript会在幕后为字面量值创建一个包装器对象,以便将该值视为一个对象。调用方法以后,JavaScript即抛弃包装器对象,该值返回字面量类型。这就是字符串、数字和布尔被认为是原始(或简单)数据类型的原因。我希望这能够澄清对“JavaScript中的所有东西都是对象”与“JavaScript中所有东西都用成对象”这两个概念的误解。

相关文章
|
1月前
|
JavaScript 前端开发
JS中的构造函数的含义和用法
构造函数是JavaScript中用于创建新对象的特殊函数,通常首字母大写。通过`new`关键字调用构造函数,可以初始化具有相同属性和方法的对象实例,从而实现代码复用。例如,定义一个`Person`构造函数,可以通过传入不同的参数创建多个`Person`对象,每个对象都有自己的属性值。此外,构造函数还可以包含方法,使每个实例都能执行特定的操作。构造函数的静态属性仅能通过构造函数本身访问。ES6引入了`class`语法糖,简化了类的定义和实例化过程。
29 1
|
1月前
|
存储 前端开发 JavaScript
JavaScript常用的内置构造函数
JavaScript提供的内置构造函数在数据处理、对象创建、异常处理和异步操作等方面发挥了重要作用。掌握这些构造函数及其用法,对于开发高效、可靠的JavaScript应用至关重要。通过合理使用这些内置构造函数,开发者可以更好地管理和操作各种类型的数据,提升开发效率和代码质量。
25 1
|
6月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
48 7
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-构造函数(也称为"类")定义
本文介绍了JavaScript中构造函数(也称为“类”)的定义和使用方法。
41 1
JavaScript基础知识-构造函数(也称为"类")定义
|
3月前
|
JavaScript 前端开发
JavaScript基础知识-对象字面量
文章介绍了JavaScript中对象字面量的创建和使用,包括基本语法、属性赋值以及如何在控制台输出对象属性。
43 0
JavaScript基础知识-对象字面量
|
4月前
|
存储 JavaScript 前端开发
JavaScript引用数据类型和构造函数的秘密
JavaScript引用数据类型和构造函数的秘密
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 构造函数模式
js设计模式【详解】—— 构造函数模式
53 6
|
6月前
|
JavaScript 前端开发
JavaScript进阶-模板字符串与增强的对象字面量
【6月更文挑战第19天】ES6的模板字符串和增强对象字面量提高了JavaScript的易读性和效率。模板字符串(` `)支持变量嵌入和多行,简化了字符串处理;增强对象字面量允许简写属性与方法,以及动态属性名。注意模板字符串的闭合和性能影响,以及对象字面量的简写语法和计算属性名的恰当使用。通过实例展示了这两项特性的应用,助力编写更优雅的代码。
110 4
|
6月前
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
55 2
|
7月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例