JS Tip

作者: jtsky | 来源:发表于2017-09-07 15:27 被阅读22次

关于this的判定规则

TIM图片20170907152656.png image.png

关于变量判定规则

微信图片_20170907153007.png

类型转换 (+运算符)

以下内容摘录自http://www.cnblogs.com/ziyunfei/archive/2012/09/15/2685885.html
加法运算符会触发三种类型转换:将值转换为原始值,转换为数字,转换为字符串,这刚好对应了JavaScript引擎内部的三种抽象操作:ToPrimitive(),ToNumber(),ToString()

1.1 通过ToPrimitive()将值转换为原始值

JavaScript引擎内部的抽象操作ToPrimitive()
有着这样的签名:
ToPrimitive(input, PreferredType?)
可选参数PreferredType可以是Number或者String,它只代表了一个转换的偏好,转换结果不一定必须是这个参数所指的类型,但转换结果一定是一个原始值.如果PreferredType被标志为Number,则会进行下面的操作来转换输入的值 (§9.1):
1、如果输入的值已经是个原始值,则直接返回它.
2、否则,如果输入的值是一个对象.则调用该对象的valueOf()方法.如果valueOf()方法的返回值是一个原始值,则返回这个原始值.
3、否则,调用这个对象的toString()方法.如果toString()方法的返回值是一个原始值,则返回这个原始值.
4、否则,抛出TypeError异常.
如果PreferredType被标志为String,则转换操作的第二步和第三步的顺序会调换.如果没PreferredType这个参数,则PreferredType的值会按照这样的规则来自动设置:Date类型的对象会被设置为String,其它类型的值会被设置为Number.

1.2 通过ToNumber()将值转换为数字

下面的表格解释了ToNumber()是如何将原始值转换成数字的
(§9.3).

image.png

如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, Number)将该对象
转换为原始值,然后在调用T
oNumber()将这个原始值转换为数字.

1.3 通过ToString()将值转换为字符串

下面的表格解释了ToString
()是如何将原始值转换成字符串的
(§9.8).

image.png
如果输入的值是一个对象,则会首先会调用ToPrimitive(obj, String)将该对象转换为原始值,然后再调用ToString()将这个原始值转换为字符串.

举个例子

有下面这样的一个加法操作.
value1 + value2
在计算这个表达式时,内部的操作步骤是这样的
1、将两个操作数转换为原始值 (下面是数学表示法,不是JavaScript代码):
prim1 := ToPrimitive(value1)
prim2 := ToPrimitive(value2)
PreferredType被省略,因此Date类型的值采用String,其他类型的值采用Number.
2、如果prim1或者prim2中的任意一个为字符串,则将另外一个也转换成字符串,然后返回两个字符串连接操作后的结果.
3、否则,将prim1和prim2都转换为数字类型,返回他们的和.

意想不到的结果

如果加号前面的第一个操作数是个空对象字面量,则结果会出乎我们的意料

> {} + {}
NaN

这是怎么一回事?原因就是JavaScript引擎将第一个{}解释成了一个空的代码块并忽略了它.NaN其实是后面的表达式+{}计算的结果 (加号以及后面的{}).这里的加号并不是代表加法的二元运算符,而是一个一元运算符,作用是将它后面的操作数转换成数字,和Number()函数完全一样

>[ ].valueOf() 
[ ]
>[ ].toString()
""
>{ }.valueOf() 
{ }
>{ }.toString()
[object Object]

valueOf():


image.png

toString():


image.png

相关文章

  • JS Tip

    关于this的判定规则 关于变量判定规则 类型转换 (+运算符) 以下内容摘录自http://www.cnblog...

  • 2018-07-22 局部组件的使用1

    vue.js:603 [Vue tip]: : component lists rendered with v-f...

  • js-cookie获取cookie值undefined的问题

    一开始设置了httponly为tru。Tip:在cookie中设置了HttpOnly属性,那么通过js脚本将无法读...

  • canvas

    Tip1.HTML Tip2.获取canvas 与绘画上下文 Tip2.2获取屏幕高宽 Tip2.3 橡皮擦 Ti...

  • 演讲学习打卡7/100 Public Speaking Tip-

    Public Speaking Tip 2 Sharing from Craig Valentine 52 tip...

  • 随手记

    Tips Tip1:float会使元素生成块级框Tip2:inline-block元素向下对齐Tip3:JavaS...

  • Vue点击按钮回到顶部

    1.在组件里进行按钮的样式设置 2.监听当前页面滚动位置 3.触发滚动事件 tip:main.js中设置,路由跳转...

  • 20 Editing Tips from Professiona

    TIP#1 Use adverbs very carefully TIP#2 Avoid sticky sente...

  • Tips

    Tip1 Restful API 不等于 JSON Tip2 RestController = RequestBo...

  • 宝宝陪玩小贴士

    ❤十个陪玩小贴士❤ Tip1:提前备课,坚持上课。 Tip2:设置专属游戏区域,清除无关杂物。 Tip3:选好上课...

网友评论

      本文标题:JS Tip

      本文链接:https://www.haomeiwen.com/subject/jyuijxtx.html