Javascript高级编程学习笔记(17)—— 引用类型(6)基本包装类

时间:2022-09-17 07:26:25

基本包装类

基本包装类这个概念或许有的小伙伴没有听说过

但是小伙伴们有没有想过,为什么基本数据类型的实例也有方法呢?

其实这些方法都来自基本包装类型

这是JS为了方便操作基础数据类型而创建的特殊引用类型

基本包装类有三种

1. Boolean类型

2. Number类型

3. String类型

执行过程

这三种基本包装类型的生命周期很短,只存在于代码执行的一瞬间

当这三种基本数据类型调用其基本包装类的方法时:

1.读取以上三种类型的基本数据类型时

2.创建一个基本包装类的实例

3.调用该实例上的方法,调用完成后销毁该实例

注意事项

1.不要显示地调用基本包装类的构造函数构建实例,因为很容易和基础数据类型混淆

2.对基本包装类调用 typeof 时返回 object

3.使用 Object 构造函数时,如参数传入三种基本类型则会返回一个该基础类型对应的基本包装类的实例

4.基本包装类,和同名的转型函数是有区别的,转型函数返回的是基础类型的值,基本包装类返回的是该值的实例

Javascript高级编程学习笔记(17)—— 引用类型(6)基本包装类

原理

在前面的文章中,我介绍了JS中没有重载,那么Number函数是怎么同时实现转型函数,以及基本包装类型的呢?

难道是 Number 的实现就是底层语言实现的重载吗?

答案显然不是

这里就涉及到 new 操作符的实现原理

new 操作符主要步骤是:

1.创建一个新的对象

2.将构造函数的执行环境设置为这个新对象,并执行构造函数

3.判断构造函数的返回值是否是一个对象

4.是一个对象则返回构造函数返回的对象,如不是一个对象则返回新创建的这个对象

大体实现如下:

function myNew(func,argument){
var obj = Objetc.create(func.prototype); // 创建新的对象,继承构造函数的原型对象
var result = func.applay(obj,argument); // 将构造函数在新对象的上下文中执行
if( typeof result === "object"){
return result;
}else{
return obj;
}
}

所以基本包装类的构造函数,可能是以这样的方式实现的(我没找到源码只是个人看法,大佬可以留言分享)

function Number(value){
var result; // 用于保存转换后的值
switch(typeof value){
case "number":
result = value;
break;
case "string":
// 将String转为Number
break;
// ....省略数值转换的部分
}
if (this===window || this === undefiend || this === null){
return result;
}else{ // 定义基本包装类的函数
this.toFixed = function(result){
// 实现功能
}
// 其他函数
}
}

至于实现过程为什么是这样的

因为在刚才的例子中,我们给Number传入字符串,发现字符被转换了

Javascript高级编程学习笔记(17)—— 引用类型(6)基本包装类

上图中的 [[PrimitiveValue]] 表示的是原始值

基本包装类型的方法

1.Boolean类型

  valueOf 返回基本类型值(true、false)

  toString 返回字符串(“true”、“false”)

  toLocaleString 返回值和 toString一致

  Ps: 最好不要在条件判断中使用Boolean类型,因为会很容易和Boolean值 true false 混淆

2.Number类型

  valueOf 返回基本类型数值

  toString、toLocaleString 返回数值的字符串形式

  toFixed() 传入小数位数,返回规定位数的小数形式表示

  toExponential()同样传入格式化的小数位数,返回科学计数法的小数

  toPrecision() 同样传入小数位数,选择合适的方式返回

