详解js中的apply与call的用法

前言

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有所帮助。