javascript的call 和apply的用法

最新推荐文章于 2024-07-29 13:58:45 发布
最新推荐文章于 2024-07-29 13:58:45 发布
阅读量735 收藏
点赞数
分类专栏： 抄袭 文章标签： javascript function xhtml button 框架 测试

  本来是想在这里写写call 和apply的用法，但是我刚在网上看到一篇讨论，感觉比较讲得彻底，拿过来吧 ，自己又懒了一把，

<script type="text/javascript"> </script> <script class="blogstory"> </script>

function foo(x) {
  this.x = x;
  var y = "Just a y";
}

function bar(foo) {
 return function() {
    var temp = {};
   foo.apply(temp, arguments);
    alert("In bar now");
    alert("temp.foo:" + temp.foo + "/n" +
      "temp.x:" + temp.x + "/n" +
      "temp.y:" + temp.y);//注意看这一行的执行结果
 }
}

var func = bar(foo);
func("In foo now");

试验结果表明：apply以后，temp对象就继承了foo类的公有变量了。也就是说，这一句 foo.apply(temp, arguments);实际上就是把foo()函数当成temp对象的构造函数来调用了。一旦构造完毕，temp对象就具有了成员this.x。

这样，我有了两种理解方案：

①按照传统的面向对象的语言来理解：一般来说，构造函数是不能被外界（不包括派生类）访问的。因此，这句话“调用apply时，是把foo函数变成temp对象的方法，然后调用”是正确的，而“可是temp.foo竟然没有定义”则是理所当然的事情了。

②按照JavaScript语言自身的对象机制来理解：在JavaScript中，（构造 ）函数就是国王、一等公民，它就是类就是它。对象则是（构造）函数的实例。因此，通过对象来访问构造函数，显然是行不通的。

其实，说构造未必准确（但我们可以利用构造函数来理解这个处理过程），我认为应该说成克隆，也就是说系统把foo类拥有的所有公有变量复制给了temp对象（这里是指Object,Function,Array和包装型对象“四类”对象）。

蓝色的文字表明，如果temp不是一个对象型（指以上提到的四类对象）变量的话，克隆过程就不会发生，如下所示：

foo.apply(0, arguments);
foo.apply(null, arguments);
foo.apply(undefined, arguments);
foo.apply(true, arguments);
foo.apply("hello,world", arguments);
foo.apply({}, arguments);

那么foo.apply()实际上就和普通的方法调用没有什么区别了，只是有了它，我们可以利用传递arguments参数的便利。

所以，apply（和call）的应用场合就浮现出来了：

①我们需要把一个类的公有变量复制给另一个对象。

②我们要快速而“智能”的传参，而不是手动去书写arguments[0],arguments[1]...

问一个函数与函数之间传参数的问题,我觉得我这种方法太麻烦,不知道大家还有没有更好的方法.

如果按传统的方式来，得这样写：

function  user( ) {
  test(arguments[0], arguments[1]);
}

function test(id,name) {
   alert(id +"-----------"+name);

}

user("dfdfd","kkkkk");

这样写的缺点很明显，万一参数一变，程序就挂了。

而利用apply，程序就变聪明多了：

function  user( ) {
  test.apply(0, arguments);
}

function test(id,name) {
   alert(id +"-----------"+name);

}

user("dfdfd","kkkkk");

apply(...)和call(...)确实很实用，比如实现一个类创建模式

<script type="text/javascript">
<!--

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
};

var vehicle = Class.create();
vehicle.prototype = {
    initialize: function(type){
        this.type=type;
    },
    showSelf: function(){
        alert("this vehicle is "+ this.type);
    }
};

var moto=new vehicle("Moto");
moto.showSelf();

//-->
</script>


一个跨框架调用的例子

在View框架中有三个测试button，点击分别对应三种调用方式，第一种是通过最原始的obj.fn()来调用Controller框架中的fn函数，第二种是比较原始的eval拼装arguments跨框架字符串，第三种是改写的apply方法应用～

