在 JavaScript 中,我们能为原始类型添加一个属性或方法吗?

简介: 在 JavaScript 中,我们能为原始类型添加一个属性或方法吗?

原始类型的方法


JavaScript 允许我们像使用对象一样使用原始类型(字符串,数字等)。JavaScript 还提供了这样的调用方法。我们很快就会学习它们,但是首先我们将了解它的工作原理,毕竟原始类型不是对象(在这里我们会分析地更加清楚)。


我们来看看原始类型和对象之间的关键区别。


一个原始值:


  • 是原始类型中的一种值。
  • 在 JavaScript 中有 7 种原始类型:stringnumberbigintbooleansymbolnullundefined

一个对象:

  • 能够存储多个值作为属性。
  • 可以使用大括号 {} 创建对象,例如:{name: "John", age: 30}。JavaScript 中还有其他种类的对象,例如函数就是对象。


关于对象的最好的事儿之一是,我们可以把一个函数作为对象的属性存储到对象中。


let john = {
  name: "John",
  sayHi: function() {
    alert("Hi buddy!");
  }
};
john.sayHi(); // Hi buddy!


所以我们在这里创建了一个包含 sayHi 方法的对象 john

许多内建对象已经存在,例如那些处理日期、错误、HTML 元素等的内建对象。它们具有不同的属性和方法。


但是,这些特性(feature)都是有成本的!

对象比原始类型“更重”。它们需要额外的资源来支持运作。


当作对象的原始类型


以下是 JavaScript 创建者面临的悖论:


  • 人们可能想对诸如字符串或数字之类的原始类型执行很多操作。最好使用方法来访问它们。
  • 原始类型必须尽可能简单轻量。


而解决方案看起来多少有点尴尬,如下:


  1. 原始类型仍然是原始的。与预期相同,提供单个值
  2. JavaScript 允许访问字符串,数字,布尔值和 symbol 的方法和属性。
  3. 为了使它们起作用,创建了提供额外功能的特殊“对象包装器”,使用后即被销毁。

“对象包装器”对于每种原始类型都是不同的,它们被称为 StringNumberBooleanSymbolBigInt。因此,它们提供了不同的方法。


例如,字符串方法 str.toUpperCase()[1] 返回一个大写化处理的字符串。


用法演示如下:


let str = "Hello";
alert( str.toUpperCase() ); // HELLO


很简单,对吧?以下是 str.toUpperCase() 中实际发生的情况:

  1. 字符串 str 是一个原始值。因此,在访问其属性时,会创建一个包含字符串字面值的特殊对象,并且具有可用的方法,例如 toUpperCase()
  2. 该方法运行并返回一个新的字符串(由 alert 显示)。
  3. 特殊对象被销毁,只留下原始值 str


所以原始类型可以提供方法,但它们依然是轻量级的。


JavaScript 引擎高度优化了这个过程。它甚至可能跳过创建额外的对象。但是它仍然必须遵守规范,并且表现得好像它创建了一样。


数字有其自己的方法,例如,toFixed(n)[2] 将数字舍入到给定的精度:


let n = 1.23456;
alert( n.toFixed(2) ); // 1.23


我们将在后面 info:number 和 info:string 章节中看到更多具体的方法。


构造器 String/Number/Boolean 仅供内部使用


像 Java 这样的一些语言允许我们使用 new Number(1)new Boolean(false) 等语法,明确地为原始类型创建“对象包装器”。


在 JavaScript 中,由于历史原因,这也是可以的,但极其 不推荐。因为这样会出问题。

例如:


alert( typeof 0 ); // "number"
alert( typeof new Number(0) ); // "object"!


对象在 if 中始终为真,所以此处的 alert 将显示:


let zero = new Number(0);
if (zero) { // zero 为 true,因为它是一个对象
  alert( "zero is truthy?!?" );
}


另一方面,调用不带 new(关键字)的 String/Number/Boolean 函数是可以的且有效的。它们将一个值转换为相应的类型:转成字符串、数字或布尔值(原始类型)。

例如,下面完全是有效的:


let num = Number("123"); // 将字符串转成数字


null/undefined 没有任何方法


特殊的原始类型 nullundefined 是例外。它们没有对应的“对象包装器”,也没有提供任何方法。从某种意义上说,它们是“最原始的”。


尝试访问这种值的属性会导致错误:


alert(null.test); // error


总结


  • nullundefined 以外的原始类型都提供了许多有用的方法。我们后面的章节中学习这些内容。
  • 从形式上讲,这些方法通过临时对象工作,但 JavaScript 引擎可以很好地调整,以在内部对其进行优化,因此调用它们并不需要太高的成本。


习题


先自己做题目再看答案。


我能为字符串添加一个属性吗?


重要程度:🌟🌟🌟🌟🌟

思考下面的代码:


let str = "Hello";
str.test = 5;
alert(str.test);

你怎么想的呢,它会工作吗?会得到什么样的结果?


答案


请见:原始类型的方法章节习题和答案

目录
相关文章
|
13天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
13天前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
12天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
18天前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
12天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
12天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
29 7
|
12天前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
13天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
13天前
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。
|
13天前
|
JavaScript 前端开发 开发者