【JavaScript 6连载】四、apply和call的用法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-apply和call方法</title>
<script>

// apply和call方法
// 作用：可以设置函数的具体调用者，来修改函数的作用域
// 第一个参数：就是指的是函数的调用者
var color = 'green';
var getColor = function(){
var color = 'blue';
console.log(color);
console.log(this.color);
}
// getColor();
// window.getColor();
// getColor.apply(this);
// getColor.call(this);

var obj1 = {
color:'yellow'
};
// 相当于obj1来调用getColor
// getColor.apply(obj1);
// getColor.call(obj1);

var obj2 = {
color:'red',
}
// 把getColor这个函数赋给obj2对象的属性abc
// 如果obj2中有abc属性，那么下面的语句会修改abc属性，如果obj2中没有abc属性，那么就为obj2添加一个abc属性
obj2.abc = getColor;
// 调用obj2的abc属性
// obj2.abc();

function sum (num1,num2){
return num1 + num2;
}

var result1 = sum(1,2);
// console.log(result1);
// apply方法传递调用函数的参数，需要使用数组，或者是类数组
var result2 = sum.apply(this,[1,2]);
console.log(result2);

function callSum (num3,num4){
return sum.apply(this,arguments);
}
var result3 = callSum(2,3);
console.log(result3);

// call方法传递调用函数的参数，是要一个一个的把实参传递进去
var result4 = sum.call(this,5,8);
console.log(result4);

// 总结：apply和call方法：
// 第一个参数类似，之后的参数不同。

</script>
</head>
<body>

</body>
</html>

扫描二维码关注公众号，回复： 4793743 查看本文章

实例二：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建对象</title>

</head>
<body>
</body>
<script>

var xiaoming = {
name:"小明",
desc:function(v1, v2){
console.log("我叫"+this.name+v1+v2);
}
}
var xiaogang = null;
xiaogang = {};
xiaogang.name = "小刚";

xiaoming.desc("xxxx", "yyyyy");
// call/apply可以改变方法或者函数的调用者，method/functon.call(调用者,var1,var2,var3.....)
xiaoming.desc.call(xiaogang, "aaaa", "bbbb");
xiaoming.desc.apply(xiaogang, ["iiii", "jjjj"]);

// 一个正常的构造器
function Person(name, age) {
this.home = "保护地球，人人有责！";
this.name = name;
this.age = age;
this.desc = function(){
console.log(this.name+" "+this.age+" "+this.home);
}
}

var p1 = new Person("小红", 20);
p1.desc();

【JavaScript 6连载】四、apply和call的用法

猜你喜欢