Function.prototype.call 和 Function.prototype.apply 的区别
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函数的第二个参数是数组！！！
模型:
<!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>
<title>call和apply函数</title>
<style type="text/css">
*{float:left;width:100%;margin-left:20px;}
*{max-height:100%;max-width:100%}
*,: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}
html{font-size:10px;font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
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}
div{margin:0;}
span{font-size:16px;font-weight:600;margin-top:10px;}
code{line-height:30px;padding:5px;margin:10px 20px;border:1px solid #fcc;}
.button
{
font-size: 16px;
font-weight: 300;
line-height: 32px; display: inline-block; width:auto;
height: 32px;
padding: 0 20px; -webkit-transition: .3s all;
-moz-transition: .3s all;
-ms-transition: .3s all;
-o-transition: .3s all;
transition: .3s all;
text-align: center;
text-decoration: none; color: #fff;
border: none;
border-radius: 4px; appearance: none;
-webkit-box-orient: vertical;
}
.button:hover,
.button:focus,
.button:active,
{
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .3); -ms-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
-o-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}
.button:hover
{
text-decoration: none; color: #fff;
outline: none;
}
.button:focus
{
color: #fee;
}
.button:visited
{
color: #fff;
}
.button:active
{
text-decoration: none; color: #fff;
}
.button.gold
{
border-color: #feae1b;
background-color: #feae1b;
}
.button.gold:hover,
.button.gold:focus
{
border-color: #fec04e;
background-color: #fec04e;
}
.button.gold:active
{
color: #e59501;
border-color: #f3ab26;
background-color: #f3ab26;
}
</style>
<script type="text/javascript">
var fn = function (msg, isalert) {
if (isalert) alert(this + msg);
};
function call() {
fn.call("我是：", "工具包(cntooltik)", true);
}
function apply() {
fn.apply("我是：", ["工具包(cntooltik)", true]);
}
</script>
</head>
<body>
<span>申明函数：</span>
<div>
<code>
var fn = function (msg, isalert) {
if (isalert) alert(this + msg);
};
</code>
</div>
<span>函数调用：</span>
<div>
<code>
function call() {
fn.call("我是：", "工具包(cntooltik)", true);
}
</code>
</div>
<button class="button gold" onclick="javascript:call()">call函数测试</button>
<div>
<code>
function apply() {
fn.apply("我是：", ["工具包(cntooltik)", true]);
}
</code>
</div>
<button class="button gold" onclick="javascript:apply()">apply函数测试</button>
</body>
</html>
Function.prototype.call 和 Function.prototype.apply 的区别的更多相关文章
- Function.prototype.bind、call与apply方法简介
前言 前段时间面试遇见一题,题目内容大概是 function Parent() { this.prop = 'parent'; } Parent.prototype.get = function() ...
- 探索 Reflect.apply 与 Function.prototype.apply 的区别
探索 Reflect.apply 与 Function.prototype.apply 的区别 众所周知, ES6 新增了一个全局.内建.不可构造的 Reflect 对象,并提供了其下一系列可被拦截的 ...
- Function.prototype.bind、call与apply
学习Function.prototype.bind.call与apply时,看到一篇博客,学到一些内容,但由于博客时间太久,根据官方文档对内容进行一些修正:下文为修正过内容 前言 前段时间面试遇见一题 ...
- error: function declaration isn’t a prototype [-Werror=strict-prototypes]
"warning: function declaration isn't a prototype" was caused by the function like that: ...
- JS 究竟是先有鸡还是有蛋，Object与Function究竟谁出现的更早，Function算不算Function的实例等问题杂谈
壹 ❀ 引 我在JS 疫情宅在家,学习不能停,七千字长文助你彻底弄懂原型与原型链一文中介绍了JavaScript原型与原型链,以及衍生的__proto__.constructor等一系列属性.在解答了 ...
- 原型对象prototype和原型属性[[Prototype]]
构造器:可以被 new 运算符调用, Boolean,Number,String,Date,RegExp,Error,Function,Array,Object 都是构造器,他们有各自的实现方式. 比 ...
- prototype/constructor/__proto__之prototype
1任何对象都有__proto__属性 属性值Object2并不是所有对象都有prototype属性.只有方法对象(构造函数)以及基本数据类型还有Array,有prototype属性;并且所有方法(对象 ...
- js函数使用prototype和不适用prototype的区别
js中类定义函数时用prototype与不用的区别 原创 2017年06月05日 12:25:41 标签: 函数 / prototype / class 首先来看一个实例: function Li ...
- javascript工厂函数(factory function)vs构造函数(constructor function)
如果你从其他语言转到javascript语言的开发,你会发现有很多让你晕掉的术语,其中工厂函数(factory function)和构造函数(constructor function)就是其中的一个. ...
- $(window).load(function() {})和$(document).ready(function(){})的区别
JavaScript 中的以下代码 : Window.onload = function (){// 代码 } 等价于 Jquery 代码如下: $(window).load(function ( ...
随机推荐
- 记录一则ORA-00054,ORA-00031解决过程
生产环境:AIX 5.3 + Oracle 10.2.0.5 任务要求:普通表改造分区表,历史数据不要 这个需求很简单: pl/sql导出建表语句,依次修改成分区的建表语句,注意将索引修改成本地索 ...
- 软件工程-构建之法 理解C#一小段程序
一.前言 老师给出的要求: 阅读下面程序,请回答如下问题: 问题1:这个程序要找的是符合什么条件的数? 问题2:这样的数存在么?符合这一条件的最小的数是什么? 问题3:在电脑上运行这一程序,你估计多长 ...
- WebGIS中解决使用Lucene进行兴趣点搜索排序的两种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前跟信息采集相关的一个项目提出了这样的一个需求:中国银行等 ...
- SQL SERVER四舍五入你除了用ROUND还有其他方法吗？
引言 今天和测试沟通一个百分比计算方式时遇到一个问题, 我在存储过程里用到了强转CAST(32.678 AS DECIMAL(5,1)) 我认为该方式只会保留一位小数,我给测试的回复是我并没有用到四 ...
- CSS魔法堂：小结一下Box Model与Positioning Scheme
前言 对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考. <CSS魔法堂:重新认识Box Model.IFC.B ...
- 前端必须了解的布局常识：普通流（normal flow）
目录 一.概述 二.块级元素和内联元素 常见的块级元素 BFC 常见的行内元素 IFC 三.哪些情况会脱离普通流 浮动 绝对定位 固定定位 display:none 四.总结 五.参考资料 一.概述 ...
- MVC学习系列9--控制器接收从视图传递过来的参数
前面学习了,从控制器向视图传递数据,现在学习怎么从视图向控制器传递数据. 通常,我们有两种方式,来处理浏览器的请求,一个是GET方式,一个是POST方式.一般来说,直接通过在浏览器中输入URL话,请求 ...
- 图片全部加载完成之后再显示页面ui，公司项目里用上，自己写的几行代码
说明: -----onload事件 这里我并没有考虑ie的兼容性 因为项目是移动端的: -----求大神指正~ -----自己测试正常 页面没加载完之前会有一个提示 /************** ...
- 第三方登录插件.NET版XY.OAuth-CSharp
XY.OAuth-CSharp GitHub:XY.OAuth-CSharp OSChina:XY.OAuth-CSharp 第三方登录插件.NET版 使用 首先,从NuGet上安装"XY. ...
- WPF透明设置(Opacity)
<TextBlock Text="阴影效果" FontSize="32"></TextBlock> <Border Height= ...