为什么它能用length?原来是包装类这小子搞鬼

在 JavaScript 中,原始值是不能具有属性和方法的,因为属性和方法是对象独有的。但是 JavaScript 提供了包装类的机制,使得我们可以在原始值上使用属性和方法。

当我们访问原始类型的属性或方法时,JavaScript 会临时使用包装类来实现这一操作,然后立即销毁这个临时对象。例如,当我们使用 . 操作符访问字符串的 length 属性时,JavaScript 会将字符串转换为临时的包装类对象 ,获取其 length 属性值,然后立即销毁这个临时对象。

包装类

包装类提供了一种方便的方式来操作原始值,但需要注意保持包装类和原始类型之间的转换。如果我们对原始值进行修改,不会影响到原始值本身。

js 复制代码
 var num = 123
 num.a = 'hello'
 console.log(num.a);    

这段代码执行不会报错,会打印undefined,那这是为什么呢?我们继续往下看

js 复制代码
 var num = 123   //String()  Number()  Boolean()  Object()  Arry()  Date()  内部函数
 num.a = 'hello' 
// delete num.a
 console.log(num.a);   

没有报错是因为var num = 123解读成var num = new Number(123);但是num是一个原始值,会有一个delete删除num.a,所以打印undefined(访问对象不存在的属性时也会打印undefined)

上一篇对象文章juejin.cn/post/730124...说明 var num = new Number(123);new将num变成了对象 ,那么 num.a = 'hello' 合情合理,可以拿到hello。

但是它又可以乘法(对象是不能使用乘除等操作) ?
console.log(num*2) //打印246

说明num本质上还是原始类型

包装类考点

原始值身上能有属性和方法吗? 没有,为什么还能见到原始值身上有属性和方法?

js 复制代码
var arr =[1,2,3,4]
arr.length = 2
 console.log(arr); //可以打印数组[1,2] 
 var str = 'abcd'  
 console.log(str.length); //4
}

字符串str是原始类型,没有length属性,为什么可以打印4?

数组可以通过arr.length = 2改变数组长度,那字符串str可以吗?

js 复制代码
var arr =[1,2,3,4]
arr.length = 2
// console.log(arr);    //[1,2]
 var str = 'abcd'  
str.length = 2

console.log(str.length);

很显然字符串不能通过str.length = 2改变字符串长度。

那下面解决运行打印4的问题

js 复制代码
var arr =[1,2,3,4]
arr.length = 2
// console.log(arr);    //[1,2]
 var str = 'abcd'  
str.length = 2
// new String('abcd').length = 2  
console.log(str.length);//上面length属于 new String('abcd').length
// 构造函数天生有这个
//function String(s){
  //  this.length = 0
//}

字符串在调用str.length = 2时会产生new String('abcd').length = 2(包装类)这样一个代码,length属于它,同样它在调用后有一个delete删除它。

这篇文章juejin.cn/post/730124...讲到了String为实例对象==this,而构造函数会创建function String(s){this.length = 0}fun会遍历s,有几个就有多长,最后再把this.length返回,这样字符串就可以拥有长度了。这全都是包装类在搞鬼

相关推荐
mONESY27 分钟前
用 useRef 管理 Worker 线程,让你的页面不再卡顿
javascript
码林鼠3 小时前
2026前端面试题(二)
前端
vx-程序开发5 小时前
django医院预约挂号系统---附源码23353
java·javascript·spring boot·python·eclipse·django·php
宿6745 小时前
tsconfig.node.json
前端·javascript·vue.js
小杨互联网5 小时前
Cursor 前端 Dist 自动化逆向框架:/fr 流水线 · 4 脚本 · Vite/Webpack
前端·webpack·自动化·前端逆向框架·ai前端逆向框架
瑞码空间5 小时前
Web应用的多端部署之道:浏览器 · Electron · Docker
前端·docker·electron·浏览器·web
徐奥雯XUAOWEN5 小时前
Codex官网前端可抄吗?从技术视角深度解析与借鉴指南
前端
文艺理科生5 小时前
3 年,8 种方案,1 次重构:LangChain 记忆方案如何从混乱走向清晰
前端·后端·架构
lilian2335 小时前
Harmony os 技术实战|拼豆制图10:把取消、解析失败和保存失败写成可恢复状态机
java·javascript·华为·harmonyos
只会cv的小前端5 小时前
七巧低代码表单JS脚本教学
开发语言·javascript·低代码