在学习完JavaScript的隐式类型转换后，在知乎上看到一个问题的讨论：

[]+{} {}+[]

这二者结果不同的原因，想到可以用这种方法编写出我所需要的代码，这里先奉上代码：

([[]][1]+[+[]])[++(++[[]][+[]])]
u
(([{}]==[[]])+[+[]])[(++[[]][+[]])]
a
([{}]+[+[]])[3+[[]]]
j
(([{}]==[[]])+[+[]])[3+[[]]]
s
([{}]+[+[]])[([1+[[]]])+2]
c
(([+[]]==0)+[+[]])[1+[[]]]
r
([[]][1]+[+[]])[5+[[]]]
i
([{}]+[+[]])[([1+[[]]])+3]
t
(([[[]][1]+[+[]]])[0])[(++[[]][+[]])]
n
([{}]+[+[]])[(++[[]][+[]])]
o
([{}]+[+[]])[([1+[[]]])+0-1]
b

可以随意组合这些字母达到我们想要的效果，代码看起来复杂但是原理很简单，就是利用隐式转换，先将代码转化为字符

1+{} => "1[object Object]"

上面的例子就是将一个空对象转化为字符串，这样我们就可以取到‘’object‘’这个字母中的单个字母了，至于下标，主要利用了‘[+[]]’会转化为字符串‘0’，这样我们就不需要用'[0]'，显得更加geek。

以上代码用的缺点是我们只能得到'undefined', 'object', 'false','true',这些单词的字符串。

更新

已找到前人做的Xchars

一、定义

this 是对函数执行环境对象的引用，在函数运行食绑定， 默认为全局对象，在浏览器为 window 对象，在 Node 中为 exports 对象。如果是以对象的方法调用，this 就会指向这个对象。

二、this 的默认值

在ES5中， 如果在全局中直接调用函数， 函数中的this 值默认指向 window 对象。匿名函数的执行环境具有全局性，即 this 值默认为 window 对象。

       var foo = function () {
           console.log(this); 
       }
       foo(); // window
       // 上面的调用相当于 foo.call(null)

#三、以对象的方法调用
当函数作为对象的方法被调用时，this 指向这个对象， 由于在 javascript 中数组也是对象，当数组用下标方式调用函数时，this 也会指向这个数组。

         var length = 5;
         var obj = {
             foo: function (fn) {
                 console.log(this.length); // this => obj
                 fn(); // this => window
                 arguments[0](); // this => arguments
                 var bar = arguments[0]; 
                 bar(); // this => window 
             },
             length: 10
          }
          var fn = function () {
              console.log(this.length);
          }
         obj.foo(fn);
         //10, 5, 1, 5

第一个输出为10 是因为 foo 函数中的 this 指向 obj 对象， foo是作为 obj 的方法调用的， 所以输出 obj 中的 length 的值。
第二个输出5是因为函数中的 this 不具备传递性，也就是说在 foo 中调用的函数并不会继承 foo 中的this 值，所以 fn 相当于是在全局环境中调用的，this 指向全局对象，length 的值输出全局中定义的 length 的值。
第三个输出1 ， 函数中的 this 指向 arguments 对象，由于数组也是对象，当用下标方式调用数组中的函数时，this 就会指向数组。
第四个输出5， 和上一个不同的是， 将 arguments 中的函数赋值给一个对象后，再调用这个函数， this 的值发生了改变， 并指向了全局对象。

四、绑定执行环境

函数可以使用 call， apply， bind 方法改变或绑定执行环境，call 和 apply 方法的第一个参数都会成为函数的 this 的值，当第一个参数为 null 时，this 默认指向全局对象。 bind 方法可以绑定 this 值，绑定后不管以何种方式调用，this 的值不会改变。

     var obj = {};
     var foo = function () {
         console.log(this);
     }
     foo(); // this => window
     foo.call(obj);  // this => obj
     foo.bind(obj);
     foo(); // this => obj

五、new 操作符

new 操作符会让一个构造函数创建一个实例对象，并将这个实例对象以 this 的形式返回。

      var A = function () {
          this.a = 1;
          return new B();
       }

       var B = function () {
          this.b = 2;
       }
       var newA = new A();
       console.log(newA.a, newA.b); // undefined， 2
       console.log(newA instanceof A); // false
       console.log(newA instanceof B); // true

从上面的代码中可以看出，当构造函数返回一个对象时，new 出来的 this 指向这个返回的对象，构造函数中的 this 的属性都不会添加到 new 出来的对象。

一、测试框架的选择

