JS原始类型为什么能调用方法原理详解

 更新时间:2023年06月11日 11:08:23   作者:BigDipper  
这篇文章主要为大家介绍了JS原始类型为什么能调用方法原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

参考地址:原始类型的方法

假如,有这样一段代码,将字符串转换为大写:

let str = 'abc';
str.toUpperCase(); // 'ABC'

存储多个属性

这是一段简单又普通的代码,按说str是字符串类型,它存储的是一个单值,并且是不可变的,它不能像对象那样,可以存储多个属性,像这样:

let user = {};
user.name = '张三';
user.say = function () {
  return '你好';
};
user.name; // 张三
user.say(); // 你好

不能给普通类型添加属性

通过代码可以看到,不能给普通类型添加属性

let user = '';
user.name = '张三';
user.say = function () {
  return '你好';
};
user.age; // undefined
user.say(); //  user.say is not a function

那么,为什么原始类型(比如字符串)能够调用方法(比如toUpperCase())呢?

其原理是:为了使方法起作用,创建了提供额外功能的特殊“对象包装器”,使用后即被销毁

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

以之前的代码为例:

let str = 'abc';
str.toUpperCase(); // 'ABC'

实际发生的情况:

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

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

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

以上就是JS原始类型为什么能调用方法原理详解的详细内容,更多关于JS原始类型调用方法的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序获取用户openId的实现方法

    微信小程序获取用户openId的实现方法

    这篇文章主要介绍了微信小程序获取用户openId的实现方法的相关资料,需要的朋友可以参考下
    2017-05-05
  • 微信小程序 设置启动页面的两种方法

    微信小程序 设置启动页面的两种方法

    这篇文章主要介绍了 微信小程序 设置启动页面的方法的相关资料,这里对设置启动页面的两种方法分别介绍,需要的朋友可以参考下
    2017-03-03
  • uniApp学习之热门搜索,搜索数据页面缓存实例

    uniApp学习之热门搜索,搜索数据页面缓存实例

    这篇文章主要介绍了uniApp学习之热门搜索,搜索数据页面缓存实例,需要的朋友可以参考下
    2023-10-10
  • 一篇文章学会jsBridge的运行机制

    一篇文章学会jsBridge的运行机制

    JSBridge是一座用JavaScript搭建起来的桥,搭建这座桥的目的也很简单,让native可以调用web的js代码,让web可以 “调用” 原生的代码。本文主要通过分析源码讲解jsBridge的运行机制,感兴趣的朋友一起来看看吧
    2021-09-09
  • js类型判断内部实现原理示例详解

    js类型判断内部实现原理示例详解

    这篇文章主要为大家介绍了js类型判断内部实现原理示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 微信小程序本作用域下调用全局JS详解及实例

    微信小程序本作用域下调用全局JS详解及实例

    这篇文章主要介绍了微信小程序本作用域下调用全局JS详解及实例的相关资料,需要的朋友可以参考下
    2017-02-02
  • electron渲染进程主进程相互传值示例解析

    electron渲染进程主进程相互传值示例解析

    这篇文章主要为大家介绍了electron渲染进程主进程相互传值示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Javascript 常见的高阶函数详情

    Javascript 常见的高阶函数详情

    这篇文章主要介绍了Javascript 常见的高阶函数的相关资料,高阶函数,英文叫 Higher Order function。一个函数可以接收另外一个函数作为参数,这种函数就叫做高阶函数,需要的朋友可以参考一下
    2021-09-09
  • vue框架通用化解决个性化文字换行问题实例详解

    vue框架通用化解决个性化文字换行问题实例详解

    这篇文章主要为大家介绍了通用化解决个性化文字换行问题实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JavaScript 定时器详情

    JavaScript 定时器详情

    这篇文章主要介绍了JavaScript 定时器,在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法,下面来看看文章的详细介绍
    2021-11-11

最新评论