js中call与apply的用法及区别

发表于 | 分类于 | 阅读次数:

在学习mvvm模式的代码编写过程中，用到了js中的call方法，之前在其他的项目代码中也经常会见到call与apply的用法，看了一番资料，用最简单的代码来进行理解
其实call与apply的作用一样，只是传递参数的方式不一样，都是待用某一个函数方法，但是如果这个函数里边有用到this或者跟作用域有关的东西，我们就可以通过call或者apply传入不同的作用域进去(this)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const obj = {
    name: 'xiechao',
    age: 28,
    getData: function(txt){
        // 默认的this是当前对象 obj
        console.log(this)
        console.log(txt)
    }
}
const data = {name:'jordan', age: 26}
obj.getData('原参数')
// 输出{name: "xiechao", age: 28, getData: ƒ}
// 输出 原参数
// 传入另外一个obj作为this，也就是作用于
// call 的参数用函数参数的方式

obj.getData.call(data,'call参数')
// 输出 {name: "jordan", age: 26}
// 输出 call参数
// apply 的参数方式用数组形式

obj.getData.apply(data,['apply参数'])
// 输出 {name: "jordan", age: 26}
// 输出 apply参数

典型引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let number = [1,5,3,10]
// 以数组格式传入参数
Math.max.apply(null,number)
Math.min.apply(null,number)
// ES5的继承
function Person(){

}
// call的应用
function Student(){
    // 在子类的构造函数中调用一次父类的构造，获得父类的属性
    Person.call(this)
}
// 子类原型继承父类的属性及方法
Student.prototype = new Person()
Student.prototype.constructor = Student

在js中，call与apply的还是比较常见的，现在流行的vue，经常会用到this这个参数，但是某些时候你需要传入不同的this指向。