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的难点,闭包!!


原文地址:https://www.cnblogs.com/Hmin2199/p/6264612.html