详解js中的apply与call的用法

来源:互联网 发布:nba2k17邓肯捏脸数据 编辑:程序博客网 时间:2024/05/19 04:52

前言

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向
call 和 apply二者的作用完全一样,只是接受参数的方式不太一样。

方法定义
apply

Function.apply(obj,args)方法能接收两个参数:

obj:这个对象将代替Function类里this对象

args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。

call

call方法apply方法的第一个参数是一样的,只不过第二个参数是一个参数列表

在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window

vartest = function(){  console.log(this===window);}test.apply(null);//truetest.call(undefined);//true

用法

"劫持"别人的方法

此时foo中的logName方法将被bar引用 ,this指向了bar

varfoo = {  name:"mingming",  logName:function(){    console.log(this.name);  }}varbar={  name:"xiaowang"};foo.logName.call(bar);//xiaowang


?

实现继承

functionAnimal(name){    this.name = name;     this.showName = function(){      console.log(this.name);    }  }   functionCat(name){   Animal.call(this, name);  }   varcat = newCat("Black Cat");  cat.showName();//Black Cat


?

在实际开发中,经常会遇到this指向被不经意改变的场景。
有一个局部的fun方法,fun被作为普通函数调用时,fun内部的this指向了window,但我们往往是想让它指向该#test节点,见如下代码:

window.id="window";document.querySelector('#test').onclick = function(){  console.log(this.id);//test  varfun = function(){    console.log(this.id);  }  fun();//window}


?

使用call,apply我们就可以轻松的解决这种问题了

window.id="window";document.querySelector('#test').onclick = function(){  console.log(this.id);//test  varfun = function(){    console.log(this.id);  }  fun.call(this);//test}


?

当然你也可以这样做,不过在ECMAscript 5strict模式下,这种情况下的this已经被规定为不会指向全局对象,而是undefined:

window.id="window";document.querySelector('#test').onclick = function(){  varthat = this;  console.log(this.id);//test  varfun = function(){    console.log(that.id);  }  fun();//test}


functionfunc(){  "use strict"  alert ( this); // 输出:undefined}func();



?
?

其他用法

类数组

这里把符合以下条件的对象称为类数组

1.具有length属性

2.按索引方式存储数据

3.不具有数组的push,pop等方法

常见类数组有 arguments,NodeList!

(function(){  Array.prototype.push.call(arguments,4);  console.log(arguments);//[1, 2, 3, 4]})(1,2,3)


?

这样就往arguments中push一个4进去了

Array.prototype.push 页可以实现两个数组合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来装换一下这个数组,即:

vararr1=newArray("1","2","3");vararr2=newArray("4","5","6");Array.prototype.push.apply(arr1,arr2);console.log(arr1);//["1", "2", "3", "4", "5", "6"]


?

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合.

再比如我想求类数组中的最大值

(function(){  varmaxNum = Math.max.apply(null,arguments);  console.log(maxNum);//56})(34,2,56);


?

判断类型

console.log(Object.prototype.toString.call(123)) //[object Number]console.log(Object.prototype.toString.call('123')) //[object String]console.log(Object.prototype.toString.call(undefined)) //[object Undefined]console.log(Object.prototype.toString.call(true)) //[object Boolean]console.log(Object.prototype.toString.call({})) //[object Object]console.log(Object.prototype.toString.call([])) //[object Array]console.log(Object.prototype.toString.call(function(){})) //[object Function]


?

以上就是apply与call的用法总结的全部内容,欢迎大家积极留言参加讨论,也希望本文对大家学习javascript有所帮助。

http://www.jb51.net/article/89501.htm


0 0
原创粉丝点击