javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS原始数据类型

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

作者:全糖奶茶不加糖

这篇文章主要想和大家一起探讨一下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) 

分析题目

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

您可能感兴趣的文章:
阅读全文