浅析JS给原始数据类型加属性和方法为什么不报错

 更新时间:2023年11月14日 15:14:20   作者:全糖奶茶不加糖  
这篇文章主要想和大家一起探讨一下JavaScript中给原始数据类型添加属性和方法为什么不报错,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下

前言

近日看到一道阿里前端面试题,由于不了解JS包装类的特性,果然不出意外的做错了。题目如下:

var str = 'abc'
str += 1
var test = typeof (str)
if (test.length == 6) {
  test.sign = 'typeOf的返回结果可能为String'
}
console.log(test.sign) 

上述代码的输出结果是什么?报错?还是typeOf的返回结果可能为String?最终结果都不是上面两种,最后输出结果为undefined,为什么会这样呢?为什么彻底理解此类问题,我们有必要深入了解一下包装类。

我们都知道JavaScript中的数据类型分为两种,第一种是原始数据类型,另一种是引用数据类型(也称为复杂数据类型)。

原始数据类型

let a = 'hello'
let b = 123
let c = true
let u =undefined
let n = null

原始数据类型主要分为六种,如上述代码所示,字符串类型、Number类型、Boolean类型、undefined类型、null类型。还有一种是ES6新增的Symbol类型(表示独一无二的值,Symbol最大的用途是用来定义对象的唯一属性名)

特点

这些原始数据类型都是不可变的,这意味着它们的值一旦被创建,就不能被修改,也意味着不能给原始数据类型加属性和方法,属性和方法是对象独有的。在JavaScript中,变量存储原始数据类型的值,而不是直接存储数据本身。原始数据类型的比较是基于它们的值,而不是引用,因此两个具有相同值的原始数据类型变量将被认为相等。

引用数据类型

在JavaScript中,除了原始数据类型(字符串、数字、布尔、未定义、空值和符号)之外,还有一种复杂的数据类型,被称为引用数据类型。引用数据类型是一种用于存储和处理更复杂数据结构的数据类型。它们不直接包含实际数据,而是存储对数据的引用。JavaScript中的引用数据类型包括对象(Object)、数组(Array)、函数(Function)、正则表达式(RegExp)、日期(Date)等。下面简单介绍一下部分引用数据类型。

对象

对象是JavaScript中最常见的引用数据类型。它是一个无序的数据集合,包含键值对。每个键值对的键是字符串,值可以是任意数据类型,包括原始数据类型和其他引用数据类型。对象用花括号 {} 定义。例如:

    let person = {
        name : '小明',
        age: 18,
        hobby: basketball
    }

数组

数组是一种有序的集合,可以存储多个值,每个值可以是任意数据类型,包括原始数据类型和其他引用数据类型。数组用方括号 [] 定义。例如:

    let num =[1,2,3,4]

函数

函数是JavaScript中的一种对象,也是引用数据类型的一种。函数可以被定义、传递、赋值和作为参数传递给其他函数。函数用 function 关键字定义,如下:

function sayHello(){
    console.log("Hello")
}

正则表达式

正则表达式是一种用于匹配字符串模式的对象。它可以用于字符串的搜索、替换、分割等操作,提供了强大的文本处理功能。

    let pattern = /[0-9]+/; // 匹配一个或多个数字

日期

日期对象用于处理日期和时间。它提供了各种方法来操作日期和时间,例如获取年、月、日、时、分、秒等信息,以及执行日期和时间的计算。

 let nowDate = new Date();

引用数据类型在JavaScript中用于处理更复杂的数据结构和操作,它们提供了灵活性和功能性,使得JavaScript成为一种强大的编程语言。通过组合使用原始数据类型和引用数据类型,开发者可以处理各种类型的数据和问题。

介绍了一下JavaScript中的数据类型,接下来我们就可以讲解一下什么是包装类了。

在JavaScript中,包装类(Wrapper Objects)是一种特殊的对象,它们用来包装原始数据类型(如字符串、数字和布尔值),使其具备对象的方法和属性。这些包装类提供了对原始数据类型的操作,例如字符串的长度、数字的精度等。

我们在介绍原始数据类型的时候曾讲到过,原始数据类型都是不可变的,这意味着它们的值一旦被创建,就不能被修改,也意味着不能给原始数据类型加属性和方法,属性和方法是对象独有的 上述加粗字体这些规则的存在显然是必要的,正是有了这些规则,使得我们不能直接给原始数据随便添加属性和方法,这使得原始数据往往都是很简单的。而在我们的日常代码练习中,你一定有用到过一些原始类型数据自带的方法,比如字符串类型的数据往往都会自带一个length方法,它能够直接返回一个字符串的长度,由于上述规则的限定,显然我们不能直接修改字符串的长度。这确保的数据的完整性,使原始数据在创建后不会被无意或者恶意更改,尤其是在多线程或者并发编程环境中尤为重要。等等!我们刚刚不是讲到原始数据不能附加属性和方法吗?那字符串类型的length方法是哪来的呢?这就是我们要特别介绍的包装类。

