likes
comments
collection
share

js apply、call、bind一篇掌握

作者站长头像
站长
· 阅读数 8

前言

applycallbind,在js中都是与this指向打交道的,它们又该如何使用呢?本文先介绍apply的用法,然后根据apply的用法引出callbind的相同点与区别,这样就比较容易记忆。

apply

首先我先介绍其中一个,等你掌握了apply就能很快掌握另外两个了,apply,作用有两个,跟它的入参有关。

  1. 改变this指向。

  2. 将数组入参变为一般入参。

改变this指向

示例

这是网上一个常见的例子:

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

如何理解?可以这么理解,person有个方法fullName调用this.firstNamethis.lastName这两个变量,this指向person这个对象,但它是没有这两个变量的。

apply可以改变调用apply方法的函数(这里指的就是person.fullName这个函数)的this指向,现在person.fullName.apply(person1)就让this指向person1了,fullName方法就可以访问到这两个值,就成功输出。

这样不好记怎么办?

可以这么记,当apply调用时,调用apply的函数是谁?(person.fullName),把这个函数分享给person1,让person1去调用。 js apply、call、bind一篇掌握

如果是这样你就能理解了吧,这个就跟上文的代码一个意思,以后你碰到apply修改代码指向就这么理解代码就行。(可以这么理解,但是本质不一样)

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person1.fullName = person.fullName
person1.fullName();  // 将返回 "Bill Gates"

改变入参arguments

既然可以改变this指向,所以我们可以用它来把arguments改为数组

arguments作为函数自带的某个属性,可以用来访问函数的入参,它长得是数组的样子却没有数组的方法,例如concat()什么的都没有

因此我们可以用Array原型上的slice方法将arguments变成一个真正的数组。

(function fun(){
    // console.log(arguments.concat([3]))//报错
    
    const arr = Array.prototype.slice.apply(arguments);
    
    console.log(arr.concat([3]))//[1,2,3]
})(1,2)

修改过程也很好理解,arguments没有slice方法,我们可以通过apply,等于把Arrayslicearguments用了

等于调用了(可以这么理解,但是本质不一样):

(function fun(){
    // console.log(arguments.concat([3]))//报错
    
    arguments.slice = Array.prototype.slice
    const arr = arguments.slice()
  
    console.log(arr.concat([3]))//[1,2,3]
})(1,2)

将数组入参变为一般入参

就是apply的第二个参数接受的是数组。

接收数组有什么用?

比如当一个函数入参是非数组,而你目前拥有的是数组,你不想处理数组再进行入参的输入,你就可以使用apply。

文字看的麻烦就直接看例子:

Math.max(1,2,3)//3
Math.max([1,2,3])//报错
Math.max.apply(null,[1,2,3])//3

需要注意的是这里的第一个值为null时,

在 “JavaScript 严格模式”下则它将成为被调用函数的所有者(对象)也就是没改变指向,在“非严格”模式下,它成为全局对象

因为我们只是测试第二个入参作用,因此,第一个入参null就用来占位,就算改变了指向我们也没有用到它。

call

上面提到apply的第二个参数接受的是数组

call不是,它的参数接受的是分别地提供的参数,这就是它们最大的区别,其他用法一致。

以下的例子结果是一致的,可以加深一下你对applycall区别的理解。

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}
// apply
const applyRes = person.fullName.apply(person1, ["Oslo", "Norway"]);
console.log(applyRes) // John Doe,Oslo,Norway
// call
const callRes = person.fullName.call(person1, "Oslo", "Norway");
console.log(callRes) // John Doe,Oslo,Norway

bind

bind的区别要同时与applycall比较。

bind是创造了一个新的函数,applycall是直接执行。

var person = {
    fullName: function (city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
    }
}
var person1 = {
    firstName: "John",
    lastName: "Doe"
}
// apply
const bindFun = person.fullName.bind(person1);

我们分析一下bindFun这个新函数,其实就是绑定了person1person.fullName,入参有就是person.fullName的入参,

我们可以直接使用

console.log(bindFun("Oslo", "Norway")) // John Doe,Oslo,Norway

bind同时可以添加后面的入参,入参形式与call一样。

但是不同的是bind可以在创造时添加固定入参,后续调用新函数时的入参会加在固定入参后面。

var person = {
    fullName: function (city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
    }
}
var person1 = {
    firstName: "John",
    lastName: "Doe"
}
// apply
const bindFun = person.fullName.bind(person1,"Oslo");// 固定第一个入参"Oslo"
console.log(bindFun()) // John Doe,Oslo,undefined

//这里传递的是第二个入参"Norway",加在固定入参"Oslo"的后面
console.log(bindFun("Norway")) // John Doe,Oslo,Norway
var person = {
    fullName: function (city, country) {
        return this.firstName + " " + this.lastName + "," + city + "," + country;
    }
}
var person1 = {
    firstName: "John",
    lastName: "Doe"
}
// apply
const bindFun = person.fullName.bind(person1,"Oslo", "Norway"); //固定了两个入参
console.log(bindFun()) // John Doe,Oslo,Norway

// 两个入参都已经被固定了,这里传递的入参已经无效了
console.log(bindFun("newOslo", "newNorway")) // John Doe,Oslo,Norway

尾言

相信看到这,你就掌握了apply、call、bind的区别与使用方法,如果觉得文章对你有帮助的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~