最新公告
  • 欢迎您光临网站无忧模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • Js装箱拆箱

    正文概述 掘金(望月而溪)   2021-01-25   451
    装箱转换

    每一种基本类型 Number、String、Boolean、Symbol 在对象中都有对应的类,所谓装箱转换,正是把基本类型转换为对应的对象,它是类型转换中一种相当重要的种类。

    全局的 Symbol 函数无法使用 new 来调用,但我们仍可以利用装箱机制来得到一个 Symbol 对象,我们可以利用一个函数的 call 方法来强迫产生装箱。

    我们定义一个函数,函数里面只有 return this,然后我们调用函数的 call 方法到一个 Symbol 类型的值上,这样就会产生一个 symbolObject。

    我们可以用 console.log 看一下这个东西的 type of,它的值是 object,我们使用 symbolObject instanceof 可以看到,它是 Symbol 这个类的实例,我们找它的 constructor 也是等于 Symbol 的,所以我们无论从哪个角度看,它都是 Symbol 装箱过的对象:

        var symbolObject = (function(){ return this; }).call(Symbol("a"));
        console.log(typeof symbolObject); //object
        console.log(symbolObject instanceof Symbol); //true
        console.log(symbolObject.constructor == Symbol); //true
    

    装箱机制会频繁产生临时对象,在一些对性能要求较高的场景下,我们应该尽量避免对基本类型做装箱转换。

    使用内置的 Object 函数,我们可以在 JavaScript 代码中显式调用装箱能力。

        var symbolObject = Object(Symbol("a"));
        console.log(typeof symbolObject); //object
        console.log(symbolObject instanceof Symbol); //true
        console.log(symbolObject.constructor == Symbol); //true
    

    每一类装箱对象皆有私有的 Class 属性,这些属性可以用 Object.prototype.toString 获取:

        var symbolObject = Object(Symbol("a"));
        console.log(Object.prototype.toString.call(symbolObject)); //[object Symbol]
    

    在 JavaScript 中,没有任何方法可以更改私有的 Class 属性,因此 Object.prototype.toString 是可以准确识别对象对应的基本类型的方法,它比instanceof更加准确。

    但需要注意的是,call 本身会产生装箱操作,所以需要配合 typeof 来区分基本类型还是对象类型。

    拆箱转换

    在 JavaScript 标准中,规定了 ToPrimitive 函数,它是对象类型到基本类型的转换(即,拆箱转换)。

    对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换,把对象变成基本类型,再从基本类型转换为对应的 String 或者 Number。

    拆箱转换会尝试调用 valueOf 和 toString 来获得拆箱后的基本类型。如果 valueOf 和 toString 都不存在,或者没有返回基本类型,则会产生类型错误 TypeError。

        var o = {
            valueOf : () => {console.log("valueOf"); return {}},
            toString : () => {console.log("toString"); return {}}
        }
        o * 2
        // valueOf
        // toString
        // TypeError
    

    我们定义了一个对象 o,o 有 valueOf 和 toString 两个方法,这两个方法都返回一个对象,然后我们进行 o*2 这个运算的时候,你会看见先执行了 valueOf,接下来是 toString,最后抛出了一个 TypeError,这就说明了这个拆箱转换失败了。

    到 String 的拆箱转换会优先调用 toString。我们把刚才的运算从 o*2 换成 String(o),那么你会看到调用顺序就变了。

        var o = {
            valueOf : () => {console.log("valueOf"); return {}},
            toString : () => {console.log("toString"); return {}}
        }
       String(o)
        // toString
        // valueOf
        // TypeError
    

    toString()与valueOf()的区别

    一、toString()

    作用:toString()方法返回一个表示该对象的字符串

    二、valueOf( )

    作用:valueOf方法返回指定对象的原始值,Js会利用 valueOf() 方法用来把对象转换成原始类型的值(数值、字符串和布尔值)

    例子:

    var array = ['aa','bb','cc'];
    console.log(array.toString());
    console.log(array.valueOf());
    // 结果
    > aa,bb,cc
    > (3)["aa","bb","cc"]
    

    调用valueOf()

    对象返回值类型
    Array数组本身ArrayBooleanBoolean 值。BooleanDate存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。NumberFunction函数本身。FunctionNumber数字值。NumberObject对象本身。这是默认情况。ObjectString字符串String

    调用toString()

    对象返回值类型
    Array数组的元素被转换为字符串,这些字符串由逗号分隔,连接在一起。其操作与 Array.toString 和 Array.join 方法相同。StringBoolean字符串“true”,“false”StringDate字符串日期,如"Fri Dec 23 2016 11:24:47 GMT+0800 (中国标准时间)"StringFunction函数字符串StringNumber字符串形式值StringObject"[object Object]"StringString字符串String

    下载网 » Js装箱拆箱

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元