在 JavaScript 中,我们能为原始类型添加一个属性或方法吗?
原始类型的方法
JavaScript 允许我们像使用对象一样使用原始类型(字符串,数字等)。JavaScript 还提供了这样的调用方法。我们很快就会学习它们,但是首先我们将了解它的工作原理,毕竟原始类型不是对象(在这里我们会分析地更加清楚)。
我们来看看原始类型和对象之间的关键区别。
一个原始值:
- 是原始类型中的一种值。
 - 在 JavaScript 中有 7 种原始类型:
string,number,bigint,boolean,symbol,null和undefined。 
一个对象:
- 能够存储多个值作为属性。
 - 可以使用大括号 
{}创建对象,例如:{name: "John", age: 30}。JavaScript 中还有其他种类的对象,例如函数就是对象。 
关于对象的最好的事儿之一是,我们可以把一个函数作为对象的属性存储到对象中。
let john = {
  name: "John",
  sayHi: function() {
    alert("Hi buddy!");
  }
};
john.sayHi(); // Hi buddy!
所以我们在这里创建了一个包含 sayHi 方法的对象 john。
许多内建对象已经存在,例如那些处理日期、错误、HTML 元素等的内建对象。它们具有不同的属性和方法。
但是,这些特性(feature)都是有成本的!
对象比原始类型“更重”。它们需要额外的资源来支持运作。
当作对象的原始类型
以下是 JavaScript 创建者面临的悖论:
- 人们可能想对诸如字符串或数字之类的原始类型执行很多操作。最好将它们作为方法来访问。
 - 原始类型必须尽可能的简单轻量。
 
而解决方案看起来多少有点尴尬,如下:
- 原始类型仍然是原始的。与预期相同,提供单个值
 - JavaScript 允许访问字符串,数字,布尔值和 symbol 的方法和属性。
 - 为了使它们起作用,创建了提供额外功能的特殊“对象包装器”,使用后即被销毁。
 
“对象包装器”对于每种原始类型都是不同的,它们被称为 String、Number、Boolean 和 Symbol。因此,它们提供了不同的方法。
例如,字符串方法 str.toUpperCase() 返回一个大写化处理的字符串。
用法演示如下:
let str = "Hello";
alert( str.toUpperCase() ); // HELLO
很简单,对吧?以下是 str.toUpperCase() 中实际发生的情况:
- 字符串 
str是一个原始值。因此,在访问其属性时,会创建一个包含字符串字面值的特殊对象,并且具有有用的方法,例如toUpperCase()。 - 该方法运行并返回一个新的字符串(由 
alert显示)。 - 特殊对象被销毁,只留下原始值 
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 没有任何方法
特殊的原始类型 null 和 undefined 是例外。它们没有对应的“对象包装器”,也没有提供任何方法。从某种意义上说,它们是“最原始的”。
尝试访问这种值的属性会导致错误:
alert(null.test); // error
总结
- 除 
null和undefined以外的原始类型都提供了许多有用的方法。我们后面的章节中学习这些内容。 - 从形式上讲,这些方法通过临时对象工作,但 JavaScript 引擎可以很好地调整,以在内部对其进行优化,因此调用它们并不需要太高的成本。
 
作业题
先自己做题目再看答案。
我能为字符串添加一个属性吗?
重要程度:️️️️️
思考下面的代码:
let str = "Hello";
str.test = 5;
alert(str.test);
你怎么想的呢,它会工作吗?会得到什么样的结果?
答案:
在微信公众号「技术漫谈」后台回复 10501 获取作业答案。
现代 JavaScript 教程:开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程。
在线免费阅读:https://zh.javascript.info
微信扫描下方二维码,关注公众号「技术漫谈」,订阅更多精彩内容。
在 JavaScript 中,我们能为原始类型添加一个属性或方法吗?的更多相关文章
- JavaScript中对象数组,如何给对象添加一个新属性
		
