call()和apply()的相同与不同之处在哪里?
程序员文章站
2022-05-10 15:13:01
...
call和apply都是Function自带的方法,他们都是为了改变函数体内部 this 的指向。
call()的例子:
<script>
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue' };
function changeColor(){
console.log(this.color);
}
changeColor.call(); //red (默认传递参数)
changeColor.call(window); //red
changeColor.call(document); //yellow
changeColor.call(this); //red
changeColor.call(s1); //blue
</script>
var Pet = {
words : '...',
speak : function (say) {
console.log(say + ''+ this.words)
}
}
Pet.speak('Speak'); // 结果:Speak...
var Dog = {
words:'Wang'
}
//将this的指向改变成了Dog
Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang
apply()的例子:
<script>
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three' };
function changeColor(){
console.log(this.number);
}
changeColor.apply(); //one (默认传参)
changeColor.apply(window); //one
changeColor.apply(document); //two
changeColor.apply(this); //one
changeColor.apply(s1); //three
</script>
他们的不同点:他们接收参数的方法不同,call 是把参数按顺序传递进去,而 apply 则是把参数放在数组里。
例子:
function add(c,d){
return this.a + this.b + c + d;
}
var s = {a:1, b:2};
console.log(add.call(s,3,4)); // 1+2+3+4 = 10
console.log(add.apply(s,[5,6])); // 1+2+5+6 = 14
<script>
window.firstName = "Cynthia";
window.lastName = "_xie";
var myObject = {firstName:'my', lastName:'Object'};
function getName(){
console.log(this.firstName + this.lastName);
}
function getMessage(sex,age){
console.log(this.firstName + this.lastName + " 性别: " + sex + " age: " + age );
}
getName.call(window); // Cynthia_xie
getName.call(myObject); // myObject
getMessage.call(myObject,"未知",22); //myObject 性别: 未知 age: 22
getMessage.apply(myObject,["未知",22]); // myObject 性别: 未知 age: 22
</script>
推荐阅读
-
js中apply()和call()的区别与用法实例分析
-
浅析google、百度SEO排名和淘宝SEO排名的相同点与不同之处
-
简单总结Python中序列与字典的相同和不同之处
-
js中apply()和call()的区别与用法实例分析
-
call()和apply()的相同与不同之处在哪里?
-
浅析google、百度SEO排名和淘宝SEO排名的相同点与不同之处
-
简单总结Python中序列与字典的相同和不同之处
-
简单总结Python中序列与字典的相同和不同之处
-
细说(值传递、引用传递)的区别, 数组和对象解构的常用方法, call.apply.bind的区别与联系, 访问器属性的原理与实现
-
细说(值传递、引用传递)的区别, 数组和对象解构的常用方法, call.apply.bind的区别与联系, 访问器属性的原理与实现