一道面试题引发的对javascript类型转换的思考

Lauren 5年前
   <p>最近群里有人发了下面这题:</p>    <p>实现一个函数,运算结果可以满足如下预期结果:</p>    <pre>  <code class="language-javascript">add(1)(2) // 3  add(1, 2, 3)(10) // 16  add(1)(2)(3)(4)(5) // 15</code></pre>    <p>对于一个好奇的切图仔来说,忍不住动手尝试了一下,看到题目首先想到的是会用到高阶函数以及  Array.prototype.reduce() 。</p>    <p>高阶函数(Higher-order function):高阶函数的意思是它接收另一个函数作为参数。在 javascript 中,函数是一等公民,允许函数作为参数或者返回值传递。</p>    <p>得到了下面这个解法:</p>    <pre>  <code class="language-javascript">function add() {      var args = Array.prototype.slice.call(arguments);        return function() {          var arg2 = Array.prototype.slice.call(arguments);          return args.concat(arg2).reduce(function(a, b){              return a + b;          });      }  }</code></pre>    <p>验证了一下,发现错了:</p>    <pre>  <code class="language-javascript">add(1)(2) // 3  add(1, 2)(3) // 6  add(1)(2)(3) // Uncaught TypeError: add(...)(...) is not a function(…)</code></pre>    <p>上面的解法,只有在  add()() 情形下是正确的。而当链式操作的参数多于两个或者少于两个的时候,无法返回结果。</p>    <p>而这个也是这题的一个难点所在, add() 的时候,如何既返回一个值又返回一个函数以供后续继续调用?</p>    <p>后来经过高人指点,通过重写函数的  valueOf 方法或者  toString 方法,可以得到其中一种解法:</p>    <pre>  <code class="language-javascript">function add () {   var args = Array.prototype.slice.call(arguments);     var fn = function () {    var arg_fn = Array.prototype.slice.call(arguments);    return add.apply(null, args.concat(arg_fn));   }     fn.valueOf = function () {    return args.reduce(function(a, b) {     return a + b;    })   }     return fn;  }</code></pre>    <p>嗯?第一眼看到这个解法的时候,我是懵逼的。因为我感觉  fn.valueOf() 从头到尾都没有被调用过,但是验证了下结果:</p>    <pre>  <code class="language-javascript">add(1) // 1  add(1,2)(3) //6  add(1)(2)(3)(4)(5) // 15</code></pre>    <p>神奇的对了!那么玄机必然是在上面的  fn.valueOf = function() {} 内了。为何会是这样呢?这个方法是在函数的什么时刻执行的?且听我一步一步道来。</p>    <h2>valueOf 和 toString</h2>    <p>先来简单了解下这两个方法:</p>    <h3>Object.prototype.valueOf()</h3>    <p>用  MDN 的话来说,valueOf() 方法返回指定对象的原始值。</p>    <p>JavaScript 调用 valueOf() 方法用来把对象转换成原始类型的值(数值、字符串和布尔值)。但是我们很少需要自己调用此函数,valueOf 方法一般都会被 JavaScript 自动调用。</p>    <p>记住上面这句话,下面我们会细说所谓的自动调用是什么意思。</p>    <h3>Object.prototype.toString()</h3>    <p>toString() 方法返回一个表示该对象的字符串。</p>    <p>每个对象都有一个 toString() 方法,当对象被表示为文本值时或者当以期望字符串的方式引用对象时,该方法被自动调用。</p>    <p>这里先记住,valueOf() 和 toString() 在特定的场合下会自行调用。</p>    <h2>原始类型</h2>    <p>好,铺垫一下,先了解下 javascript 的几种原始类型,除去 Object 和 Symbol,有如下几种原始类型:</p>    <ul>     <li>Number</li>     <li>String</li>     <li>Boolean</li>     <li>Undefined</li>     <li>Null</li>    </ul>    <p>在 JavaScript 进行对比或者各种运算的时候会把对象转换成这些类型,从而进行后续的操作,下面逐一说明:</p>    <h2>String 类型转换</h2>    <p>在某个操作或者运算需要字符串的时候,会触发 Object 的 String 转换,举个例子:</p>    <pre>  <code class="language-javascript">var obj = {name: 'Coco'};  var str = '123' + obj;  console.log(str);  // 123[object Object]</code></pre>    <p>转换规则:</p>    <ol>     <li>如果  toString  方法存在并且返回原始类型,返回  toString  的结果。</li>     <li>如果  toString  方法不存在或者返回的不是“原始类型”,调用 valueOf  方法,如果  valueOf  方法存在,并且返回“原始类型”数据,返回  valueOf  的结果。</li>     <li>其他情况,抛出错误。</li>    </ol>    <p>上面的例子实际上是:</p>    <pre>  <code class="language-javascript">var obj = {name: 'Coco'};  var str = '123' + obj.toString();</code></pre>    <p>其中, obj.toString() 的值为  "[object Object]" 。</p>    <p>假设是数组:</p>    <pre>  <code class="language-javascript">var arr = [1, 2];  var str = '123' + arr;    console.log(str); // 1231,2</code></pre>    <p>上面  + arr 其实是调用了  + arr.toString() 。</p>    <p>但是,我们可以自己改写对象的  toString , valueOf 方法:</p>    <pre>  <code class="language-javascript">var obj = {      toString: function() {          console.log('调用了 obj.toString');          return '111';      }  }    alert(obj);  // 调用了 obj.toString  // 111</code></pre>    <p>上面  alert(obj) ,obj 会自动调用自己的  obj.toString() 方法转化为原始类型,如果我们不重写它的  toString 方法,将输出  [object Object] ,这里我们重写了  toString ,而且返回了一个原始类型字符串  111 ,所以最终 alert 出了 111。</p>    <p>上面的转化规则写了, toString 方法需要存在并且返回原始类型,那么如果返回的不是一个原始类型,则会去继续寻找对象的  valueOf 方法:</p>    <p>下面我们尝试证明如果  toString() 方法不可用的时候系统会调用  valueOf() 方法,下面我们改写对象的  valueOf :</p>    <pre>  <code class="language-javascript">var obj = {      toString: function() {          console.log('调用了 obj.toString');          return {};      },      valueOf: function() {          console.log('调用了 obj.valueOf')          return '110';      }  }    alert(obj);  // 调用了 obj.toString  // 调用了 obj.valueOf  // 110</code></pre>    <p>从结果可以看到,当  toString 不可用的时候,系统会再尝试  valueOf 方法,如果  valueOf 方法存在,并且返回原始类型(String、Number、Boolean)数据,返回 valueOf 的结果。</p>    <p>那么如果, toString 和  valueOf 返回的都不是原始类型呢?看下面这个例子:</p>    <pre>  <code class="language-javascript">var obj = {      toString: function() {          console.log('调用了 obj.toString');          return {};      },      valueOf: function() {          console.log('调用了 obj.valueOf')          return {};      }  }    alert(obj);  // 调用了 obj.toString  // 调用了 obj.valueOf  // Uncaught TypeError: Cannot convert object to primitive value</code></pre>    <p>可以发现,如果  toString 和  valueOf 方法均不可用的情况下,系统会直接返回一个错误。</p>    <h2>Number 类型转换</h2>    <p>上面描述的是 String 类型的转换,很多时候也会发生 Number 类型的转换:</p>    <ul>     <li>调用 Number() 函数,强制进行 Number 类型转换</li>     <li>调用 Math.sqrt() 这类参数需要 Number 类型的方法</li>     <li>obj == 1  ,进行对比的时候</li>     <li>obj + 1  , 进行运算的时候</li>    </ul>    <p>与 String 类型转换相似,但是 Number 类型刚好反过来,先查询自身的  valueOf 方法,再查询自己  toString 方法:</p>    <ol>     <li>如果  valueOf  存在,且返回原始类型数据,返回  valueOf  的结果。</li>     <li>如果  toString  存在,且返回原始类型数据,返回  toString  的结果。</li>     <li>其他情况,抛出错误。</li>    </ol>    <p>按照上述步骤,分别尝试一下:</p>    <pre>  <code class="language-javascript">var obj = {      valueOf: function() {          console.log('调用 valueOf');          return 5;      }  }    console.log(obj + 1);   // 调用 valueOf  // 6</code></pre>    <pre>  <code class="language-javascript">var obj = {      valueOf: function() {          console.log('调用 valueOf');          return {};      },      toString: function() {          console.log('调用 toString');          return 10;      }  }    console.log(obj + 1);   // 调用 valueOf  // 调用 toString  // 11</code></pre>    <pre>  <code class="language-javascript">var obj = {      valueOf: function() {          console.log('调用 valueOf');          return {};      },      toString: function() {          console.log('调用 toString');          return {};      }  }    console.log(obj + 1);   // 调用 valueOf  // 调用 toString  // Uncaught TypeError: Cannot convert object to primitive value</code></pre>    <h2>Boolean 转换</h2>    <p>什么时候会进行布尔转换呢:</p>    <ul>     <li>布尔比较时</li>     <li>if(obj) , while(obj) 等判断时</li>    </ul>    <p>简单来说,除了下述 6 个值转换结果为 false,其他全部为 true:</p>    <ul>     <li>undefined</li>     <li>null</li>     <li>-0</li>     <li>0或+0</li>     <li>NaN</li>     <li>''(空字符串)</li>    </ul>    <pre>  <code class="language-javascript">Boolean(undefined) // false  Boolean(null) // false  Boolean(0) // false  Boolean(NaN) // false  Boolean('') // false</code></pre>    <h2>Function 转换</h2>    <p>好,最后回到我们一开始的题目,来讲讲函数的转换。</p>    <p>我们定义一个函数如下:</p>    <pre>  <code class="language-javascript">function test() {      var a = 1;      console.log(1);  }</code></pre>    <p>如果我们仅仅是调用  test 而不是  test() ,看看会发生什么?</p>    <p><img src="https://simg.open-open.com/show/702187f784c0e03c698d6432b2b79e48.png"></p>    <p>可以看到,这里把我们定义的 test 函数的重新打印了一遍,其实,这里自行调用了函数的  valueOf 方法:</p>    <p><img src="https://simg.open-open.com/show/1173eb6debe2e3bea7850d294a4207ac.png"></p>    <p>我们改写一下 test 函数的  valueOf 方法。</p>    <pre>  <code class="language-javascript">test.valueOf = function() {      console.log('调用 valueOf 方法');      return 2;  }    test;  // 输出如下:  // 调用 valueOf 方法  // 2</code></pre>    <p>与 Number 转换类似,如果函数的  valueOf 方法返回的不是一个原始类型,会继续找到它的  toString 方法:</p>    <pre>  <code class="language-javascript">test.valueOf = function() {      console.log('调用 valueOf 方法');      return {};  }    test.toString= function() {      console.log('调用 toString 方法');      return 3;  }    test;  // 输出如下:  // 调用 valueOf 方法  // 调用 toString 方法  // 3</code></pre>    <h2>破题</h2>    <p>再看回我正文开头那题的答案,正是运用了函数会自行调用  valueOf 方法这个技巧,并改写了该方法。我们稍作改变,变形如下:</p>    <pre>  <code class="language-javascript">function add () {   console.log('进入add');   var args = Array.prototype.slice.call(arguments);     var fn = function () {    var arg_fn = Array.prototype.slice.call(arguments);    console.log('调用fn');    return add.apply(null, args.concat(arg_fn));   }     fn.valueOf = function () {    console.log('调用valueOf');    return args.reduce(function(a, b) {     return a + b;    })   }     return fn;  }</code></pre>    <p>当调用一次 add 的时候,实际是是返回 fn 这个 function,实际是也就是返回  fn.valueOf() ;</p>    <pre>  <code class="language-javascript">add(1);  // 输出如下:  // 进入add  // 调用valueOf  // 1</code></pre>    <p>其实也就是相当于:</p>    <pre>  <code class="language-javascript">[1].reduce(function(a, b) {      return a + b;  })  // 1</code></pre>    <p>当链式调用两次的时候:</p>    <pre>  <code class="language-javascript">add(1)(2);  // 输出如下:  // 进入add  // 调用fn  // 进入add  // 调用valueOf  // 3</code></pre>    <p>当链式调用三次的时候:</p>    <pre>  <code class="language-javascript">add(1)(2)(3);  // 输出如下:  // 进入add  // 调用fn  // 进入add  // 调用fn  // 进入add  // 调用valueOf  // 6</code></pre>    <p>可以看到,这里其实有一种循环。只有最后一次调用才真正调用到  valueOf ,而之前的操作都是合并参数,递归调用本身,由于最后一次调用返回的是一个 fn 函数,所以最终调用了函数的  fn.valueOf ,并且利用了 reduce 方法对所有参数求和。</p>    <p>除了改写  valueOf 方法,也可以改写  toString 方法,所以,如果你喜欢,下面这样也可以:</p>    <pre>  <code class="language-javascript">function add () {   var args = Array.prototype.slice.call(arguments);     var fn = function () {    var arg_fn = Array.prototype.slice.call(arguments);    return add.apply(null, args.concat(arg_fn));   }     fn.toString = function() {    return args.reduce(function(a, b) {     return a + b;    })   }     return fn;  }</code></pre>    <p>这里有个规律,如果只改写  valueOf() 或是  toString() 其中一个,会优先调用被改写了的方法,而如果两个同时改写,则会像 String 转换规则一样,优先查询  valueOf() 方法,在  valueOf() 方法返回的是非原始类型的情况下再查询  toString() 方法。</p>    <p>如果你能认真读完,相信会有所收获。</p>    <p>到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。</p>    <p> </p>    <p>来自:http://www.cnblogs.com/coco1s/p/6509141.html</p>    <p> </p>