Skip to content
apply-vs-call-vs-bind

Javascript基础:Apply vs Call vs Bind 三者的区别,超级简单一看就会

刚学前端的朋友,如果使用一些框架,在框架里就经常会看到今天这篇文章要介绍的三兄弟:apply,call,bind,SEO禅也经常把他们搞混了,网上的资料很多,但是个人感觉大多数都没说到点上,而且看的比较头晕,其实他们之间的区别很简单,这篇文章不长,但希望对你理解这三个家伙有所帮助。

共同特点

首先介绍下这三个函数的共同特点:绑定上下文(this)的执行环境,比如说:

let person = {name:"SEO禅"}

function applyTest(){
  console.info(this.name)
}

applyTest.apply(person) // SEO禅
applyTest.call(person) // SEO禅
let bindTest = applyTest.bind(person)

bindTest()  // SEO禅

第一眼看过去的话,apply和call基本是一样的,其实他们就是差不多的,多数情况都是可以相互替换,他们唯一不同就是参数的格式有区别,这个后面介绍你们自己一看就懂了,这里唯一不同的就是Bind,它返回一个绑定了上下文执行环境的新函数,可以在以后使用的时候再调用。

Function.prototype.apply()

前面已经介绍他们共同特点的时候已经简单演示了apply的用法,但是上面没有使用参数,apply接受的参数是数组,或者类数组对象,如:

const numbers = [5, 6, 2, 3, 7];

// 这里的this传的是null,执行环境是全局对象window
const max = Math.max.apply(null, numbers); 

console.log(max); // 7

Function.prototype.call()

Call和Apply的区别就是参数的形式不同,如:

call(thisArg, arg1, ... , argN)

let person = {name:"SEO禅"}

function applyTest(arg1,arg2){
  console.info(this.name)
  console.info(arg1) // 我是参数1
  console.info(arg2) // 我是参数2
}

applyTest.call(person,"我是参数1","我是参数2")

Function.prototype.bind()

Bind上面已经说过了,返回一个新的函数,参数可以使用apply和call任意一种方式,如:

let person = {name:"SEO禅"}

function applyTest(arg1,arg2){
  console.info(this.name) // SEO禅
  console.info(arg1) // 我是参数1
  console.info(arg2) // 我是参数2
}

// 方式一
let bindTest = applyTest.bind(person,"我是参数1","我是参数2")
bindTest() 

// 方式二
let bindTest = applyTest.bind(person)
bindTest("我是参数1","我是参数2")

// 方式三
applyTest.bind(person,["我是参数1","我是参数2"])
function applyTest(arg1,arg2){
  console.info(this.name) // SEO禅
  console.info(arg1) // ["我是参数1","我是参数2"]
  console.info(arg2) // undefined
}

bind的使用方式比较多样,他们区别应该看到这会明白了吧?具体使用场景就看情况了,有什么不懂得就留言评论。

作者:SEO禅
本文链接:Javascript基础:Apply vs Call vs Bind 三者的区别,超级简单一看就会
版权申明:如无特殊说明,本站文章均为作者原创,著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处,谢谢!

标签:,

发表评论

您的电子邮箱地址不会被公开。