JS改变函数内this指向的三种方法call()、apply()、bind()

最新推荐文章于 2024-08-10 15:49:01 发布

tkrj7_

最新推荐文章于 2024-08-10 15:49:01 发布

阅读量771

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/tkrj7_/article/details/112964804

版权

本文详细解析JavaScript的call(), apply()和bind()函数，阐述它们如何改变函数内部this的指向，以及在继承、定时器和异步操作中的应用实例。理解并掌握这三种方法对于开发者来说至关重要。

摘要由CSDN通过智能技术生成

改变函数内this指向

this的指向问题

JS提供三种方法：

call()

call(this指向,参数…)
可以调用函数
可以改变函数内部this指向
应用：可以实现继承

//将fn的this指向t
var t = {
    name: 'tracy'
};
function fn(a, b) {
    console.log(a + b);
};
fn.call(t, 1, 2);

//实现继承
function Fa(uname, age, sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex;
};
function Son(uname, age, sex) {
    //调用Fa并将this指向当前的Son
    Fa.call(this, uname, age, sex);
};

apply()

apply(this指向,数组)
可以调用函数
可以改变函数内部的this指向
参数必须是数组（伪数组）
应用：可以利用apply借助数学内置对象

//将fun的this指向f
var f = {
    name: 'tracy'
};
function fun(arr) {
    console.log(this);
    console.log(arr);
};
fun.apply(f, ['hello']);

//借助数学内置对象
var arr = [2, 66, 77, 99, 8];
var max = Math.max.apply(Math, arr);
console.log(max);

call()和apply()基本一样，皆可以直接调用函数，可以改变this指向，可以不传参数直接调用函数，但是apply()传参时参数必须是数组

bind()

bind(this指向,参数…)
不会调用函数
可以改变函数内部的this指向
返回原函数改变this之后产生的新函数
应用：函数不需要立即调用但需要改变this指向

var b = {
    name: 'tracy'
};

function fu() {
    console.log(this);
};
var f = fu.bind(b);//返回一个新的函数
f();

//应用：按钮点击3妙后才可再次点击
var btn = documenquerySelector('button');
btn.onclick = function(){
    this.disabled = true;//this指向btn按钮
    setTimeout(function(){
        // 如果使用this.disabled =false;  this指向window
        this.disabled = false;
    }.bind(this),3000)//this指向btn（定时器外面btn里面）
}