Js面向对象编程(2):this&call/apply/bind

this是JS语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。例如：

function(){
  this.x = 1;
}

随着函数使用场合的不同，this的指向也会相应发生变化，但是有一个总原则，this总是指向调用函数的那个对象。
下面分四种情况说说this的用法。

情况一：函数调用:

1.这是函数的最通常用法，属于全局性调用，因此this就代表全局对象Global。

function fn1(){
      console.log(this)
    }
fn1()  //window对象

2. 函数嵌套产生的内部函数的this不是其父函数，仍然是全局变量：

function fn0(){
    function fn(){
        console.log(this);
    }
    fn();
}
fn0();  //window对象

3. 回调函数：

var a = 1
function f1(fn){
    fn()
    console.log(a)//1
}

function f2(){
    var a = 2
}

f1(f2)

改写代码如下：

var a = 1
function f1(){
    (function (){var a = 2})()
    console.log(a)
}
f1()  //1

4.定时器中的this：
《高程》上说：超时调用的代码都是在全局作用域中执行的。因此，setTimeout和setInterval的回调函数中的this指向window.

var name = 'Lee';
function fn(){
  this.name = 'li';
  this.sayName = function(){
     console.log(this.name); 
  }
  setTimeout(this.sayName,1000)
}
new fn()  //Lee

上面代码中，定时器中this.sayName的this指向创建的实例，而sayName里面的this指向全局作用域。

情况二：作为对象的方法调用：

var a = 1
    var obj1 = {
      a:2,
      fn:function(){
        console.log(this.a)
    }
}
  obj1.fn()  //2    

此时的this是指obj1这个对象,因为是obj1调用了函数fn。

• 但若是把函数赋值之后再调用：

var a = 1
var obj1 = {
    a:2,
    fn:function(){
        console.log(this.a)
    }
}
var fn1 = obj1.fn
fn1()//1

此时fn1就是不带任何修饰的函数调用，因此它的this绑定的就是window，它也被称为隐性绑定,相当于obj1.fn.call(undefined)

情况三：在构造函数中调用：

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

function Person(name,age){
// 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}

var li = new Person('Li',24)
li.sayAge()  //24

情况四：call/apply/bind调用：

call、apply、bind方法的作用都是改变函数this的指向。

1. call和apply：
   call和apply方法都接受两个参数，第一个参数都是this要指向的对象，而call的后面传入的是一个参数列表，apply的第二个参数为一个参数数组。他们的第一个参数为endefined或null时，this均指向window。
   也就是说：

obj.method() = obj.method.call(obj);

fn() = fn.call(endefined);

f1(f2) = f1.call(undefined,f2);

例如：

var n = 123;
var obj = { n: 456 };

function a() {
  console.log(this.n);
}

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(obj) // 456

function f(x,y){
  console.log(x+y);
}

f.call(null,1,1) // 2
f.apply(null,[1,1]) // 2

应用场景：

• 求数组中的最大值和最小值：

var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1

• 将类数组转化为数组

var trueArr = Array.prototype.slice.call(arrayLike)

• 不改变原数组的情况下数组追加

var arr1 = [1,2,3];
var arr2 = [4,5,6];
var total = [].push.apply(arr1, arr2);//6
// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]

• 判断变量类型

function isArray(obj){
    return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('abc') // false

• 利用call和apply做继承

function Person(name,age){
    // 这里的this都指向实例
    this.name = name
    this.age = age
    this.sayAge = function(){
        console.log(this.age)
    }
}
function Boy(){
    Person.apply(this,arguments)//将父元素所有方法在这里执行一遍就继承了
}
var person = new Boy('li',24)

• 使用 log 代理 console.log

function log(){
  console.log.apply(console, arguments);
}
// 当然也有更方便的 var log = console.log()

2.bind：
和call很相似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是改变了上下文的函数。

var obj = {
    name: 'Li'
}

function printName() {
    console.log(this.name)
}

var person = printName.bind(obj)
console.log(person) // function () { … }
person()  // Li