3.String类型

  length属性 字符个数,当不是双字节字符时可能不准详见前文

  charAt()获取指定位置的字符

  charCodeAt()获取指定位置字符的字符编码

  concat()传入字符串,将传入的字符串和调用的字符串拼接到一起

  slice() 第一个参数 字符串起始位置 第二个参数最后结束字符后面的位置 传入负值会将负值与字符串长度相加

  substr() 第一个参数字符串起始位置 第二个参数要截取的字符串的长度 传入负值将第一个负的参数加上字符串长度,第二个负的字符串参数转为0

  substring()参数如slice一致 但是传入负数时会将参数转为0

  indexOf() 传入要查找的子字符串 第二个参数查找开始的位置 返回子字符串的位置,没有找到该字符串返回值为-1(从前往后找)

  lastIndexOf()与indexOf的作用一致,但是查找方向是从后往前找

  trim() 返回字符串副本,删除字符串的前缀空格与后缀空格,但不会删除字符串中间的空格

  toLowerCase()、toLocaleLowerCase() 字符串转为小写(toLocale方法更加稳妥)

  toUpperCase() 、 toLocaleUpperCase() 字符串转为大写

  match() 接收一个正则表达式(或正则对象),功能与 正则.exec()相同

  search() 接收正则表达式或正则实例,返回匹配字符串的下标,没找到返回-1,始终从前向后

  replace()第一个参数要替换的字符串(或正则),第二个参数用于替换的字符串 该字符串中支持以下特殊序列用于将正则的结果插入字符串

  split() 传入分割字符串的字符或正则,第二个参数用于规定返回数组的大小以免超出限制

  

  $$  $

  $&  与 RegExp.lastMatch相同

  $'    与 RegExp.leftContext相同

  $` 与 RegExp.rightContext相同

  $n   第n个捕获组

  $nn 第nn个捕获组

  localeCompare () 根据字母表比较字符串,具体行为跟地区有关

  此外 String 构造函数本身还有一个静态方法,fromCharCode 接收一个或多个字符编码,然后将其转为字符串

以上就是关于基本包装类的内容

  

Javascript高级编程学习笔记(17)—— 引用类型(6)基本包装类的更多相关文章

  1. Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象

    什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...

  2. Javascript高级编程学习笔记(15)—— 引用类型(4)RegExp类型

    JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...

  3. Javascript高级编程学习笔记(16)—— 引用类型(5) Function类型

    JS中许多有趣的地方都和函数脱不了联系 那么是什么让JS中的函数这么有趣呢? 我们一起来看看吧 Function类型 在JS中函数实际上就是对象,每个函数都是Function类型的实例,和JS的其他引 ...

  4. Javascript高级编程学习笔记(14)—— 引用类型(3)Date类型

    除了前两天介绍的Object.Array类型,Date应该就是JS中最常用的引用类型了 先介绍一下Date类型,该类型使用在Java的 java.until.Date 类的基础上构建的 使用UTC 1 ...

  5. Javascript高级编程学习笔记(13)—— 引用类型(2)Array类型

    除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了 并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别 今天就介绍一下JS中的Array的特别之处 区别 1 ...

  6. Javascript高级编程学习笔记(12)—— 引用类型(1)Object类型

    前面的文章中我们知道JS中的值分为两种类型 基础类型的值和引用类型的值 基础类型的值我已经大概介绍了一下,今天开始后面几天我会为大家介绍一下引用类型的值 Object类型 对象是引用类型的值的实例,在 ...

  7. Javascript高级编程学习笔记(3)—— JS中的数据类型(1)

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  8. Javascript高级编程学习笔记(23)—— 函数表达式(1)递归

    前面的文章中,我在介绍JS中引用类型的时候提过,JS中函数有两种定义方式 第一种是声明函数,即使用function关键字来声明 第二种就是使用函数表达式,将函数以表达式的形式赋值给一个变量,这个变量就 ...

  9. Javascript高级编程学习笔记(8)—— 变量

    日常更新~~ 变量 所有的编程语言中,变量都是赋予语言灵活性的根本所在. 那么JS中的变量又有那些与众不同的地方呢.? 按照ECMA-262的定义,JS的变量和其他编程语言的变量有很大的区别 其松散类 ...

随机推荐

  1. ubuntu桌面进不去,我跪了

    ubuntu12.04 输入密码正确,但仍然跳回到登陆界面,实在受不了啊! 不知道bug再哪里,但是有个方法真是屡试不爽啊.. ctrl+alt+f1切换到字符界面 /home/xxx/.Xautho ...

  2. iOS学习笔记---oc语言第八天

    属性 能在一定程度上简化代码,并且增强实例变量的访问安全性 属性的声明:使用@property声明属性  eg:@property NSSstring *name;相当于@interface中声明了两 ...

  3. 使用Animation实现摄像机动画

    项目剧情模块分给了我做,其中很重要的一个功能就是摄像机旋转平移等操作,本来打算使用Camera Path这个插件制作的,但是鉴于项目Unity版本还停留在4.3,低于插件要求版本,另外编辑器做出来是交 ...

  4. [未完成]关于枚举(Enum)

    今天总结一下枚举相关的知识.先附一段关于枚举的代码: package org.talend.core.model.param; import org.talend.core.i18n.Messages ...

  5. 图片延迟加载技术-Lazyload的应用

    我们在浏览图片量非常大的页面时,像淘宝商城商品展示.必应图片搜索这类网站,图片的加载非常流畅,其中就应用了图片延迟加载技术.本文讲解Lazyload图片加载插件,当我们打开页面时,首先在屏幕可视区域加 ...

  6. FreeRTOS——队列管理

    1. 队列主要用于任务与任务.中断与任务之间的消息传递. 2. 创建队列时,请注意队列中数据单元的长度. 3. 通常情况,队列被作为FIFO(先进先出)使用,即数据从队列尾写入,从队列首读.当然,数据 ...

  7. Linux centos系统安装后的基本配置,Linux命令

    一.centos系统安装后的基本配置 .常用软件安装 yum install -y bash-completion vim lrzsz wget expect net-tools nc nmap tr ...

  8. java面试题之----spring MVC的原理和MVC

    1.什么是mvc? 1.1原始比较初级的设计模式: 1.2 MVC设计模式 2MVC设计模式的优势与核心在于其能解耦和: 传统的设计模式相当于是一个串联的设计,只要其中一个环节出了问题便会使下一环节中 ...

  9. 【转】PHP中file_put_contents追加和换行

    在PHP的一些应用中需要写日志或者记录一些信息,这样的话. 可以使用fopen(),fwrite()以及 fclose()这些进行操作. 也可以简单的使用file_get_contents()和fil ...

  10. Qt Quick自定义样式一套

    弄了几个月的Qt,基本上以写上位机程序和工厂用的一些工具为主.老大的要求是快速.稳定.不出问题,不过他嫌.net要安装.还有升级(刚开始的时候由于这个出了些小问题),MFC开发东西又实在费劲,就让我找 ...