当前位置：首页 > 资讯 > 技术文档

Javascript中call与apply的学习笔记

时间：2021-06-22 20:58 编辑：来源：阅读：
扫一扫，手机访问

摘要：Javascript中call与apply的学习笔记

先看MDN中对于call的解释 call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注:该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。语法

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

参数 thisArg 在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。 arg1, arg2, ... 指定的参数列表。 MDN上的例子一开始并不是很好理解，这里我贴出来，有兴趣可以自己去看看 call-Javascript 这里的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);

这里可以看到结果 [img]http://files.jb51.net/file_images/article/201409/2014922113720798.png?2014822113753[/img] 第一段测试call是正确输出第二段测试call由于传入数组，所以先输出一个数组然后两个undefined 第三段测试apply正确输出第四段由于参数格式错误直接报错这里的区别应该很明显了

全部评论(0)

上一篇：Bootstrap框架动态生成Web页面文章内目录的方法
下一篇：基于javascript实现按圆形排列DIV元素(二)

资讯排行榜
更多>>