博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript中call与apply的学习
阅读量:6553 次
发布时间:2019-06-24

本文共 1864 字,大约阅读时间需要 6 分钟。

hot3.png

先看MDN中对于call的解释

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

注:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。

语法

fun.call(thisArg[, arg1[, arg2[, ...]]])

参数

  • thisArg

    fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nullundefinedthis值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

  • arg1, arg2, ...

    指定的参数列表。

MDN上的例子一开始并不是很好理解,这里我贴出来,有兴趣可以自己去看看

这里的thisArg解释为在fun运行时指定的this值,也就是说使用了call后,fun中的this指向了thisArg?看代码

  var p="456";  function f1(){    this.p="123";  }  function f2() {    console.log(this.p);  }  f2();             //456  f2.call(f1());    //123  f2.apply(f1());   //123

第一次输出是调用的全局变量,之后由于call和apply的使用,f2中的this指向了f1,因此,输出变成了123,其实也就是f1借用了f2的方法输出了自己的p

这时将f1()中的this.p删除,会输出三个456,也就证实了当this为null或者undefined时其实指向了全局变量

至于指向原始值是指向它的包装对象这里,由于我理解的包装对象都是临时的,而且测试时只输出了原始值的类型而不是object,这里如何证明如果有知道的朋友希望可以和我讨论下,谢谢!

既然call可以实现一个对象借用另一个对象,不就可以实现继承了么?看代码

  function f1(){    this.father="father"  }  function f2() {    f1.call(this);    this.child="child";  }var test=new f2();console.log(test.father);    //father

test中是没有father的,由于f2()中的

    f1.call(this);

这里的this指向的就是f2,也就是f2借用了f1的方法,其实也就实现了继承

下面讲一下这里的参数,这里的参数是传递给fun的,看代码吧

  function f1(){    this.p="123";  }  function f2(x) {    console.log(this.p);    console.log(x);  }  f2.call(f1(),456);    //123//456

先输出123是因为f1中的p,之后的456是传递给f2的参数,很容易理解

主要是注意call和apply中参数的区别

call是一个一个传入的,而apply是传入的一个数组

    function f1(){    this.p="测试call";  }  function f2(x,y,z) {    console.log(this.p);    console.log(x);    console.log(y);    console.log(z);  }      function f3(){    this.p="测试apply";  }  f2.call(f1(),4,5,6);     f2.call(f1(),[4,5,6]);     f2.apply(f3(),[4,5,6]);  f2.apply(f3(),4,5,6);

这里可以看到结果

112756_ROyM_1992597.png

第一段测试call是正确输出

第二段测试call由于传入数组,所以先输出一个数组然后两个undefined

第三段测试apply正确输出

第四段由于参数格式错误直接报错

这里的区别应该很明显了

转载于:https://my.oschina.net/369679209/blog/313347

你可能感兴趣的文章
基于JavaMail的Java邮件发送:简单邮件发送
查看>>
maven引用net.sf.json-lib
查看>>
Spring IOC容器的初始化流程
查看>>
51Nod 1199 Money out of Thin Air(dfs序加线段树)
查看>>
Scrum立会报告+燃尽图(十一月二十三日总第三十一次):界面修改及新页面添加...
查看>>
实验二 20145237 20155226 2015234 实验报告 固件程序设计
查看>>
redis新手入门,摸不着头脑可以看看<一>
查看>>
1165: 零起点学算法72——首字母变大写
查看>>
动态规划--01背包问题
查看>>
Keepalived+LVS+Nginx负载均衡之高可用
查看>>
bzoj3232
查看>>
zorka源码解读之Beanshell与zorka的交互实现
查看>>
GridView技巧
查看>>
python模块之shelve
查看>>
Codeforces Round #466 (Div. 2)
查看>>
vue2+vuex+vue-router 快速入门(一) 简单介绍
查看>>
[xsy1294]sub
查看>>
字符串的组合
查看>>
Hibernate注解方法使用总结
查看>>
NET使用了UpdatePanel后如何弹出对话框!
查看>>