包装类

包装类的设计正是为了给原始数据类型增加方法和属性。

在JavaScript引擎内部,会对原始数据类型进行了一些封装和包装,使其能够调用一些内置方法和属性。当你尝试访问原始数据类型的方法或属性时,JavaScript引擎会自动将原始数据类型包装成对应的包装对象,然后调用相应的方法或属性,然后再将包装对象销毁。这个过程被称为"自动包装"。例如,当你访问字符串的 length 属性时,JavaScript引擎会在内部将字符串包装成 String 对象,然后访问其 length 属性。这一切都是自动完成的,你无需手动创建包装对象。虽然原始数据类型不能附加自定义属性和方法,但这种自动包装机制使得它们可以调用一些内置的属性和方法,使其更方便。不过需要注意,包装对象在访问完成后会被销毁,所以无法在原始数据类型上保留自定义属性或方法。如果需要自定义属性和方法,通常会使用对象类型来实现。

了解了这些,我们再回到最初看到那道面试题,尝试着去分析它,相信问题就迎刃而解了。

var str = 'abc'
str += 1
var test = typeof (str)
if (test.length == 6) {
  test.sign = 'typeOf的返回结果可能为String'
}
console.log(test.sign) 

分析题目

  • str是一个字符串类型,当它和1相加时我们能够知道,字符串和其他东西相加会将它‘同化’最终也变为字符串,于是,我们得到得str变为'abc1'。
  • typeof会读取到一个数据并返回它的类型,最终我们得到test被赋值为string.
  • 由于string的长度为6,进入if判断语句。
  • 但是test为字符串类型,为原始数据,它本身不能添加属性和方法,但由于包装类存在的缘故,test.sign = 'typeOf的返回结果可能为String' 会被执行为:new String(test).sign = 'typeOf的返回结果可能为String' 然后delete被销毁掉。
  • 接着,我们退出if语句,控制台输出test.sign,由于我们之前创建的test.sign已经被销毁,但此时又读到了test.sign,JavaScript引擎又会生成 *new String(test).sign *
  • 但由于 new String(test).sign并未被赋值,所以最终我们得到结果:undefined。

以上就是浅析JS给原始数据类型加属性和方法为什么不报错的详细内容,更多关于JS原始数据类型的资料请关注脚本之家其它相关文章!

相关文章

  • 火狐下table中创建form导致两个table之间出现空白

    火狐下table中创建form导致两个table之间出现空白

    js加入form导致两个table之间出现空白,还有另一种说法在table中创建form表单是不符合DOM标准的,会导致post失效,以及js数据传输失效
    2013-09-09
  • js中函数的length是多少

    js中函数的length是多少

    本文主要介绍了js中函数的length是多少,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript基础之this和箭头函数详析

    JavaScript基础之this和箭头函数详析

    这篇文章主要给大家介绍了关于JavaScript基础之this和箭头函数的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • 原生js FileReader对象实现图片上传本地预览效果

    原生js FileReader对象实现图片上传本地预览效果

    这篇文章主要介绍了原生js FileReader对象实现图片上传本地预览效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JavaScript 中文转拼音实现代码 有些bug

    JavaScript 中文转拼音实现代码 有些bug

    在做项目时候遇到一个小小的显示客户部门名称(拼音)的业务,就是在部门名称下有相应的拼音,而在现有的数据库中没有相应字段,并且部门数量比较多,添加起来比较费时,就想能否在js中实现,在页面中处理。
    2010-03-03
  • javascript拖拽应用实例

    javascript拖拽应用实例

    这篇文章主要为大家详细介绍了javascript拖拽应用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js仿苹果iwatch外观的计时器代码分享

    js仿苹果iwatch外观的计时器代码分享

    这篇文章主要介绍了JS+CSS3实现的类似于苹果iwatch计时器特效,很实用的代码,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • openlayers实现地图测距测面

    openlayers实现地图测距测面

    这篇文章主要为大家详细介绍了openlayers实现地图测距测面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 前端JS获取URL参数的4种方法总结

    前端JS获取URL参数的4种方法总结

    通过url传递参数是我们在开发中经常用到的一种传参方法,下面这篇文章主要给大家介绍了关于前端JS获取URL参数的4种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • JavaScript下拉菜单功能实例代码

    JavaScript下拉菜单功能实例代码

    这篇文章主要介绍了JavaScript下拉菜单实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03

最新评论