call 和apply的作用与区别

最新推荐文章于 2024-04-04 13:29:26 发布

云烟溪雪

最新推荐文章于 2024-04-04 13:29:26 发布

阅读量2.7k

点赞数

分类专栏： js

原文链接：https://blog.csdn.net/qq_21397815/article/details/90482341

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中call和apply方法的作用，它们都用于改变函数中this的指向，但传参方式不同。call接受多个参数，apply则需以数组形式传递。示例展示了如何使用这两个方法以及在构造函数中的应用。通过调用这些方法，可以灵活地在不同上下文中执行函数并管理参数。

摘要由CSDN通过智能技术生成

共同的作用：call和apply都是用来修改函数中this的指向问题；
不同：传参方式不同。call方法可以传给该函数的参数分别作为自己的多个参数，而apply方法必须将传给该函数的参数合并成一个数组作为自己的一个参数。

var name = 'Evan';
var age = 20;
var person = {
    name: 'Hillary',
    age: 19,
    sayIntroduce: function () {
        return "Hello, My name is " + this.name + " and I'm " + this.age + ' years old.'
    },
    sayHobby: function (val1, val2) {
        return "I'm " + this.name + ", I like " + val1 + " and " + val2 + ".";
    }
}
var person1 = {
    name: 'Coy'
}
console.log(person.sayIntroduce()); // Hello, My name is Hillary and I'm 19 years old.

当我们通过 call 和 apply 来this的指向时，不传任何参数，则默认为将this指向修改为 windows

 // 当没有参数时，默认将this指向 window
 console.log(person.sayIntroduce.call()); // Hello, My name is Evan and I'm 20 years old.
 console.log(person.sayIntroduce.apply()); // Hello, My name is Evan and I'm 20 years old.

有参数时，this 指向第一个参数：

// 将this指向 person1，由于person1中没有age属性，因此为 undefined
console.log(person.sayIntroduce.call(person1)); // Hello, My name is Coy and I'm undefined years old.
console.log(person.sayIntroduce.apply(person1)); // Hello, My name is Coy and I'm undefined years old.

当需要传递参数时，call可以直接写多个参数，apply需要用数组方式传递：

console.log(person.sayHobby.call(person1, 'swimming', 'hiking')); // I'm Coy, I like swimming and hiking.
console.log(person.sayHobby.apply(person1, ['swimming', 'hiking'])); // I'm Coy, I like swimming and hiking.

下面是一个构造函数的例子：

//构造函数应用
function Grade(max, min, average) {
this.max = max;
this.min = min;
this.average = average;
}

function Subject(subjectName,max, min, average) {
Grade.call(this, max, min, average);
this.subjectName = subjectName;
}
var math = new Subject(‘math’, 99, 60, 80);
console.log(math);