var a =[{name: 'Tom',age:20},{name: 'Tom2',age:22}] 现在给a数组中的第一个对象添加性别属性 a[0]['gender']='women' a[0][ ...
 - javascript中对象的每个实例都具有的属性和方法
 - 简单理解javascript中的原型对象,实现对之间共享属性和行为
		
javascript中提供了构造函数.可以方便的创建对象. 典型的构造函数例如以下: function Person(name, age) { this.name = name; this.age = ...
 - 【jquery】javaScript中prototype的妙用 巧妙运用prototype属性原型链创建对象
		
prototype 可以有好多有优化实现方法 http://blog.csdn.net/liuqiwen0512/article/details/8089690 在 JavaScript 中,每个函 ...
 - 为data中的某一个对象添加一个属性不起作用——this.$set的正确使用
		
this.$set(obj, key, value) 我们在项目开发的过程中,经常会遇到这种情况:为data中的某一个对象添加一个属性 <template> <div class=& ...
 - 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 ...
 - JavaScript 中的数字和日期类型
		
本章节介绍如何掌握Javascript里的数字和日期类型 数字EDIT 在 JavaScript 里面,数字都是双精度浮点类型的 double-precision 64-bit binary form ...
 - JavaScript中常用的几种类型检测方法
		
javascript中类型检测方法有很多: typeof instanceof Object.prototype.toString constructor duck type 1.typeof 最常见 ...
 - JavaScript中DOM节点层次Text类型
		
文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...
 
随机推荐
- 多测试_mysql数据库_09
			
什么是数据库? 是存放数据的电子仓库.以某种方式存储百万条,上亿条数据,供多个用户访问共享. 每个数据库都有一个或多个不同的api用于创建.访问,管理和复制所保存的数据. 数据库分关系型数据库和非关系 ...
 - 多测师讲解selenium _a标签定位()_高级讲师肖sir
			
shift+ctrl+c 快捷键 调出元素
 - MySQL【灵魂拷问】
			
MySQL 一直是本人薄弱的部分,后面会多总结 MySQL 的文章,毕竟 MySQL 涉及到数据存储.锁.磁盘寻道.分页等操作系统概念,而且互联网对 MySQL 的注重程度是不言而喻的,后面要加紧对 ...
 - day40 Pyhton 并发编程03
			
一.内容回顾 进程是计算机中最小的资源分配单位 进程与进程之间数据隔离,执行过程异步 为什么会出现进程的概念? 为了合理利用cpu,提高用户体验 多个进程是可以同时利用多个cpu的,可以实现并行的效果 ...
 - Go 安装配置golint
			
原文链接:http://zhoubotong.site/post/3.html一. Golint介绍 Golint 是一个源码检测工具用于检测代码规范 Golint 不同于gofmt, Gofmt用于 ...
 - zookeeper的管理功能
			
一,查看当前zookeeper的版本 [liuhongdi@localhost ~]$ echo stat|nc 127.0.0.1 2181 Zookeeper version: 3.5.6-c11 ...
 - property和setter装饰器
			
# property装饰器 # 作用: 将一个get方法转换为对象的属性. 就是 调用方法改为调用对象 # 使用条件: 必须和属性名一样 # setter方法的装饰器: # 作用:将一个set方法转换 ...
 - 小tip:CSS计数器+伪类实现数值动态计算与呈现【转】
			
[原文]http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/ 一.CSS计数器为 ...
 - Vue slot插槽通俗解释
			
slot内容分发是Vue的Api来源 <div id="app"> <my-list> {{msg}} </my-list> </div& ...
 - 教你如何帮助前端同学快速生成API接口代码
			
最近我们团队开源的后端微服务框架go-zero增长势头比较迅猛,这篇文章我讲讲go-zero对前端团队的作用,并通过一个示例来给大家演示我们是怎么做的,希望能给后端的同学也可以帮助前端同学提高开发效率 ...