baijiahao.baidu.com/s?id=168669…
call、apply都是立即执行,call传入的是多个参数,apply传入的是数组。
bind是返回一个新函数,拥有this以及初始参数。
6.call,apply,bind方法的联系和区别
其实用于指定函数内部的this指向的问题,这三个方法都差不多,只是存在形式上的差别。读者可以将以上的例子用三种方法尝试用三种方法实现。
总结一下call,apply,bind方法:
a:第一个参数都是指定函数内部中this的指向(函数执行时所在的作用域),然后根据指定的作用域,调用该函数。
b:都可以在函数调用时传递参数。call,bind方法需要直接传入,而apply方法需要以数组的形式传入。
c:call,apply方法是在调用之后立即执行函数,而bind方法没有立即执行,需要将函数再执行一遍。有点闭包的味道。
d:改变this对象的指向问题不仅有call,apply,bind方法,也可以使用that变量来固定this的指向。
前言:
call、apply、bind这3个方法的用处都是更改this指向,在学习call、apply、bind之前,需要先了解this,所以本文会先对this进行讲解。
通过本文可以了解:
this是什么
call、apply、bind是如何实现的
call、apply、bind的用处
什么是this
定义:
当前执行上下文(global、function或eval)的一个属性,在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。
说白了,this就是一个变量,他指向一个对象或者一个参数,我们通常需要使用this来设置或获取变量、对象、方法,最重要的就是能够分辨出当前使用的this的指向。接下来我们来看看不同情况下this的指向。
重点:this的指向是==调用时==决定的。
1. 全局上下文
在全局上下文中,this指向的是window
console.log(this==window)//true
2. 函数调用
直接调用this指向window
functiontest(){ console.log(this)}test();//windowfunctiontest(){ test1()functiontest1(){ console.log(this) }}test();//window
3. 通过对象调用
this指向调用方法的对象
const obj = { a:1,test:function(){ console.log(this) }}console.log(obj.test())//obj
4. 箭头函数
this与所在上下文this指向相同
const fun1 = ()=>{ console.log(this)}console.log(fun1())//windowfunctionfn1(){ console.log(this)return ()=>{ console.log(this) }}console.log(fn1()())//window//window
5. 构造函数
this指向构造出的对象
functionTest(){ this.name = 'test';}let t = new Test();console.log(t.name)//test
call/apply方法基本一样,唯一的区别在于call传入的是多个参数,apply传入的为数组
与call、apply的不同在于,call、apply调用后会立即执行,返回值依赖于调用他们的函数。而bind,调用后会返回原函数,拥有指定的this以及初始参数。
function.call(thisArg, arg1, arg2, ...)。第一个参数为要更改的对象,arg1,arg2...为传入参数
func.apply(thisArg, [argsArray])。 第一个参数为要更改的对象,第二个参数为func执行时传入的数组参数
function.bind(thisArg[, arg1[, arg2[, ...]]])。第一个参数为要更改的对象,arg1, arg2, ...为传入的参数