说下js中的bind

window.color = 'red';
var o = {color: 'blue'};

function sayColor(){
  alert(this.color);
}
var func = sayColor.bind(o);
// 输出 "blue", 因为传的是对象 o，this 始终指向 o
func();

var func2 = sayColor.bind(this);
// 输出 "red", 因为传的是this，在全局作用域中this代表 window。等于传的是 window。
func2();

function f(){
  return this.a;
}

//this被固定到了传入的对象上
var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); //bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

var myObj = {
    specialFunction: function () {
    },
    anotherSpecialFunction: function () {
    },
    getAsyncData: function (cb) {
        cb();
    },
    render: function () {
       // 注意这里，写成 this.specialFunction() 会报错
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

// 使用 bind 优化
// 当myObj 调用，this就指向了myObj
render: function () {
    this.getAsyncData(function () {
        this.specialFunction();
        this.anotherSpecialFunction();
    }.bind(this));
}

<button>Clict Me!</button>
<script>
var logger = {
  x: 0,
  updateCount: function(){
    this.x++;
    console.log(this.x);
  }
}


// document.querySelector('button').addEventListener('click', function(){
//   logger.updateCount();
// });
// 优化后
// 因为bind返回就是新的函数，不用再写匿名函数了。
document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger))