JS魔法堂:函数重载 之 获取变量的数据类型
Brief
有时我们需要根据入参的数据类型来决定调用哪个函数实现,就是说所谓的函数重载(function overloading)。因为JS没有内置函数重载的特性,正好给机会我们思考和实现一套这样的机制。
使用方式:
function foo(){
return dispatch(this, arguments)
}
foo["object,number"] = function(o, n){console.log(o.toString() + ":" + n)}
foo["string"] = function(s){console.log(s)}
foo["array"] = function(a){console.log(a[])}
机制实现:
;(function(e/*xports*/){
e.dispatch = function(thisValue, args){
var rSignature = getSignature(args)
for (var p in args.callee){
if (rSignature.test(p)){
return args.callee[p].apply(thisValue, args)
}
}
}
function getSignature(args){
var arg, types = []
for (var i = , len = args.length; i < len; ++i){
arg = args[i]
types.push(type(arg))
}
var rTypes = "^\\s*" + types.join("\\s*,\\s*") + "\\s*$"
return RegExp(rTypes)
}
function type(val){
// TODO
}
}(window))
那现在问题就落在type函数的实现上了!
关于获取变量的数据类型有typeof、Object.prototype.toString.call和obj.constructor.name三种方式,下面我们一起来了解一下!
typeof Operator
语法: typeof val
内部逻辑:
function typeof(val){
var ret = Type(val)
if (ret === "Reference"
&& IsUnresolvableReference(val)) return "undefined"
ret = GetValue(val)
ret = Type(ret)
return ret
}
Type(val)抽象操作的逻辑:
Undefined -> "undefined"
Null -> "object"
Boolean -> "boolean"
Number -> "number"
String -> "string"
Objecjt,若对象为native object并且没有[[Call]]内置方法,则返回"object"
若对象为native object或host object且有[[Call]]内置方法,则返回"function"
若对象为host object并且没有[[Call]]内置方法,则返回除"undefined"、"boolean"、"number"和"string"外的数据类型字符串。
native object,就是Math、{foo:1}、[]、new Object()和RegExp等JS规范中定义的对象,其中Math、RegExp等程序运行时立即被初始化的对象被称为built-in object。
host object,就是宿主环境提供的对象,如浏览器的window和nodejs的global。
从上述Type(val)抽象操作的逻辑得知:
1. typeof能清晰区分Boolean、Number、String和Function的数据类型;
2. 对于未声明和变量值为Undefined的变量无法区分,但对未声明的变量执行typeof操作不会报异常;
3. typeof对Null、数组和对象是无能的。
针对2、3点我们可以求助于 Object.prototype.toString.call(val) 。
Object.prototype.toString.call(val)
Object.prototype.toString.call(val)或({}).toString.call(val)均是获取val的内置属性[[Class]]属性值,并经过加工后返回。
内部逻辑:
function Object.prototype.toString(){
if (this === undefined) return "[object Undefined]"
if (this === null) return "[object Null]"
var o = ToObject(this)
var clazz = o.[[Class]]
return "[object " + clazz + "]"
}
注意:1. 由于内部硬编码null返回"[object Null]",因此虽然null本应不属于Object类型,但JS中我们依然将其当作Object来使用(历史+避免破坏已有库的兼容性,导致后来无法修正该错误了);
2. 即使入参为primitive value,但内部还是会对其进行装箱操作(通过ToObject抽象操作)。
那现在我们就需要了解一下[[Class]]内部属性了。
内部属性[[Class]]
在构造对象时会根据对象的类型设置[[Class]]的值,而其值类型为字符串。对于native object而言,其值范围是:Arguments
Array、Boolean、Date、Error、Function、JSON、Math、Number、Object、RegExp、String。对于host object而言,则用HTMLElement、HTMLDocument等了。
注意:[[Class]]是用于内部区分不同类型的对象。也就是仅支持JS语言规范和宿主环境提供的对象类型而已,而自定义的对象类型是无法存储在[[Class]]中。
function Foo(){}
var foo = new Foo()
console.log(({}).toString.call(foo)) // 显示[object Object]
于是我们需要求助于constructor.name属性了。
obj.constructor.name
function Foo(){}
var foo = new Foo()
console.log(foo.constructor.name) // 显示Foo
那如果采用匿名函数表达式的方式定义构造函数呢?只能说直接没辙,要不在构造函数上添加个函数属性来保存(如Foo.className="Foo"),要不自己构建一个类工厂搞定。
Implementaion of type function
综上所述得到如下实现:
/*
* 获取对象的数据类型
* @method type
* @param {Any} object - 获取数据类型的对象
* @param {Function} [getClass] - 用户自定义获取数据类型的方法
* @returns {String} 数据类型名称
*/
function type(o/*bject*/, g/*etClass*/){
var t = typeof o
if ("object" !== t) return t.replace(/^[a-z]/, function(l){return l.toUpperCase()}) var rType = /\s*\[\s*object\s*([-9a-z]+)\s*\]\s*/i
t = ({}).toString.call(o)
t = t.match(rType)[]
if ("Object" !== t) return t t = o.constructor.name
if (!t && arguments.callee(g) === "Function"){
t = g(o)
}
t = t || "Object"
return t
}
Consolusion
尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/5156912.html^_^肥子John
Thanks
http://segmentfault.com/q/1010000000669230
http://es5.github.io/#x15.2.4.2
JS魔法堂:函数重载 之 获取变量的数据类型的更多相关文章
- JS魔法堂:不完全国际化&本地化手册 之 实战篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- JS魔法堂:判断节点位置关系
一.前言 在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅. 二 ...
- JS魔法堂:属性、特性,傻傻分不清楚
一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
- JS魔法堂:那些困扰你的DOM集合类型
一.前言 大家先看看下面的js,猜猜结果会怎样吧! 可选答案: ①. 获取id属性值为id的节点元素 ②. 抛namedItem is undefined的异常 var nodes = documen ...
- JS魔法堂:精确判断IE的文档模式by特征嗅探
一.前言 苦逼的前端攻城狮都深受浏览器兼容之苦,再完成每一项功能前都要左顾右盼,生怕浏览器不支持某个API,生怕原生API内含臭虫因此判断浏览器类型和版本号成了不可绕过的一道关卡,而特征嗅探是继浏览器 ...
- JS魔法堂:追忆那些原始的选择器
一.前言 ...
- JS魔法堂:不完全国际化&本地化手册 之 理論篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- JS魔法堂:IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- JS魔法堂:jsDeferred源码剖析
一.前言 最近在研究Promises/A+规范及实现,而Promise/A+规范的制定则很大程度地参考了由日本geek cho45发起的jsDeferred项目(<JavaScript框架设计& ...
随机推荐
- 据说练就了一指禅神功的觅闻实时手机新闻网,正以每天2000+IP的用户量递增。有智能手机的可以当场进行体验,没有的就算了哈
据说练就了一指禅神功的觅闻实时手机新闻网,正以每天2000+IP的用户量递增.有智能手机的可以当场进行体验,没有的就算了哈 觅闻实时手机新闻网 http://m.yunxunmi.com 在IOS. ...
- NetMq学习--发布订阅(一)
基于NeqMq 4.0.0-rc5版本发布端: using (var publisher = new PublisherSocket()) { publisher.Bind("tcp://* ...
- Ubuntu Desktop安装及桌面美化(修复图片)
Ubuntu Desktop安装及桌面美化 1 开篇概述 本 系统的文章主要是讲互联网方向的开发主题.根据目前主流互联网公司的技术架构,Linux是必不可少的.对于一直习惯于在Windows下工作 ...
- C#Light(包括unity一切C#环境可用嵌入式脚本)0.10B稳定版发布,功能已定型
yo,如题,这个呕心沥血的脚本语言终于完成了. 后面我会: 1.逐渐做一些例子.说明 2.逐渐测试我能获取到的dotnet环境,保证在所有的平台都能正常执行 3.积极推广 0.10B版本较之前的区别主 ...
- 手把手教你用python打造网易公开课视频下载软件5-python生成exe程序
python程序生成exe文件,使用的是py2exe扩展包,下面写下具体的步骤: 第一步:新建conver2exe.py,内容如下: #coding:utf-8 from distutils.core ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(七):解决用户上下文(Session)问题
从这篇文章中我们已经了解了微信公众平台消息传递的方式,这种方式有一个先天的缺陷:不同用户的请求都来自同一个微信服务器,这使得常规的Session无法使用(始终面对同一个请求对象,况且还有对方服务器Co ...
- C/C++ char* arr与char arr[]的区别(反汇编解析)
写作日期:2016.08.31 修改日期:2016.09.01 .2016.09.02. 交流qq:992591601 用了几天时间复习了下C语言.对于C语言的字符串操作有些不习惯,于是作为练习,写下 ...
- Oracle常见名词解析
创建用户 概述:在oracle中要创建一个新的用户使用create user语句,一般是具有dba(数据库管理员)的权限才能使用. create user 用户名 identified by 密码; ...
- 我心中的核心组件(可插拔的AOP)~第十二回 IoC组件Unity
回到目录 说在前 Ioc组件有很多,之前也介绍过autofac,castle等,今天再来说一下在微软Nlayer DDD架构里使用的unity组件,今天主要说一下依靠注入,如果希望看拦截的用法,可以阅 ...
- Atitit 编程语言原理与概论attilax总结 三大书籍总结
Atitit 编程语言原理与概论attilax总结 三大书籍总结 编程语言原理(第10版) 目录: 第1章 预备知识第2章 主要程序设计语言的发展第3章 描述语法和语义第4章 词法分析和语法分析第5章 ...