移动开发

详解js中的apply与call的用法

云博小周宇2 Mins Read

前言

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

 

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

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

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

 

call

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

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

1
2
3
4
5
var
test =
function
(){
  
console.log(
this
===window);
}
test.apply(
null
);
//true
test.call(undefined);
//true

用法

“劫持”别人的方法

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

1
2
3
4
5
6
7
8
9
10
var
foo = {
  
name:
"mingming"
,
  
logName:
function
(){
    
console.log(
this
.name);
  
}
}
var
bar={
  
name:
"xiaowang"
};
foo.logName.call(bar);
//xiaowang

实现继承

1
2
3
4
5
6
7
8
9
10
11
12
13
function
Animal(name){  
  
this
.name = name;  
  
this
.showName =
function
(){  
    
console.log(
this
.name);  
  
}  
}  
 
function
Cat(name){ 
  
Animal.call(
this
, name); 
}  
 
var
cat =
new
Cat(
"Black Cat"
);  
cat.showName();
//Black Cat

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

1
2
3
4
5
6
7
8
window.id=
"window"
;
document.querySelector(
‘#test‘
).onclick =
function
(){
  
console.log(
this
.id);
//test
  
var
fun =
function
(){
    
console.log(
this
.id);
  
}
  
fun();
//window
}

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

1
2
3
4
5
6
7
8
window.id=
"window"
;
document.querySelector(
‘#test‘
).onclick =
function
(){
  
console.log(
this
.id);
//test
  
var
fun =
function
(){
    
console.log(
this
.id);
  
}
  
fun.call(
this
);
//test
}

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

1
2
3
4
5
6
7
8
9
window.id=
"window"
;
document.querySelector(
‘#test‘
).onclick =
function
(){
  
var
that =
this
;
  
console.log(
this
.id);
//test
  
var
fun =
function
(){
    
console.log(that.id);
  
}
  
fun();
//test
}

?
1
2
3
4
5
function
func(){
  
"use strict"
  
alert (
this
); 
// 输出：undefined
}
func();

其他用法

类数组

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

1.具有length属性

2.按索引方式存储数据

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

常见类数组有 arguments,NodeList!

1
2
3
4
(
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来装换一下这个数组,即:

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

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

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

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

判断类型

 
1
2
3
4
5
6
7
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有所帮助。