7.call apply bind

70 阅读3分钟

baijiahao.baidu.com/s?id=168669…

www.cnblogs.com/Jade-Liu188…

callapply都是立即执行,call传入的是多个参数,apply传入的是数组。

bind是返回一个新函数,拥有this以及初始参数。

6.callapplybind方法的联系和区别

  其实用于指定函数内部的this指向的问题,这三个方法都差不多,只是存在形式上的差别。读者可以将以上的例子用三种方法尝试用三种方法实现。

  总结一下call,apply,bind方法:

  a:第一个参数都是指定函数内部中this的指向(函数执行时所在的作用域),然后根据指定的作用域,调用该函数。

  b:都可以在函数调用时传递参数。callbind方法需要直接传入,而apply方法需要以数组的形式传入。

  ccallapply方法是在调用之后立即执行函数,而bind方法没有立即执行,需要将函数再执行一遍。有点闭包的味道。

  d:改变this对象的指向问题不仅有callapplybind方法,也可以使用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, ...为传入的参数