服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > 开发教程 > JavaScript教程 >

JavaScript类型的那些事

时间:2016-01-19 10:23来源:未知 作者:最模板 点击:
JavaScript的类型判断是前端工程师们每天代码中必备的部分,每天肯定会写上个很多遍if (a === xxx)或if (typeof a === object)类似的类型判断语句,所以掌握JavaScript中类型判断也是前端必备技能

JavaScript 的类型判断是前端工程师们每天代码中必备的部分,每天肯定会写上个很多遍 if (a === 'xxx') 或 if (typeof a === 'object') 类似的类型判断语句,所以掌握 JavaScript 中类型判断也是前端必备技能,以下会从JavaScript 的类型,类型判断以及一些内部实现来让你深入了解 JavaScript 类型的那些事。

类型

JavaScript 中类型主要包括了 primitive 和 object 类型,其中primitive 类型包括了: null 、 undefined 、 boolean 、 number 、string 和 symbol(es6) 。其他所有的都为 object 类型。

类型判断

类型检测主要包括了: typeof 、 instanceof 和 toString 的三种方式来判断变量的类型。

typeof

typeof 接受一个值并返回它的类型,它有两种可能的语法:

  • typeof x
  • typeof(x)

当在 primitive 类型上使用 typeof 检测变量类型时,我们总能得到我们想要的结果,比如:

typeof 1; // "number"  
typeof ""; // "string"  
typeof true; // "boolean"  
typeof bla; // "undefined"  
typeof undefined; // "undefined"  

而当在 object 类型上使用 typeof 检测时,有时可能并不能得到你想要的结果,比如:

typeof []; // "object"  
typeof null; // "object"  
typeof /regex/ // "object"  
typeof new String(""); // "object"  
typeof function(){}; // "function"  

这里的 [] 返回的确却是 object ,这可能并不是你想要的,因为数组是一个特殊的对象,有时候这可能并不是你想要的结果。

对于这里的 null 返回的确却是 object ,wtf,有些人说 null 被认为是没有一个对象。

当你对于 typeof 检测数据类型不确定时,请谨慎使用。

toString

typeof 的问题主要在于不能告诉你过多的对象信息,除了函数之外:

typeof {key:'val'}; // Object is object  
typeof [1,2]; // Array is object  
typeof new Date; // Date object  

而 toString 不管是对于 object 类型还是 primitive 类型,都能得到你想要的结果:

var toClass = {}.toString;

console.log(toClass.call(123));  
console.log(toClass.call(true));  
console.log(toClass.call(Symbol('foo')));  
console.log(toClass.call('some string'));  
console.log(toClass.call([1, 2]));  
console.log(toClass.call(new Date()));  
console.log(toClass.call({  
    a: 'a'
}));

// output
[object Number]
[object Boolean]
[object Symbol]
[object String]
[object Array]
[object Date]
[object Object]

在 underscore 中你会看到以下代码:

// Add some isType methods: isArguments, isFunction, isString, isNumber, isDate, isRegExp.
  each(['Arguments', 'Function', 'String', 'Number', 'Date', 'RegExp'], function(name) {
    _['is' + name] = function(obj) {
      return toString.call(obj) == '[object ' + name + ']';
    };
  });

这里就是使用 toString 来判断变量类型,比如你可以通过_.isFunction(someFunc) 来判断 someFunc 是否为一个函数。

从上面的代码我们可以看到 toString 是可依赖的,不管是 object 类型还是primitive 类型,它都能告诉我们正确的结果。但它只可以用于判断内置的数据类型,对于我们自己构造的对象,它还是不能给出我们想要的结果,比如下面的代码:

function Person() {  
}

var a = new Person();  
// [object Object]
console.log({}.toString.call(a));  
console.log(a instanceof Person);  

我们这时候就要用到我们下面介绍的 instanceof 了。

instanceof

对于使用构造函数创建的对象,我们通常使用 instanceof 来判断某一实例是否属于某种类型,例如: a instanceof Person ,其内部原理实际上是判断Person.prototype 是否在 a 实例的原型链中,其原理可以用下面的函数来表达:

function instance_of(V, F) {  
  var O = F.prototype;
  V = V.__proto__;
  while (true) {
    if (V === null)
      return false;
    if (O === V)
      return true;
    V = V.__proto__;
  }
}

// use
function Person() {  
}
var a = new Person();

// true
console.log(instance_of(a, Person));  

类型转换

因为 JavaScript 是动态类型,变量是没有类型的,可以随时赋予任意值。但是各种运算符或条件判断中是需要特定类型的,比如 if 判断时会将判断语句转换为布尔型。下面就来深入了解下 JavaScript 中类型转换。

ToPrimitive

当我们需要将变量转换为原始类型时,就需要用到 ToPrimitive ,下面的代码说明了 ToPrimitive 的内部实现原理:

