原始类型的方法

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. 为了使它们起作用,创建了提供额外功能的特殊“对象包装器”,使用后即被销毁。

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

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

用法演示如下:

let str = "Hello";

alert( str.toUpperCase() ); // HELLO

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

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

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

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

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

let n = 1.23456;

alert( n.toFixed(2) ); // 1.23

我们将在后面 Number 类型字符串 章节中看到更多具体的方法。

构造器 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);

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

答案:

在微信公众号「技术漫谈」后台回复 10501 获取作业答案。


现代 JavaScript 教程:开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程

在线免费阅读:https://zh.javascript.info


微信扫描下方二维码,关注公众号「技术漫谈」,订阅更多精彩内容。

在 JavaScript 中,我们能为原始类型添加一个属性或方法吗?的更多相关文章

  1. JavaScript中对象数组,如何给对象添加一个新属性

    var a =[{name: 'Tom',age:20},{name: 'Tom2',age:22}] 现在给a数组中的第一个对象添加性别属性 a[0]['gender']='women' a[0][ ...

  2. javascript中对象的每个实例都具有的属性和方法

  3. 简单理解javascript中的原型对象,实现对之间共享属性和行为

    javascript中提供了构造函数.可以方便的创建对象. 典型的构造函数例如以下: function Person(name, age) { this.name = name; this.age = ...

  4. 【jquery】javaScript中prototype的妙用 巧妙运用prototype属性原型链创建对象

    prototype  可以有好多有优化实现方法 http://blog.csdn.net/liuqiwen0512/article/details/8089690 在 JavaScript 中,每个函 ...

  5. 为data中的某一个对象添加一个属性不起作用——this.$set的正确使用

    this.$set(obj, key, value) 我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性 <template> <div class=& ...

  6. vue-learning:41 - Vuex - 第二篇:const store = new Vue.Store(option)中option选项、store实例对象的属性和方法

    vuex 第二篇:const store = new Vue.Store(option)中option选项.store实例对象的属性和方法 import Vuex from 'vuex' const ...

  7. JavaScript 中的数字和日期类型

    本章节介绍如何掌握Javascript里的数字和日期类型 数字EDIT 在 JavaScript 里面,数字都是双精度浮点类型的 double-precision 64-bit binary form ...

  8. JavaScript中常用的几种类型检测方法

    javascript中类型检测方法有很多: typeof instanceof Object.prototype.toString constructor duck type 1.typeof 最常见 ...

  9. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

随机推荐

  1. Python数据类型--字典(dict)

    Python中的字典是键值对(key-value)的无序集合.每个元素包含"键"和"值"两部分,这两部分之间使用冒号分隔,表示一种对应关系.不同元素之间用逗号分 ...

  2. 多测试_常用linux命令_002

    linux 介绍 常用的操作系统(os): windows .dos.android.ios.unix.linux linux系统:是一个免费.开源的操作系统 支持多cpu,多用户,多线程的操作系统, ...

  3. 用-pthread替代-lpthread

    -pthread 在多数系统中,-pthread会被展开为"-D_REENTRANT -lpthread".作为编译参数可以通知系统函数开启多线程安全特性,比如将errno定义线程 ...

  4. 分布式锁结合SpringCache

    1.高并发缓存失效问题: 缓存穿透: 指查询一个一定不存在的数据,由于缓存不命中导致去查询数据库,但数据库也无此记录,我们没有将此次查询的null写入缓存,导致这个不存在的数据每次请求都要到存储层进行 ...

  5. 【暑假集训】HZOI2019 水站 多种解法

    题目内容 已知有一个\(n\)层的水站: \(W_i\)表示未操作之前第\(i\)层的已有水量: \(L_i\)表示第\(i\)个水站能够维持或者储存的水的重量: 表示在第\(P_i\)层进行减压放水 ...

  6. java9第5篇-Collection集合类的增强与优化

    我计划在后续的一段时间内,写一系列关于java 9的文章,虽然java 9 不像Java 8或者Java 11那样的核心java版本,但是还是有很多的特性值得关注.期待您能关注我,我将把java 9 ...

  7. lumen-ioc容器测试 (2)

    lumen-ioc容器测试 (1) lumen-ioc容器测试 (2) lumen-ioc容器测试 (3) lumen-ioc容器测试 (4) lumen-ioc容器测试 (5) lumen-ioc容 ...

  8. spring boot: 用thymeleaf嵌套循环展示多层数据(spring boot 2.3.2)

    一,什么情况下会用到嵌套循环? 当我们展示多个分类时,每个分类下又展示出推荐的前几个商品,   这时我们需要用到嵌套循环 看一个例子: 说明:刘宏缔的架构森林是一个专注架构的博客,地址:https:/ ...

  9. vue知识点11

    1. Vue.js 是什么       Vue是一套用于构建用户界面的渐进式框架 2. vue的环境搭建(Vue2 ) 3. 经典的hello world         new Vue({      ...

  10. 【多次实践】win10+ubuntu18.04lts双系统安装葵花宝典(安装篇)

    这个教程诞生的缘由很简单,吃的太饱,硬是要折腾,结果,这一折腾便是20余小时,故写此文,帮助后来者少走弯路! 在本文开始,请先允许我对网上很多类似的教程嗤之以鼻,很成功地让我走了很多的弯路,一些有效简 ...