三.修改this指向的方式。

　　1.利用call,apply,bind方法。

　　函数下面有三个方法，call,apply,bind都可以改变this的指向，下面我们来具体演示这三个方法的应用和区别。

　　call方法：

　　call方法的第一个参数就是新的this指向， 从第二个参数开始表示函数自身的参数。

　　const obj = {

　　a: 100,

　　};

　　function sum(x, y) {

　　console.log(this.a + x + y);

　　}

　　sum(3,7);//underfined + 3 + 7 = NaN

　　解析：直接调用,this指向window，window下面没有a属性，所以window.a是undefined

　　sum.call(obj, 3, 7); //100 + 3 + 7 = 110

　　解析：通过call改变this，让其指向obj，obj下面具有a属性，所以obj.a是100

　　apply方法：

　　apply方法的第一个参数就是新的this指向， 第二个参数是一个数组或者类数组，里面的值依然是函数自身的参数。

　　const obj = {

　　a: 100,

　　};

　　function sum(x, y) {

　　console.log(this.a + x + y);

　　}

　　sum(3,7);//underfined + 3 + 7 = NaN

　　解析：直接调用,this指向window，window下面没有a属性，所以window.a是undefined

　　sum.apply(obj, [3, 7]); //100 + 3 + 7 = 110 注意中括号是apply的第二个参数必须是数组或者类数组。

　　解析：通过apply改变this，让其指向obj，obj下面具有a属性，所以obj.a是100

　　call和apply的简单应用

　　var obj1 = {

　　name: 'zhangsan'

　　};

　　var obj2 = {

　　name: 'lisi'

　　};

　　window.name = 'window';

　　var getName = function(){

　　alert ( this.name );

　　};

　　getName(); // 输出: window

　　getName.call( obj1 ); // 输出: zhangsan

　　getName.call( obj2 ); // 输出: lisi

　　bind方法：

　　bind方法的第一个参数就是新的this指向， 从第二个参数开始表示函数自身的参数,但bind 是返回对应函数体，便于稍后调用，apply、call则是立即调用

　　const obj = {

　　a: 100,

　　};

　　function sum(x, y) {

　　console.log(this.a + x + y);

　　}

　　sum(3,7);//underfined + 3 + 7 = NaN

　　解析：直接调用,this指向window，window下面没有a属性，所以window.a是undefined

　　sum.bind(obj, 3, 7)(); //100 + 3 + 7 = 110 注意这里需要再次调用

　　解析：通过bind改变this，让其指向obj，obj下面具有a属性，所以obj.a是100

　　bind的使用场景

　　案例：将fn函数内部的this指向obj对象，2s后输出this.num的值。

　　window.num = 100; //window添加属性

　　const obj = {

　　num: 1000

　　}

　　function fn() {

　　console.log(this.num);

　　}

　　fn(); //100 这里的this指向window

　　window.setInterval(fn.call(obj), 2000); //此时的定时器无效，已经调用fn函数，

　　window.setInterval(fn.apply(obj), 2000); //此时的定时器无效，已经调用fn函数

　　window.setInterval(fn.bind(obj), 2000); //定时器的第一个参数是函数体或者函数名称，bind返回的就是函数体，所以吻合需求。

　　2.将正确的this存储。

　　通过变量将需要的this存储下来，然后在函数内部利用存储的this达到我们的目标。

　　window.num = 2;

　　function fn() {

　　console.log(this.num);

　　}

　　const obj = {

　　num: 1,

　　shownum: function() {

　　let _this = this;// 通过变量将需要的this存储下来

　　return function() {

　　console.log(_this.num); //调用存储的this

　　}

　　}

　　}

　　obj.shownum();

　　3.借用其他对象的方法

　　借用其他对象方法的第一种场景是借用构造函数，通过这种技术，可以实现一些类似继承的效果：

　　let A = function( name ){

　　this.name = name;

　　};

　　let B = function(){

　　A.apply( this, arguments );

　　};

　　B.prototype.getName = function(){

　　return this.name;

　　};

　　var b = new B( 'zhangsan' );

　　console.log( b.getName() ); // 输出： 'zhangsan'

　　借用其他对象方法的第二种场景是借用arguments

　　我们知道函数的参数列表arguments是一个类数组对象，虽然它也有“下标”，但它并非真正的数组，所以也不能像数组一样，进行排序操作或者往集合里添加一个新的元素。这种情况下，我们常常会借用Array.prototype对象上的方法。比如想往arguments中添加一个新的元素，通常会借用

　　Array.prototype.push：

　　(function(){

　　Array.prototype.push.call( arguments, 3 );

　　console.log ( arguments ); // 输出[1,2,3]

　　})( 1, 2 );

　　在操作 arguments 的时候，我们经常非常频繁地找 Array.prototype 对象借用方法。

　　四.和this相关的一些经典案例解读

　　var name = "The Window";

　　var object = {

　　name : "My Object",

　　getNameFunc : function(){

　　return function(){

　　return this.name;

　　};

　　}

　　};

　　alert(object.getNameFunc()());//"The Window"

　　解析：

　　var声明的变量是window下面的属性

　　object对象里面存在方法getNameFunc，而且这个方法的返回值也是一个函数，必须再次调用。

　　通过返回的函数里面存在this，但是这里的this不是通过object进行调用，因为object.getNameFunc()返回的是一个函数体(普通的函数表达式)，需要对函数体进行再次调用，而再次调用就和object对象没有关系了，所以这里的this不会指向object,而是指向window,结果输出"The Window"

　　var name = "The Window";

　　var object = {

　　name : "My Object",

　　getNameFunc : function(){

　　var _this = this;

　　return function(){

　　return _this.name;

　　};

　　}

　　};

　　alert(object.getNameFunc()()); //"My Object"

　　解析：

　　这里大部分情况和上面的一致，区别是object.getNameFunc方法里面提前将指向object对象的this存储为变量，并且在返回函数体的时候使用了这个变量，所以返回的函数中的this就是object.getNameFunc方法里面的this，即指向了object对象，结果输出 "My Object"

上一篇

JavaScript中this的理解（一）

下一篇

Javascript中的内置对象—String