JS中this的指向以及call、apply的作用


            在具体的实际应用中，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



call 和 apply 的作用

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 方法，它与 call 和 apply 的区别在于 bind 只是改变函数内部 this 的指向，但不会立即执行，你需要显示调用它。



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





Function.prototype.bind = function(obj){

  var self = this;

  return function(){

    return self.apply(obj,arguments);

  }

};

var obj = {

  name: 'Bob',

  age: 12

};

var func = function(){

  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);

}.bind(obj);

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(); //输出undefined



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





var boy1 = {

  name: 'Bob',

  age: 12,

  getInfo: function() {

    console.log(this.name);

    function getAge() {

      console.log(this.age);

    }

    getAge();

  }

}

boy1.getInfo(); //Bob

        //undefined