首页 > 专栏 > 前端 > 文章详情
call 和 apply 的作用与区别 发布于:2021-05-06 09:41:35   来源:_陌默   查看:73  讨论:0
首先先说明它们共同的作用:call和apply 都是用来修改函数中this的指向问题;Syp易塔云建站-模板下载,web开发资源,技术博客
Syp易塔云建站-模板下载,web开发资源,技术博客
其次就是它们不同的传参方式:注意上一句话中说他们的作用时有两个关键词 ‘函数’和‘this’,想要修改this 的指向,那么必然有一个this修改后的指向,而函数必然后关系到传参问题:call方法可以传给该函数的参数分别作为自己的多个参数,而apply方法必须将传给该函数的参数合并成一个数组作为自己的一个参数:
Syp易塔云建站-模板下载,web开发资源,技术博客
 
var name = 'Evan';Syp易塔云建站-模板下载,web开发资源,技术博客
var age = 20;Syp易塔云建站-模板下载,web开发资源,技术博客
var person = {Syp易塔云建站-模板下载,web开发资源,技术博客
        name: 'Hillary',Syp易塔云建站-模板下载,web开发资源,技术博客
        age: 19,Syp易塔云建站-模板下载,web开发资源,技术博客
        sayIntroduce: function () {Syp易塔云建站-模板下载,web开发资源,技术博客
                return "Hello, My name is " + this.name + " and I'm " + this.age + ' years old.'Syp易塔云建站-模板下载,web开发资源,技术博客
        },Syp易塔云建站-模板下载,web开发资源,技术博客
        sayHobby: function (val1, val2) {Syp易塔云建站-模板下载,web开发资源,技术博客
                return "I'm " + this.name + ", I like " + val1 + " and " + val2 + ".";Syp易塔云建站-模板下载,web开发资源,技术博客
        }Syp易塔云建站-模板下载,web开发资源,技术博客
}Syp易塔云建站-模板下载,web开发资源,技术博客
var person1 = {Syp易塔云建站-模板下载,web开发资源,技术博客
        name: 'Coy'Syp易塔云建站-模板下载,web开发资源,技术博客
}Syp易塔云建站-模板下载,web开发资源,技术博客
console.log(person.sayIntroduce()); // Hello, My name is Hillary and I'm 19 years old.
当我们通过 call 和 apply 来this的指向时,不传任何参数,则默认为将this指向修改为 windows
// 当没有参数时,默认将this指向 windowSyp易塔云建站-模板下载,web开发资源,技术博客
console.log(person.sayIntroduce.call()); // Hello, My name is Evan and I'm 20 years old.Syp易塔云建站-模板下载,web开发资源,技术博客
console.log(person.sayIntroduce.apply()); // Hello, My name is Evan and I'm 20 years old.
有参数时,this 指向第一个参数:
// 将this指向 person1,由于person1中没有age属性,因此为 undefinedSyp易塔云建站-模板下载,web开发资源,技术博客
console.log(person.sayIntroduce.call(person1)); // Hello, My name is Coy and I'm undefined years old.Syp易塔云建站-模板下载,web开发资源,技术博客
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.Syp易塔云建站-模板下载,web开发资源,技术博客
console.log(person.sayHobby.apply(person1, ['swimming', 'hiking'])); // I'm Coy, I like swimming and hiking.
Syp易塔云建站-模板下载,web开发资源,技术博客
下面是一个构造函数的例子:Syp易塔云建站-模板下载,web开发资源,技术博客
 
//构造函数应用Syp易塔云建站-模板下载,web开发资源,技术博客
function Grade(max, min, average) {Syp易塔云建站-模板下载,web开发资源,技术博客
    this.max = max;Syp易塔云建站-模板下载,web开发资源,技术博客
    this.min = min;Syp易塔云建站-模板下载,web开发资源,技术博客
    this.average = average;Syp易塔云建站-模板下载,web开发资源,技术博客
}Syp易塔云建站-模板下载,web开发资源,技术博客
 Syp易塔云建站-模板下载,web开发资源,技术博客
function Subject(subjectName,max, min, average) {Syp易塔云建站-模板下载,web开发资源,技术博客
    Grade.call(this, max, min, average);Syp易塔云建站-模板下载,web开发资源,技术博客
    this.subjectName = subjectName;Syp易塔云建站-模板下载,web开发资源,技术博客
}Syp易塔云建站-模板下载,web开发资源,技术博客
var math = new Subject('math', 99, 60, 80);Syp易塔云建站-模板下载,web开发资源,技术博客
console.log(math);

评论

  • 匿名