【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>
实例二：
<!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();
function Student() {
// Person.call(this, "小军", 22);
// Person.apply(this, ["小军", 22]);
Person.apply(this, arguments)
this.school = "青云学院";
this.study = function(){
console.log(this.name+"在"+this.school+"学习WEB前端编程技术！");
}
// this.desc = function(){
// console.log(this.name+"在"+this.school+"学习WEB前端编程技术！");
// }
}
var st1 = new Student("小军", 22);
st1.desc();
st1.study();
</script>
</html>
