改变函数内部this指向的三种方法

JavaScript为我们专门提供了一些函数方法来帮助我们更优雅的处理函数内部this的指向问题,常用的有call()、apply()、bind()三种方法。

实现我们来看一下函数内this的指向
这些this的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同,一般指向我们的调用者。

调用方式this指向
普通函数调用window
构造函数调用实例对象 原型对象里面的方法也指向实例对象
对象方法的调用该方法所属对象
事件绑定方法绑定事件对象
定时器函数window
立即执行函数window

1. call()方法
call()方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的this指向。

fun.call(thisArg, arg1, arg2, ...);
  • thisArg:在fun函数运行时指定的this值
  • arg1,arg2:传递的其他参数
var o = { 
    name:'andy'
}
function fn(a, b) { 
    console.log(this);
    console.log(a + b);
}
fn.call(o, 1, 2);
// call 第一个可以调用函数 第二个可以改变函数内的this指向
// call 的主要作用可以实现继承
function Father(uname, age, sex) { 
    this.uname = uname;
    this.age = age;
    this.sex = sex;
}
function Son(uname, age, sex) { 
    Father.call(this, uname, age, sex); //调用了Father方法并且改变了原来this的指向,现在this指向Son
}
var son = new Son('刘德华', 18, '男');
console.log(son);

2. apply()方法
apply()方法调用一个对象,简单理解为调用函数的方式,但是它可以改变函数的this指向。

fun.apply(thisArg, [argsArray]);
  • thisArg:在fun函数运行时指定的this值
  • argsArray:传递的值,必须包含在数组里面
  • 返回值就是函数的返回值,因为他就是调用函数
var o = { 
    name: 'andy'
};
function fn(arr) { 
    console.log(this);  // o
    console.log(arr);   //'pink'
};
fn.apply(o, ['pink']);
// 1. 也是调用函数。第二个可以改变函数内部的this指向
// 2. 但是它的参数必须是数组(伪数组)
// 3. apply的主要应用:比如所我们可以利用apply借助于数学内置对象求最大值
var arr = [1, 2, 3, 99];
var max = Math.max.apply(Math, arr);
console.log(max);   // 99

3. bind()方法
bind()方法不会调用函数,但是能改变函数内部this指向

fun.bind(thisArg, arg1, arg2, ...);
  • thisArg:在fun函数运行时指定的this值
  • arg1,arg2:传递的其他参数
  • 返回值有指定的this值和初始化参数改造的元函数拷贝
var o = { 
    name: 'andy'
};
function fn(a, b) { 
    console.log(this);
    console.log(a + b);
};
var f = fn.bind(o, 1, 2);
f();
// 1. 不会调用原来的函数,可以改变原来函数内部的this指向
// 2. 返回的是原函数改变this之后产生的新函数
// 3. 如果我们有的函数不需要立即调用,但又想改变这个函数的内部this指向就用bind
// 4. 我们有一个按钮,当我们点击之后,就禁用这个按钮,3秒之后开启这个按钮
var btn1 = document.querySelector('button');
btn1.addEventListener('click',function () { 
    this.disabled = true;   // 这个this指向的是btn1这个按钮
    setTimeout(function () { 
        this.disabled = false;
    }.bind(this),3000);
});

**

call apply bind 总结

**
相同点: 都可以改变函数内部的this指向

区别点:

  1. call和apply会调用函数,并且改变函数内部this指向
  2. call和apply传递的参数不一样,call传递参数arg1,arg2…形式,apply必须数组形式[arg]
  3. bind不会调用函数,可以改变函数内部this指向

主要应用场景:

  1. call经常做继承
  2. apply继承跟数组有关系,比如借助于数学对象实现数组最大值最小值
  3. bind不调用函数,但是还想改变this指向,比如改变定时器内部的this指向
    原文作者:Var_al
    原文地址: https://blog.csdn.net/weixin_45571150/article/details/106104628
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