目 录CONTENT

文章目录

JS中改变this的指向 call、apply 和 bind 的区别

俊阳IT知识库
2022-12-28 / 0 评论 / 0 点赞 / 355 阅读 / 1,158 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-12-28,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903895743856654
欢迎访问😃,有任何问题都可留言评论哦~

在JS中, call、apply、bind这三者都是用来改变函数的this对象的指向的

关于这三者的区别,如下内容:

call() 与 apply()

这里为什么把他们两个放在一起说呢?
其实对于 call apply 两者而言,作用完全一样,只是接受参数的方式不太一样

  • call()接收的是参数列表
  • apply()接收参数数组

例如:有一个函数定义如下

let Test = function(arg1,arg2){ };

可以通过如下方式来调用:

Test.call(this,arg1,arg2);  
Test.apply(this,[arg1,arg2])

在没学this之前,通常会有如下的问题:

let m = {
	call:"Hello...",
	invoke:function(){
		console.log(this.call);
	}
}

let n = m.invoke;
n();	// undefined

这里我们想要打印m里面的call,但是却打印出来undefined,如果执行 m.invoke() 是可以的

let m = {
	call:"Hello...",
	invoke:function(){
		console.log(this.call);
	}
}

m.invoke()	// Hello...

这里能够打印出所需的内容,因为这里的this指向的是函数m,那么为什么上面的不行这个问题就需要我们了解this的指向问题

虽然这种方法可以达到我们的目的,但是有时候我们不得不将这个对象保存到另外的一个变量中,那么就可以通过call apply与bind 实现

1.call()

let m = {
	call:"Hello...",
	invoke:function(){
		console.log(this.call);
	}
}

let n = m.invoke;
n.call(m)

通过在call方法,给第一个参数添加要把n添加到哪个环境中,简单来说,this就会指向那个对象

call方法除了第一个参数以外还可以添加多个参数,如下:

let m = {
	call:"Hello...",
	invoke:function(x,y){
		console.log(this.call);
		console.log(x+y);
	}
}

let n = m.invoke;
n.call(m,1,2);

call的原理

function f1(a, b, c) {
    console.log("f1...")
    return a + b + c
}
Function.prototype.call = function (context) {
    // 处理context可能为空的情况 
    context = context ? Object(context) : window
    context.fn = this;
    let args = [];
    for (let i = 1; i < arguments.length; i++) {
        args.push(arguments[i])
    }
    let r = context.fn(...args)
    delete context.fn
    return r
}
let obj
console.log(f1.call(obj, 1, 2, 3))

2.apply()

apply方法和call方法有些相似,它也可以改变this的指向,和上面第一个例子一样,只需把call换成apply就可以了

同样apply也可以有多个参数,但是不同的是,第二个参数必须是一个数组,如下:

let m = {
	call:"Hello...",
	invoke:function(x,y){
		console.log(this.call);
		console.log(x+y);
	}
}

let n = m.invoke;
// n.call(m,1,2);  
n.apply(m,[1,2])

注:如果call()和apply()的第一个参数是null,在非严格模式下,第一个参数为null或者undefined时会自动替换为指向全局对象(window),

bind()

bind方法和call、apply方法有些不同,但是他也是可以改变this指向的,接下来就看看有哪些不同之处

let m = {
	call:"Hello...",
	invoke:function(){
		console.log(this.call);
	}
}

let n = m.invoke;
n.bind(m);

运行结果发现没有结果打印,这就是不同,实际上bind方法返回的是一个修改过后的函数

let m = {
	call:"Hello...",
	invoke:function(){
		console.log(this.call);
	}
}

let n = m.invoke;
let t = n.bind(m);
console.log(t);	// 这里打印的是一个函数

如果执行函数t,那么能不能打印出对象m里的call呢?

let m = {
	call:"Hello...",
	invoke:function(){
		console.log(this.call);
	}
}

let n = m.invoke;
let t = n.bind(m);
t();	// Hello...

这里是可以打印出想要的结果的,同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的

let m = {
	call:"Hello...",
	invoke:function(x,y,z){
		console.log(this.call);
		console.log(x,y,z);	//1,2,3
	}
}

let n = m.invoke;
let t = n.bind(m,1);
t(2,3);

bind原理

function f(name, age, n, a) {
    console.log(name, age, n, a)
    console.log(this)
}
let obj = { name: "wangcai" }
Function.prototype.bind = function (context) {
    let that = this;
    let newArr = Array.prototype.slice.call(arguments, 1);
    return function () {
        let newArr2 = Array.prototype.slice.call(arguments)
        return that.apply(context, newArr.concat(newArr2))
    }
}
let newF = f.bind(obj, "hello", "world", "lalala")
newF("xxxx")

总结:

  • apply 、 call 、bind 三者都是用来改变函数的this对象的指向的

  • apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;

  • apply 、 call 、bind 三者都可以利用后续参数传参;

  • bind是返回对应函数,便于后面调用;apply、call则是立即调用


^_<

0

评论区