JS基础：this的指向以及call、apply的作用

this 的指向

　　在具体的实际应用中，this 的指向无法在函数定义时确定，而是在函数执行的时候才确定的，根据执行时的环境大致可以分为以下3种：

1、当函数作为普通函数调用时，this 指向全局对象

2、当函数作为对象的方法调用时，this 指向该对象

3、当函数作为构造器调用时，this 指向新创建的对象

示例一：

window.name = 'myname';
function getName() {
    console.log(this.name);
}
getName(); //输出myname

示例二：

var boy = {
    name: 'Bob',
    getName: function() {
        console.log(this.name);
    }
}
boy.getName(); //输出Bob

示例三：

function Boy(name) {
    this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

对于示例三，还有一种特殊情况，就是当构造函数通过 "return" 返回的是一个对象的时候，此次运算的最终结果返回的就是这个对象，而不是新创建的对象，因此 this 在这种情况下并没有什么用。

示例四：

function Boy(name) {
    this.name = name;
    return { //返回一个对象
        name: 'Jack'
    }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack

示例五：

function Boy(name) {
    this.name = name;
    return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob

apply 和 call 的作用

　　apply 接受两个参数，第一个参数指定了函数体内 this 的指向，第二个参数是一个数组或类数组，用于传递被调用函数的参数列表。

示例一：

function getInfo() {
    console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
    name: 'Bob',
    age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming

　　call 传入参数的数量是不固定的，跟 apply 相同的是，第一个参数也是用于指定函数体内 this 的指向，从第二个参数开始往后，每个参数被依次传入被调用函数。

示例二：

function getInfo() {
    console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
    name: 'Bob',
    age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping

　　此外，大部分高级浏览器还实现了 bind 方法，bind 方法会返回一个新函数，称为绑定函数，当调用这个绑定函数时，绑定函数会以创建它时传入的第一个参数作为 this，传入的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

示例三：

var boy1 = {
  name: 'Bob',
  age: 12
}
var getInfo = function() {
  console.log(this.name + ' like ' + arguments[0] + ' and ' + arguments[1]);
}.bind(boy1,'sing');
getInfo('shopping');  //输出Bob like sing and shopping

示例四：模拟浏览器的 bind 方法

Function.prototype.bind = function(obj){
    var self = this;
    return function(){
        return self.apply(obj,arguments);
    }
};
var boy1 = {
    name: 'Bob',
    age: 12
};
var func = function(){
    console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(boy1);
func('sing','shopping');

丢失的 this

　　在某些情况下会丢失 this 的指向，此时，我们就需要借助 call、apply 和 bind 来改变 this 的指向问题。

示例一：当 "getName" 方法作为 "boy" 对象的属性调用时，this 指向 "boy" 对象，当另外一个变量引用 "getName" 方法时，因为它是作为普通函数调用，所以 this 指向全局对象window

var boy = {
    name: 'Bob',
    getName: function() {
        console.log(this.name);
    }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefind

示例二：即使在函数内部定义的函数，如果它作为普通对象调用，this 同样指向 window 对象

var boy1 = {
    name: 'Bob',
    age: 12,
    getInfo: function() {
        console.log(this.name);
        function getAge() {
            console.log(this.age);
        }
        getAge();
    }
}
boy1.getInfo(); //Bob
                //undefind