/**
 * index.htm
 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试跨框架调用-apply()应用</title>
</head>

<frameset rows="*,80" frameborder="1" border="1" framespacing="1">
  <frame src="view.htm" name="main_frame" id="main_frame" />
  <frame src="controller.htm" name="js_frame" id="js_frame" />
</frameset>
<noframes>
  <body> UnSupport Frame Structure! </body>
</noframes>
</html>


/**
 * view.htm
 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>:::View:::</title>
<script type="text/javascript">
<!--

// Cross Frames Function
var fFunc = function(){
 try{
  var iLen = arguments.length;
  if(iLen == 0) return;
  else{
   var sFuncStr = "top.frames['js_frame'].";
   sFuncStr += arguments[0] + "(";
   for(var i=1; i<iLen; i++){
    sFuncStr += "'" + arguments[i] + "',";
   }
   sFuncStr = sFuncStr.substring(0, sFuncStr.length-1);
   sFuncStr += ");";
   eval(sFuncStr);
  }
 }
 catch(ex){
  window.alert("Error: " + ex.description);
 }
};

// Cross Frames Function Apply
var fGoto = function(){
 try{
  var sFuncStr = "top.frames['js_frame'].";
  var arr = [];
  for(var i=0; i<arguments.length; i++){
   arr[i] = arguments[i];
  }
  arr = arr.slice(1);
  var func = eval(sFuncStr + arguments[0]);
  func.apply(window, arr);
 }
 catch(ex){
  window.alert("Error: " + ex.description);
 }
};

//-->
</script>
</head>

<body>

<input type="button" value="测试1--使用js_frame" οnclick='top.frames["js_frame"].fTest("content-1A", "content-1B")' />
<input type="button" value="测试2--使用fFunc" οnclick='fFunc("fTest", "content-2A", "content-2B")' />
<input type="button" value="测试3--使用apply" οnclick='fGoto("fTest", "content-3A", "content-3B")' />

</body>
</html>


/**
 * controller.htm
 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>:::Controller:::</title>
<script type="text/javascript">
<!--

function fTest(sStr1, sStr2){
 window.confirm(sStr1);
 window.alert(sStr2);
}

//-->
</script>
</head>

<body>
<p>:::JS Frame:::</p>
</body>
</html>

提一点建议。。。利用apply的那一个函数可以优化如下：

// Cross Frames Function Apply
var fGoto = function(){
 try{ 
    var arr = [];
      for(var i=0; i<arguments.length; i++){
       arr[i] = arguments[i];
      }
      arr = arr.slice(1);
   parent.frames['js_frame'][arguments[0]].apply(0, arr);
 }
 catch(ex){
  window.alert("Error: " + ex.description);
 }
};

bolover
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中call和apply方法浅谈
10-26
在JavaScript中，`call`和`apply`是两种非常重要的函数调用方式，它们都用于改变函数内部`this`的指向，实现函数的...在实际开发中，理解和熟练掌握`call`和`apply`方法对于编写高效、灵活的JavaScript代码至关重要。
javascript call和apply方法
10-30
在JavaScript中，`call`和`apply`是两种非常重要的函数调用方式，它们都用于改变函数执行时的上下文，即`this`的指向。`this`在JavaScript中是一个非常关键的概念，它通常指代函数执行时所在的对象。下面我们将深入...
Javascript call和apply区别及使用方法
10-26
JavaScript中通过call或者apply用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象
javascript中call和apply的用法示例分析
10-24
主要介绍了javascript中call和apply的用法示例分析，非常的详细,需要的朋友可以参考下
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 631
JavaScript青少年简明教程：函数及其相关知识（下）
【React 】开发环境搭建详细指南
lph159的博客
07-24 1263
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 449
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 245
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 622
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 202
【代码】vue el-select的下拉树形结构。
easyui 点击单元格的时候，获取该行另外一个字段的值
极客栈
07-29 301
通过绑定 DataGrid 的 ​​ 事件，可以轻松地在单击单元格时获取该行的其他字段值。这个方法适用于各种场景，比如在用户点击某个单元格时显示额外的信息、执行特定的操作等。希望这个示例能帮助你更好地理解和应用 EasyUI DataGrid 的事件处理。
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 309
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
angular入门基础教程(四）动态属性与事件
最新发布
峰会路转的博客
07-29 60
状态的变化导致属性值的变化，这个时候我们就需要用到动态属性，ng中的动态属性用[]包裹即可。
easyadmin layui js监听返回结果，进行token验证防止连点
weixin_43652106的博客
07-29 140
easyadmin layui js监听返回结果，进行token验证防止连点
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 636
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 804
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
让开发者生活更轻松的 JavaScript 字符串方法
粉丝们务必加入微信粉丝群
07-27 226
前端岗位内推来了JavaScript 最初被引入作为一种简单的客户端脚本语言，但现在，它已经成为一种真正的 WORA（一次编写到处运行）语言，使开发者能够构建桌面、移动、电视、CLI 和嵌入式应用程序。JavaScript 的初学者友好语法、生产性语言特性和良好管理的 ECMAScript 规范，激励了所有人使用 JavaScript 进行通用编程。ECMAScript 标准通过提供许多语言特性来...
爬虫基本原理入门
RHeng的博客
07-25 1124
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
Vue3学习总结
inside802的博客
07-28 187
9、计算属性：使用computed属性，可以给template传递一个经过计算后的值，当这个值放在缓存中，当这个值不发生改变时，则JS不会再次执行computed，这样就能提高运行速度。4、属性绑定：使用v-bind:命令来实现属性绑定，如果是绑定单个属性，命令为v-bind:attr=“attr”，也可以写为v-bind:attr，也可以简写为：。11、绑定CSS样式，是通过绑定style属性来实现的，语法为v-bind:style=“myStyle”.其中，myStyle是在vue中自定义的样式。
js中call和apply用法
07-11
在 JavaScript 中，`call` 和 `apply` 是用来改变函数执行上下文（即 `this` 的指向）的两个方法。 `call` 方法的语法是：`function.call(thisArg, arg1, arg2, ...)`。它接收一个参数列表，第一个参数是要设置的 `this` 值，后面的参数是函数的实参。 例如，假设有一个函数 `sayHello`： ```javascript function sayHello(name) { console.log("Hello, " + name); } ``` 我们可以使用 `call` 方法来修改 `sayHello` 函数的执行上下文： ```javascript sayHello.call(null, "John"); ``` 在上面的例子中，第一个参数 `null` 是要设置的 `this` 值（即执行上下文），后面的参数 `"John"` 是函数 `sayHello` 的实参。这样，函数将以 `null` 作为执行上下文，并输出 "Hello, John"。 与之类似，`apply` 方法的语法是：`function.apply(thisArg, [argsArray])`。它接收一个参数数组，第一个参数是要设置的 `this` 值，第二个参数是一个数组，包含了函数的实参。 使用 `apply` 方法来修改 `sayHello` 函数的执行上下文的示例： ```javascript sayHello.apply(null, ["John"]); ``` 这里的第一个参数仍然是 `null`，第二个参数是包含了 `"John"` 的数组 `["John"]`。 总结一下，`call` 和 `apply` 的区别在于传入参数的方式不同：`call` 方法接收一串参数列表，而 `apply` 方法接收一个参数数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值