// ECMA-262, section 9.1, page 30. Use null/undefined for no hint,
// (1) for number hint, and (2) for string hint.
function ToPrimitive(x, hint) {  
  // Fast case check.
  if (IS_STRING(x)) return x;
  // Normal behavior.
  if (!IS_SPEC_OBJECT(x)) return x;
  if (IS_SYMBOL_WRAPPER(x)) throw MakeTypeError(kSymbolToPrimitive);
  if (hint == NO_HINT) hint = (IS_DATE(x)) ? STRING_HINT : NUMBER_HINT;
  return (hint == NUMBER_HINT) ? DefaultNumber(x) : DefaultString(x);
}

// ECMA-262, section 8.6.2.6, page 28.
function DefaultNumber(x) {  
  if (!IS_SYMBOL_WRAPPER(x)) {
    var valueOf = x.valueOf;
    if (IS_SPEC_FUNCTION(valueOf)) {
      var v = %_CallFunction(x, valueOf);
      if (IsPrimitive(v)) return v;
    }

    var toString = x.toString;
    if (IS_SPEC_FUNCTION(toString)) {
      var s = %_CallFunction(x, toString);
      if (IsPrimitive(s)) return s;
    }
  }
  throw MakeTypeError(kCannotConvertToPrimitive);
}

// ECMA-262, section 8.6.2.6, page 28.
function DefaultString(x) {  
  if (!IS_SYMBOL_WRAPPER(x)) {
    var toString = x.toString;
    if (IS_SPEC_FUNCTION(toString)) {
      var s = %_CallFunction(x, toString);
      if (IsPrimitive(s)) return s;
    }

    var valueOf = x.valueOf;
    if (IS_SPEC_FUNCTION(valueOf)) {
      var v = %_CallFunction(x, valueOf);
      if (IsPrimitive(v)) return v;
    }
  }
  throw MakeTypeError(kCannotConvertToPrimitive);
}

上面代码的逻辑是这样的:

  1. 如果变量为字符串,直接返回
  2. 如果 !IS_SPEC_OBJECT(x) ,直接返回
  3. 如果 IS_SYMBOL_WRAPPER(x) ,则抛出异常
  4. 否则会根据传入的 hint 来调用 DefaultNumber 和 DefaultString ,比如如果为 Date 对象,会调用 DefaultString
    1. DefaultNumber :首先 x.valueOf ,如果为 primitive ,则返回valueOf 后的值,否则继续调用 x.toString ,如果为 primitive ,则返回 toString 后的值,否则抛出异常
    2. DefaultString :和 DefaultNumber 正好相反,先调用 toString ,如果不是 primitive 再调用 valueOf

那讲了实现原理,这个 ToPrimitive 有什么用呢?实际很多操作会调用ToPrimitive ,比如 加 、 相等 或 比较 操。在进行 加 操作时会将左右操作数转换为 primitive ,然后进行相加。

下面来个实例, ({}) + 1 (将 {} 放在括号中是为了内核将其认为一个代码块)会输出啥?可能日常写代码并不会这样写,不过网上出过类似的面试题。

加 操作只有左右运算符同时为 String 或 Number 时会执行对应的%_StringAdd 或 %NumberAdd ,下面看下 ({}) + 1 内部会经过哪些步骤:

  1. {} 和 1 首先会调用 ToPrimitive
  2. {} 会走到 DefaultNumber ,首先会调用 valueOf ,返回的是 Object {},不是 primitive 类型,从而继续走到 toString ,返回 [object Object] ,是 String 类型
  3. 最后加操作,结果为 [object Object]1

再比如有人问你 [] + 1 输出啥时,你可能知道应该怎么去计算了,先对 [] 调用 ToPrimitive ,返回空字符串,最后结果为 "1" 。

除了 ToPrimitive 之外,还有更细粒度的 ToBoolean 、 ToNumber 和ToString ,比如在需要布尔型时,会通过 ToBoolean 来进行转换。看一下源码我们可以很清楚的知道这些布尔型、数字等之间转换是怎么发生:

// ECMA-262, section 9.2, page 30
function ToBoolean(x) {  
  if (IS_BOOLEAN(x)) return x;
  // 字符串转布尔型时,如果length不为0就返回true
  if (IS_STRING(x)) return x.length != 0;
  if (x == null) return false;
  // 数字转布尔型时,变量不为0或NAN时返回true
  if (IS_NUMBER(x)) return !((x == 0) || NUMBER_IS_NAN(x));
  return true;
}

// ECMA-262, section 9.3, page 31.
function ToNumber(x) {  
  if (IS_NUMBER(x)) return x;
  // 字符串转数字调用StringToNumber
  if (IS_STRING(x)) {
    return %_HasCachedArrayIndex(x) ? %_GetCachedArrayIndex(x)
                                    : %StringToNumber(x);
  }
  // 布尔型转数字时true返回1,false返回0
  if (IS_BOOLEAN(x)) return x ? 1 : 0;
  // undefined返回NAN
  if (IS_UNDEFINED(x)) return NAN;
  // Symbol抛出异常,例如:Symbol() + 1
  if (IS_SYMBOL(x)) throw MakeTypeError(kSymbolToNumber);
  return (IS_NULL(x)) ? 0 : ToNumber(DefaultNumber(x));
}

