this关键字

var o = {
  f1: function () {
    console.log(this);
    var f2 = function () {
      console.log(this);
    }();
  }
}

o.f1()
// Object
// Window

// 实际执行的是下面的代码。
var temp = function () {
  console.log(this);
};

var o = {
  f1: function () {
    console.log(this);
    var f2 = temp();
  }
}

// 严格模式下，如果函数内部的this指向顶层对象，就会报错。
var counter = {
  count: 0
};
counter.inc = function () {
  ‘use strict‘;
  this.count++
};
var f = counter.inc;
f()
// TypeError: Cannot read property ‘count‘ of undefined

var o = {
  v: ‘hello‘,
  p: [ ‘a1‘, ‘a2‘ ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ‘ ‘ + item);
    });
  }
}

o.f()
// undefined a1
// undefined a2

// 上面代码中，foreach方法的回调函数中的this，其实是指向window对象，因此取不到o.v的值。

// 将this当作foreach方法的第二个参数，固定它的运行环境。

var o = {
  v: ‘hello‘,
  p: [ ‘a1‘, ‘a2‘ ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ‘ ‘ + item);
    }, this);
  }
}

o.f()
// hello a1
// hello a2

var o = new Object();
o.f = function () {
  console.log(this === o);
}

// jQuery 的写法
$(‘#button‘).on(‘click‘, o.f);

// 上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象

var obj = {};

var f = function () {
  return this;
};

f() === window // true
f.call(obj) === obj // true

// call方法还可以接受多个参数。

func.call(thisValue, arg1, arg2, ...)

//call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

// apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数。

// 1. 找出数组最大元素
var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

// 2. 将数组的空元素变为undefined，空元素与undefined的差别在于，数组的forEach方法会跳过空元素，但是不会跳过undefined。
Array.apply(null, [‘a‘, ,‘b‘])
// [ ‘a‘, undefined, ‘b‘ ]

// 3. 转换类似数组的对象。
Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1}) // []
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
Array.prototype.slice.apply({length: 1}) // [undefined]
// 从上面代码可以看到，这个方法起作用的前提是，被处理的对象必须有length属性，以及相对应的数字键。

// 4. 绑定回调函数的对象
var o = new Object();

o.f = function () {
  console.log(this === o);
}

var f = function (){
  o.f.apply(o);
  // 或者 o.f.call(o);
};

// jQuery 的写法
$(‘#button‘).on(‘click‘, f);

// bind()方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};

var func = counter.inc.bind(counter);
func();
counter.count // 1