目前流行的react单元测试框架主要是：Mocha、chai、sinon、enzyme、jsdom等，根据项目的不同，测试的方向也不一样，就我目前做的基于flux的项目来说，测试主要覆盖react组件、action和store三部分，在我学习的过程中，也遇到了很多问题，这里非常推荐看官方的文档。

二、测试用例的编写

断言

目前的主流断言库都是基于Node的assert这个模块，他主要是检测程序的运行结果是否与期望保持一致，它的工作方式：
var assert = require('assert');
assert.equal(add(3,7), 10);

一旦运行结果与期望不一致，就会抛出异常，可以根据报错信息查找原因。

Mocha

Mocha是现在主流的测试框架，它同时支持TDD和BDD，mocha的测试代码例子：

      var compare = require('./compare.js');
      describe('compare', function() {
          it('two should greater than one', function() {
               expect(compare(2, 1)).to.be.equal(true);
          }
      }

compare 是我们要测试的模块，describe是一个test suite，测试文件中必须至少有一个describe块，it 是一个 test case，一个 describe 必须有一个 it 块也可以有多个 it 块 ，其中的 expect 是一个断言，主要是检测程序的运行结果是否与期望一致，如果断言没有通过，会报出一个错误。要测试一个文件可以运行

     mocha test.js 

也可以同时运行多个文件，只需要将文件名用空格隔开就好，有时测试文件下还有很多的子目录，为了运行子目录下的文件，运行时需要加个参数 --recursive ,这样就不会遗漏一些文件。
对于异步代码，一般通过回调函数进行测试，Promise可以用then方法进行测试。

Sinon

sinon是一个独立的单元测试框架，其主要的方法有三个 spy, stub, mock,其中 spy 是用来监视函数，其能对原函数进行包装，监测函数的输入和输出，以及函数被调用的次数。

     var sinon = require('sinon');
     var spy = sinon.spy()；
     var spy = sinon.spy(Function);
     sinon.spy(obj, 'method');   // 监听obj对象的method方法
     //  todo test  ...

    obj.method.restore();   // 消除监听

stub 则是为了消除被测试函数对其他函数的依赖，当被测函数依赖另一个函数时，可以用stub 替换原函数，我们还可以设定替换函数在特定的参数下的返回值。

    var sinon = require('sinon');
    var stub = sinon.stub(obj, 'method');    // 将obj.method替换为一个stub，此时实际是一个spy
    var stub = sinon.stub(obj, 'method', function( ... ){ ... });  // 将obj.method替换为传入的函数
    var stub = sinon.stub(obj);    // stub 对象obj中的所有方法
    //  todo test  ...

   stub.restore();  // 消除监听

mock则主要是模拟对象，当被测试代码需要与其他对象进行交互时，为了确保交互的正确性，需要mock对象，对象中的方法不会被真正的调用，但可以设置预期方法是否被调用及调用的次数，而不是在函数运行之后进行断言。

   var sinon = require('sinon');
   
   var obj = { ... };

   var mock = sinon.mock(obj);  // mock 对象
   //  todo test  ...

   mock.restore();

enzyme

对于react组件的测试，可以用Feacbook官方的测试库 react-addons-test-utils ，不过主流还是基于官方库的 enzyme 。

Shallow Rendering

Shallow Rendering (浅渲染）在渲染组件时不会渲染子组件，从而不会去断言子组件，从而让测试者只关注被测试组件本身。

       shallow(node[, options]) => ShallowWrapper

shallow 方法会返回一个包装实例，组件不会被渲染成为真实的 DOM，由于 React 组件的子组件未被渲染，被测组件的生命周期也无法测试完整，要测试完整的生命周期，最好使用 mount 方法，mount 方法会将 React 组件渲染成真实的DOM元素，所以需要浏览器环境，在一般项目中，可以使用 jsdom 去模拟浏览器环境。
options 是传递给组件的参数，react 组件一般都需要用到 context ，可以将 context 放在 options 中传给被测组件，context 中可以定义一些组件需要用到的函数或对象。
在使用Mocha测试时，一般在 before 或者 beforeEach 方法中需要进行一些初始化操作，React 组件一般的初始化操作需要设置三个值 props， context， state。context 通过 options 设置， props 可以在shallow 组件时设置：

       shallow(<node  value={value} />);

想要初始化某个 props 中的值时，可以直接在组件标签内赋值。要对 state 初始化可以使用 setState：

     var node = shallow(<node />);
     node.setState({ value: 1});

不过 setState 会影响到组件自身的状态，可能会让测试不准确，应该谨慎使用。

OVER!