js中的apply与call的用法

    xiaoxiao2021-03-25  154

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

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

    obj:这个对象将代替Function类里this对象 args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。

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

    在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window var test = function(){ console.log(this===window); } test.apply(null);//true test.call(undefined);//true

    用法

    “劫持”别人的方法

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

    var foo = { name:"mingming", logName:function(){ console.log(this.name); } } var bar={ name:"xiaowang" }; foo.logName.call(bar);//xiaowang 实现继承 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节点,见如下代码:

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

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

    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:

    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 } function func(){ "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来装换一下这个数组,即:

    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将数组装换为参数列表的集合.

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

    (function(){ var maxNum = 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]
    转载请注明原文地址: https://ju.6miu.com/read-4870.html

    最新回复(0)