call和apply的用途是完全一样的。改变函数中this的指向:
为什么要改变this的指向呢?这个有什么用?有哪些场景呢?
首先this的指向总是在变的,this的指向是由函数执行时所在的环境决定的,而不是函数声明时的环境。
this都指向哪里?
1、在控制台中输入下面的代码,此时可以看到this指向a这个对象。
var a={name:'a',getName:function(){return this.name;} } console.info(a.getName());//a
2、此时this指向了window
window.name= 'window'; var a={name:'a',getName:function(){return this.name;} }var b = a.getName; console.info(b());//window
结论:
如果函数是作为一个对象的属性被调用的(用点的方式调用),此时函数内的this就指向这个对象。
如果是用变量或者名称的方式直接调用的(不是使用点调用),则指向window。
场景:
this的改变:在写代码时经常会遇到这种情况,将函数作为回调函数使用时,this的指向变为了window,这个不是我们预期的结果
window.name='window'; var a={name:'a',getName:function(callback){return callback();//funcB使用非对象.的方式调用},funcB:function(){return this.name;} } console.info(a.getName(a.funcB));//window
这个时候就可以用call或者apply把this传递到callback中,callback中的this的指向就会被传入的this所替代。
当然,也可以传入其他对象覆盖当前this的指向。
window.name='window'; var b={name:'b' }; var a={name:'a',getName:function(callback){return callback.call(b);//传入b },funcB:function(){return this.name;} } console.info(a.getName(a.funcB));//b
也可以借用这个对象的方法。
window.name='window'; var b={name:'b', getBName:function(){return this.name;} }; var a={name:'a',getName:function(callback){return callback.call(b);//传入b },funcB:function(){return this.getBName();} } console.info(a.getName(a.funcB));//b
使用这个功能可以实现类似继承的效果
var F=function(name){this.name = name; } var S = function(){this.age=arguments[1];F.apply(this,arguments); } S.prototype.getNameAndAge=function(){console.info('名字是'+this.name+'年龄是'+this.age); }var s = new S('小红','9岁'); s.getNameAndAge();//名字是小红年龄是9岁
call和apply的区别:
传入的参数形式不一样
call(obj,参数1,参数2);
apply(obj,[参数1,参数2]);