js的强转是我们很容易遇到坑的一个地方 比如 == 会产生很有意思的事情(使用===还是最佳实践的)  或者+new Date()一个当前的数字时间戳  这里面都涉及到强转  下面分享下学习强转的过程

简单理解强转   强转是指强制将一种类型的对象或者实体转换成另一种的行为(也就是这种转换的行为不是你主动控制的 区别类型的显示转换) 在发生强转的时候,js总是将一个复杂的对象转化为一个基础的类型值

        var num = 1111;
var b = "" + num;
typeof b; //string
var c = "10";
var d = +c;
typeof d; //number

js在实现强转的时候,会通过调用toString()或者valueOf()返回对象的默认值,这里面涉及到一个抽象操作ToPrimitive  下面是强转的流程

抽象操作ToPrimitive(input,PreferredType)   -->  调用对象内部的[[DefaultValue]] ,[[DefaultValue]]接收PreferredType  --> 调用对象的ValueOf()或者toString()方法

所以当我们在创建自定义对象的,希望在转换基本值的时候,对象能按照我们的要求去进行一些操作,就需要在对象的原型上实现toString()和valueOf()方法 并且确保他们能按照我们的意图进行调用

        var person = function(name,age) {
this.name = name;
this.age = age;
};
person.prototype.toString = function() {
return 'hi' + this.name;
};
person.prototype.valueOf = function() {
return this.age;
};
var test = new person("haha",18);
console.log(+test); //18
console.log(test + ''); //18 在转换成字符串的时候和数字的时候 都调用了我们设置的valueOf方法 并不合理 问题出现在了toPrimitive中

下面是ES6中关于toPrimitive的描述

简单的理解就是它会根据hint也就是PreferredType调用[[DefaultValue]]方法,然后调用toString()或者valueOf()方法  为什么date对象上能实现可控的toString()和valueOf方法调用呢

在规范中对Date对象和Symbol对象进行了处理 所以他能按照我们的需要去调用toString()或者valueOf()方法 但是在自定义对象上呢 我们是无法传入hint值的,在没有hint值的情况下会默认hint值为“number”,就会导致上面的例子的出现 如果要达到我们的要求就需要一些小的技巧

插播  valueOf方法  在Object上的方法,返回对象的原始值,在js中许多的内置对象都重新定义了该方法 例如在数组对象上调用valueOf方法会返回数组的实例对象

        var test = new person("haha",18);
console.log(+test); //
console.log([test] + ''); //hihaha

通过改写上面的例子 将test用数组进行包裹 在toPrimitive方法的时候 会返回数组对象  toPrimitive会继续调用返回基础值,导致对数组每一个元素的toString()方法的调用 所以达到了我们的要求

js 强转规范解读的更多相关文章

  1. html、css、js的命名规范

    最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...

  2. js的命名规范

                   js的命名规范   1.驼峰命名法:首字母是小写的,接下来的字母都以大写字符开头.例如: var testValue = 0; var oneValue = 10; 2. ...

  3. [JavaScript] 后端js的模块化规范CommonJs

    CommonJs概述 主要是单个文件定义的变量,函数,类都是私有的,其他文件不可见,单位的作用域 通过 exports(modules.exports)对外暴露接口,通过 require 加载模块 n ...

  4. js的模块化规范

    js的模块化规范常见的有:AMD,CMD,commonJS,UMD,es6 前期在没有模块化的时候,js文件十分庞大,于是就按功能抽离划分为多个js文件. 但是在html页面通过script的方式加载 ...

  5. JS详细图解全方位解读this

    JS详细图解全方位解读this 对于this指向的理解中,有这样一种说法:谁调用它,this就指向谁.在我刚开始学习this的时候,我是非常相信这句话的.因为在一些情况下,这样理解也还算说得通.可是我 ...

  6. ULID规范解读与实现原理

    前提 最近发现各个频道推荐了很多ULID相关文章,这里对ULID的规范文件进行解读,并且基于Java语言自行实现ULID,通过此实现过程展示ULID的底层原理. ULID出现的背景 ULID全称是Un ...

  7. 前端js的书写规范和高效维护的方案_自我总结使用的方案

    作为程序员,人生最值得幸福的事有几件: 解决困扰了很长时间的问题 升职加薪 找个漂亮又靠谱的对象 深得领导的喜欢 带领团队冲锋陷阵 ... 哈哈,这些都是梦想,暂时想想就好了.这肯定和我说的东西不符合 ...

  8. js 模块化的规范

           The Module Pattern,模块模式,也译为模组模式,是一种通用的对代码进行模块化组织与定义的方式.这里所说的模块(Modules),是指实现某特定功能的一组方法和代码.许多现 ...

  9. JS前端编码规范

    转自<前端编码规范之JavaScript>,网址:http://www.cnblogs.com/hustskyking/p/javascript-spec.html 一个是保持代码的整洁美 ...

随机推荐

  1. IOS系列swift语言之课时二

    今天我们要讲的就是函数[对于函数,在最后面还有几道题,喜欢的博友可以看了自己做一下,和我交流一下] 当然这与我们的c语言还是有一定的共同之处的,对于有一些c语言或者是java基础的童鞋,我觉得是很容易 ...

  2. 【Win 10应用开发】如何知道UAP在哪个平台上运行

    面向22世纪的现代化应用程序可以同时在多种设备上运行,于是有朋友会有一个疑问:有时候,我们还真的需要判断一下,UAP应用程序在哪个平台上运行.尽管大多情况下我们不必要这样做,但某些特殊情况还得考虑.比 ...

  3. markdown语法练习

    Markdown练习 这篇文章 主要用于练习markdown各种基本语法. 这篇文章 主要用于练习markdown各种基本语法. 1.标题设置 1.通过在文字下方添加"="或者&q ...

  4. ueditor的配置和使用

    ueditor下载好之后直接复制到项目的WebContent目录下,并将ueditor\jsp\lib下的jar包复制或者剪切到项目的lib目录下.先看一下效果,如下: 1.文件的上传 首先在uedi ...

  5. hdu 2222 Keywords Search(AC自动机)

    /* 啥也不说了,直接套模板... */ 1 #include<iostream> #include<map> #include<string> #include& ...

  6. DOM扩展-HTML5、专有扩展

     HTML5 与类相关的扩充 1.getElementsByClassName()方法 改方法接受一个参数,即一个包含一或多个类名的字符串,返回带有指定类的所有元素的NodeList.传入多个类型时, ...

  7. 搞清arguments,callee,caller

    arguments是什么? arguments是函数调用时,创建的一个类似的数组但又不是数组的对象,并且它存储的是实际传递给函数的参数,并不局限于函数声明的参数列表哦. 尼玛,什么意思? 写个demo ...

  8. Objective-C中的类目,延展,协议

    Objective-C中的类目(Category),延展(Extension),协议(Protocol)这些名词看起来挺牛的,瞬间感觉OC好高大上.在其他OOP语言中就没见过这些名词,刚看到这三个名词 ...

  9. Android随笔之——模拟按键操作的几种方式

    前几天转过一篇Android上模拟按键操作.触屏事件的博客,昨天又去找了百度.谷歌了一下,写了一点简单的测试代码,留待不时之需.有需要看之前转载的那篇博客的请看这里→_→转:Android随笔之——使 ...

  10. Java中写文件操作

    OutputStream 和 Writer OutputStream类(直接操作byte数组) 该类是字节输出流的抽象类,定义了输出流的各种操作方法.如下图是OutputStream的层次结构: By ...