call()和apply()的区别
call()和apply()
区别:两者仅在定义参数时有所不同
作用:改变this指向,将一个对象的函数绑定到另一个对象上去运行
apply():
语法:a对象.函数.apply(b对象,[参数1,参数2,参数3····]);
参数:第一个参数为this要指向的对象
第二个参数是函数本身的参数,一个数组或者类数组
call():
语法:a对象.函数.call(b对象,参数1,参数2,参数3····);
参数:第一个参数为this要指向的对象
第二个往后的参数是函数本身的参数,有一个或多个
1 //改变this内部指向 2 var obj1 = {name:'sven'}; 3 var obj2 ={name:'anne'}; 4 window.name = 'window'; 5 var getName = function(){ 6 console.log(this.name); 7 }; 8 getName(); //window 9 getName.apply(obj1); // sven 10 getName.apply(obj2); // anne
apply()方法举例:
1 //1.当apply()的第二个参数,数组为空,或一个参数,或多个参数时 2 var aObj = { 3 name:"zhm", 4 hobby:"Fit", 5 getName: function () { 6 console.log("name:"+this.name+",hobby:"+this.hobby); 7 }, 8 getAge: function (age) { 9 console.log("name:"+this.name+",Age:"+age); 10 }, 11 getInfo: function (name,hobby,age) { 12 console.log("name:"+name+",hobby:"+hobby+",Age:"+age); 13 } 14 }; 15 var bObj = { 16 name:"Jason", 17 hobby:"running" 18 } ; 19 //因为getName方法本身没有参数,所以传一个空数组 20 aObj.getName.apply(bObj,[]);//name:Jason,hobby:running 21 22 //因为getAge方法本身有一个参数,所以数组里面值为一个 23 aObj.getAge.apply(bObj,[23]);//name:Jason,Age:23 24 25 //因为getInfo方法本身有三个参数,所以数组里面值为3个 26 aObj.getInfo.apply(bObj,["kitty","sing",18]);//name:kitty,hobby:sing,Age:18 27 28 29 //1.当apply()的第二个参数为类数组argument时 30 function add(a,b,c){ 31 console.log(a+b+c); 32 } 33 function showAdd(){ 34 //在此调用add()方法,使用当前argument类数组对象 35 //缺点:当不能确定传入的参数的个数的时候,这样写会出错 36 add(arguments[0],arguments[1],["·····"]); 37 //升级版: 38 add.apply(this,[3,5,9]);//this执行当前对象windows 39 add.apply(null,[3,5,9]);//null指向window 40 add.apply(undefined,[3,5,9]);// 不推荐 部分浏览器报错 41 42 } 43 //执行函数.传入参数,函数默认为全局对象window调用 44 showAdd();
call()方法举例:
1 var func = function(a,b,c){ 2 console.log([a,b,c]); //输出[1,2,3] 3 }; 4 func.call(null,1,2,3);
需要强调的是
1、javascript参数在内部就是用一个数组来表示的,从这个意义上说,apply比call的使用率更高
2、如果我们传入的第一个参数为null,函数体的this会指向默认的宿主对象,在浏览器中则是window
但是如果在严格模式下,函数体内的this还是为null
另外:常用的是this还可以实现继承
1 //1.定义一个Animal函数 2 function Animal(name) { 3 this.name = name;//注意此处为this.name = name而不是this.name = "animal"; 4 this.showName = function () { 5 console.log(this.name); 6 } 7 8 } 9 10 //2.定义一个Cat函数 11 function Cat(name) { 12 //将Animal方法应用到Cat上,因此Cat拥有了Animal的所有属性和方法 13 Animal.call(this, name) 14 } 15 16 17 //3.生成一个Cat的实例对象 18 var cat = new Cat("little Cat"); 19 20 //4.调用方法 21 cat.showName();//打印little Cat
下次我们来探讨JavaScript的难点,闭包!!