// ECMA-262, section 9.8, page 35.
function ToString(x) {  
  if (IS_STRING(x)) return x;
  // 数字转字符串,调用内部的_NumberToString
  if (IS_NUMBER(x)) return %_NumberToString(x);
  // 布尔型转字符串,true返回字符串true
  if (IS_BOOLEAN(x)) return x ? 'true' : 'false';
  // undefined转字符串,返回undefined
  if (IS_UNDEFINED(x)) return 'undefined';
  // Symbol抛出异常
  if (IS_SYMBOL(x)) throw MakeTypeError(kSymbolToString);
  return (IS_NULL(x)) ? 'null' : ToString(DefaultString(x));
}

讲了这么多原理,那这个 ToPrimitive 有什么卵用呢?这对于我们了解JavaScript内部的隐式转换和一些细节是非常有用的,比如:

var a = '[object Object]';  
if (a == {}) {  
    console.log('something');
}

你觉得会不会输出 something 呢,答案是会的,所以这也是为什么很多代码规范推荐使用 === 三等了。那这里为什么会相等呢,是因为进行相等操作时,对 {} 调用了 ToPrimitive ,返回的结果就是 [object Object] ,也就返回了 true了。我们可以看下JavaScript中EQUALS的源码就一目了然了:

// ECMA-262 Section 11.9.3.
EQUALS = function EQUALS(y) {  
  if (IS_STRING(this) && IS_STRING(y)) return %StringEquals(this, y);
  var x = this;

  while (true) {
    if (IS_NUMBER(x)) {
      while (true) {
        if (IS_NUMBER(y)) return %NumberEquals(x, y);
        if (IS_NULL_OR_UNDEFINED(y)) return 1;  // not equal
        if (IS_SYMBOL(y)) return 1;  // not equal
        if (!IS_SPEC_OBJECT(y)) {
          // String or boolean.
          return %NumberEquals(x, %$toNumber(y));
        }
        y = %$toPrimitive(y, NO_HINT);
      }
    } else if (IS_STRING(x)) {
      // 上面的代码就是进入了这里,对y调用了toPrimitive
      while (true) {
        if (IS_STRING(y)) return %StringEquals(x, y);
        if (IS_SYMBOL(y)) return 1;  // not equal
        if (IS_NUMBER(y)) return %NumberEquals(%$toNumber(x), y);
        if (IS_BOOLEAN(y)) return %NumberEquals(%$toNumber(x), %$toNumber(y));
        if (IS_NULL_OR_UNDEFINED(y)) return 1;  // not equal
        y = %$toPrimitive(y, NO_HINT);
      }
    } else if (IS_SYMBOL(x)) {
      if (IS_SYMBOL(y)) return %_ObjectEquals(x, y) ? 0 : 1;
      return 1; // not equal
    } else if (IS_BOOLEAN(x)) {
      if (IS_BOOLEAN(y)) return %_ObjectEquals(x, y) ? 0 : 1;
      if (IS_NULL_OR_UNDEFINED(y)) return 1;
      if (IS_NUMBER(y)) return %NumberEquals(%$toNumber(x), y);
      if (IS_STRING(y)) return %NumberEquals(%$toNumber(x), %$toNumber(y));
      if (IS_SYMBOL(y)) return 1;  // not equal
      // y is object.
      x = %$toNumber(x);
      y = %$toPrimitive(y, NO_HINT);
    } else if (IS_NULL_OR_UNDEFINED(x)) {
      return IS_NULL_OR_UNDEFINED(y) ? 0 : 1;
    } else {
      // x is an object.
      if (IS_SPEC_OBJECT(y)) {
        return %_ObjectEquals(x, y) ? 0 : 1;
      }
      if (IS_NULL_OR_UNDEFINED(y)) return 1;  // not equal
      if (IS_SYMBOL(y)) return 1;  // not equal
      if (IS_BOOLEAN(y)) y = %$toNumber(y);
      x = %$toPrimitive(x, NO_HINT);
    }
  }
}

所以了解变量如何转换为 primitive 类型的重要性也就可想而知了。具体的代码细节可以看这里: runtime.js 。

ToObject

ToObject 顾名思义就是将变量转换为对象类型。可以看下它是如何将非对象类型转换为对象类型:

// ECMA-262, section 9.9, page 36.
function ToObject(x) {  
  if (IS_STRING(x)) return new GlobalString(x);
  if (IS_NUMBER(x)) return new GlobalNumber(x);
  if (IS_BOOLEAN(x)) return new GlobalBoolean(x);
  if (IS_SYMBOL(x)) return %NewSymbolWrapper(x);
  if (IS_NULL_OR_UNDEFINED(x) && !IS_UNDETECTABLE(x)) {
    throw MakeTypeError(kUndefinedOrNullToObject);
  }
  return x;
}

因为日常代码很少用到,就不展开了。

(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容