call和apply函数是function函数的基本属性,都可以用于更改函数对象和传递参数,是前端工程师常用的函数。具体使用方法请参考以下案列:

 例如:

   申明函数: var fn = function (msg, isalert) { if (isalert) alert(this + msg); };

   用法:

    call: fn.call(/*context,arg1,arg2,...*/);

    apply:fn.call(/*context,[arg1,arg2,...]*/);

   讲述:第一个参数(context)将成为 fn 函数的 this 对象,参数 arg1 对应fn函数的参数 msg,参数 arg2 对应fn函数的参数 isalert;

   注:apply函数的第二个参数是数组!!!

   模型:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>call和apply函数</title>
  5. <style type="text/css">
  6. *{float:left;width:100%;margin-left:20px;}
  7. *{max-height:100%;max-width:100%}
  8. *,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box}
  9. html{font-size:10px;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
  10. body{margin:0 auto;width:80%;background-color:#fff;color:#333;font-size:10pt;font-family:"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;line-height:1.42857143}
  11. div{margin:0;}
  12. span{font-size:16px;font-weight:600;margin-top:10px;}
  13. code{line-height:30px;padding:5px;margin:10px 20px;border:1px solid #fcc;}
  14. .button
  15. {
  16. font-size: 16px;
  17. font-weight: 300;
  18. line-height: 32px;
  19.  
  20. display: inline-block;
  21.  
  22. width:auto;
  23. height: 32px;
  24. padding: 0 20px;
  25.  
  26. -webkit-transition: .3s all;
  27. -moz-transition: .3s all;
  28. -ms-transition: .3s all;
  29. -o-transition: .3s all;
  30. transition: .3s all;
  31. text-align: center;
  32. text-decoration: none;
  33.  
  34. color: #fff;
  35. border: none;
  36. border-radius: 4px;
  37.  
  38. appearance: none;
  39. -webkit-box-orient: vertical;
  40. }
  41. .button:hover,
  42. .button:focus,
  43. .button:active,
  44. {
  45. -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  46. -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  47. box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  48. text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  49.  
  50. -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  51. -o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
  52. }
  53. .button:hover
  54. {
  55. text-decoration: none;
  56.  
  57. color: #fff;
  58. outline: none;
  59. }
  60. .button:focus
  61. {
  62. color: #fee;
  63. }
  64. .button:visited
  65. {
  66. color: #fff;
  67. }
  68. .button:active
  69. {
  70. text-decoration: none;
  71.  
  72. color: #fff;
  73. }
  74. .button.gold
  75. {
  76. border-color: #feae1b;
  77. background-color: #feae1b;
  78. }
  79. .button.gold:hover,
  80. .button.gold:focus
  81. {
  82. border-color: #fec04e;
  83. background-color: #fec04e;
  84. }
  85. .button.gold:active
  86. {
  87. color: #e59501;
  88. border-color: #f3ab26;
  89. background-color: #f3ab26;
  90. }
  91. </style>
  92. <script type="text/javascript">
  93. var fn = function (msg, isalert) {
  94. if (isalert) alert(this + msg);
  95. };
  96. function call() {
  97. fn.call("我是:", "工具包(cntooltik)", true);
  98. }
  99. function apply() {
  100. fn.apply("我是:", ["工具包(cntooltik)", true]);
  101. }
  102. </script>
  103. </head>
  104. <body>
  105. <span>申明函数:</span>
  106. <div>
  107. <code>
  108. var fn = function (msg, isalert) {
  109. if (isalert) alert(this + msg);
  110. };
  111. </code>
  112. </div>
  113. <span>函数调用:</span>
  114. <div>
  115. <code>
  116. function call() {
  117. fn.call("我是:", "工具包(cntooltik)", true);
  118. }
  119. </code>
  120. </div>
  121. <button class="button gold" onclick="javascript:call()">call函数测试</button>
  122. <div>
  123. <code>
  124. function apply() {
  125. fn.apply("我是:", ["工具包(cntooltik)", true]);
  126. }
  127. </code>
  128. </div>
  129. <button class="button gold" onclick="javascript:apply()">apply函数测试</button>
  130. </body>
  131. </html>

Function.prototype.call 和 Function.prototype.apply 的区别的更多相关文章

  1. Function.prototype.bind、call与apply方法简介

    前言 前段时间面试遇见一题,题目内容大概是 function Parent() { this.prop = 'parent'; } Parent.prototype.get = function() ...

  2. 探索 Reflect.apply 与 Function.prototype.apply 的区别

    探索 Reflect.apply 与 Function.prototype.apply 的区别 众所周知, ES6 新增了一个全局.内建.不可构造的 Reflect 对象,并提供了其下一系列可被拦截的 ...

  3. Function.prototype.bind、call与apply

    学习Function.prototype.bind.call与apply时,看到一篇博客,学到一些内容,但由于博客时间太久,根据官方文档对内容进行一些修正:下文为修正过内容 前言 前段时间面试遇见一题 ...

  4. error: function declaration isn’t a prototype [-Werror=strict-prototypes]

    "warning: function declaration isn't a prototype" was caused by the function like that:   ...

  5. JS 究竟是先有鸡还是有蛋,Object与Function究竟谁出现的更早,Function算不算Function的实例等问题杂谈

    壹 ❀ 引 我在JS 疫情宅在家,学习不能停,七千字长文助你彻底弄懂原型与原型链一文中介绍了JavaScript原型与原型链,以及衍生的__proto__.constructor等一系列属性.在解答了 ...

  6. 原型对象prototype和原型属性[[Prototype]]

    构造器:可以被 new 运算符调用, Boolean,Number,String,Date,RegExp,Error,Function,Array,Object 都是构造器,他们有各自的实现方式. 比 ...

  7. prototype/constructor/__proto__之prototype

    1任何对象都有__proto__属性 属性值Object2并不是所有对象都有prototype属性.只有方法对象(构造函数)以及基本数据类型还有Array,有prototype属性;并且所有方法(对象 ...

  8. js函数使用prototype和不适用prototype的区别

    js中类定义函数时用prototype与不用的区别 原创 2017年06月05日 12:25:41 标签: 函数 / prototype / class   首先来看一个实例: function Li ...

  9. javascript工厂函数(factory function)vs构造函数(constructor function)

    如果你从其他语言转到javascript语言的开发,你会发现有很多让你晕掉的术语,其中工厂函数(factory function)和构造函数(constructor function)就是其中的一个. ...

  10. $(window).load(function() {})和$(document).ready(function(){})的区别

    JavaScript 中的以下代码 : Window.onload = function (){// 代码 }  等价于  Jquery 代码如下: $(window).load(function ( ...

随机推荐

  1. (十八)WebGIS中清空功能和地图定位功能的设计以及实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 当地图中增加了很多元素后,对不同的元素需要进行一定的控制,最 ...

  2. IO多路复用之epoll总结

    1.基本知识 epoll是在2.6内核中提出的,是之前的select和poll的增强版本.相对于select和poll来说,epoll更加灵活,没有描述符限制.epoll使用一个文件描述符管理多个描述 ...

  3. Ftp上传下载 C#

    public class MyFtpClass { private readonly string _destIp; private readonly string _userName; privat ...

  4. Android之消息机制Handler,Looper,Message解析

    PS:由于感冒原因,本篇写的有点没有主干,大家凑合看吧.. 学习内容: 1.MessageQueue,Looper,MessageQueue的作用. 2.子线程向主线程中发送消息 3.主线程向子线程中 ...

  5. 简述.NET事务应用原则

    .NET事务应用原则 1.在同一个数据库内进行CRUD时,应使用同一个DbConnection对象,且显式指定DbConnection均为同一个DbTransaction,示例代码如下: //在同一个 ...

  6. asp.net <asp:Content>控件

    <asp:Content ID="Content2" ContentPlaceHolderID="CPH_MainContent" runat=" ...

  7. 微信公众平台自动回复wechatlib.jar的生成及wechatlib解析

    微信公众平台出来有一段时日了,官方提供的自动回复的接口调用大致是这么些类型(text/image/location/link),每个项目都如此拷贝代码,在笔者看来比较麻烦,今天乘着点闲暇的时间特意将这 ...

  8. JS学习笔记8之 BOM-浏览器对象模型

    *什么是BOM -->BOM (Browser Object Model) 浏览器对象模型-->BOM提供了独立于内容而与浏览器窗口进行交互的对象-->BOM主要用于管理窗口与窗口之 ...

  9. iOS 根据字符串数目,自定义Label等控件的高度

    利用分类,NSString,增加一个方法. #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interfa ...

  10. 基于WebGL的三维地形渲染

    1.生成WebMap页面 #!/usr/bin/env python # -*- coding: utf-8 -*- import subprocess from jinja2 import Envi ...