JavaScript函数Call、Apply原理实例解析


Posted in Javascript onFebruary 17, 2020

这篇文章主要介绍了JavaScript函数Call、Apply原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

一、方法重用

使用 call() 方法,您可以编写能够在不同对象上使用的方法。

1、函数是对象方法

在 JavaScript 中,函数是对象的方法。

如果一个函数不是 JavaScript 对象的方法,那么它就是全局对象的函数(参见前一章)。

下面的例子创建了带有三个属性的对象(firstName、lastName、fullName)。

var person = {
  firstName:"Bill",
  lastName: "Gates",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
person.fullName();    // 将返回 "Bill Gates"

fullName 属性是一个方法。person 对象是该方法的拥有者。

fullName 属性属于 person 对象的方法。

二、call() 方法

call() 方法是预定义的 JavaScript 方法。

它可以用来调用所有者对象作为参数的方法。

通过 call(),您能够使用属于另一个对象的方法。

本例调用 person 的 fullName 方法,并用于 person1:

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"Bill",
  lastName: "Gates",
}
var person2 = {
  firstName:"Steve",
  lastName: "Jobs",
}
person.fullName.call(person1); // 将返回 "Bill Gates"

本例调用 person 的 fullName 方法,并用于 person2:

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe",
}
var person2 = {
  firstName:"Mary",
  lastName: "Doe",
}
person.fullName.call(person2); // 将返回 "Steve Jobs"

1、带参数的 call() 方法

call() 方法可接受参数:

var person = {
 fullName: function(city, country) {
  return this.firstName + " " + this.lastName + "," + city + "," + country;
 }
}
var person1 = {
 firstName:"Bill",
 lastName: "Gates"
}
person.fullName.call(person1, "Seattle", "USA");

三、 apply() 方法

apply() 方法与 call() 方法非常相似:

在本例中,person 的 fullName 方法被应用到 person1:

var person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}
var person1 = {
  firstName: "Bill",
  lastName: "Gates",
}
person.fullName.apply(person1); // 将返回 "Bill Gates"

1、call() 和 apply() 之间的区别

不同之处是:

call() 方法分别接受参数。

apply() 方法接受数组形式的参数。

如果要使用数组而不是参数列表,则 apply() 方法非常方便。

2、带参数的 apply() 方法

apply() 方法接受数组中的参数:

var person = {
 fullName: function(city, country) {
  return this.firstName + " " + this.lastName + "," + city + "," + country;
 }
}
var person1 = {
 firstName:"John",
 lastName: "Doe"
}
person.fullName.apply(person1, ["Oslo", "Norway"]);

与 call() 方法对比:

var person = {
 fullName: function(city, country) {
  return this.firstName + " " + this.lastName + "," + city + "," + country;
 }
}
var person1 = {
 firstName:"John",
 lastName: "Doe"
}
person.fullName.call(person1, "Oslo", "Norway");

3、在数组上模拟 max 方法

您可以使用 Math.max() 方法找到(数字列表中的)最大数字:

Math.max(1,2,3); // 会返回 3

由于 JavaScript 数组没有 max() 方法,因此您可以应用 Math.max() 方法。

Math.max.apply(null, [1,2,3]); // 也会返回 3

第一个参数(null)无关紧要。在本例中未使用它。

这些例子会给出相同的结果:

Math.max.apply(Math, [1,2,3]); // 也会返回 3
Math.max.apply(" ", [1,2,3]); // 也会返回 3
Math.max.apply(0, [1,2,3]); // 也会返回 3

4、JavaScript 严格模式

在 JavaScript 严格模式下,如果 apply() 方法的第一个参数不是对象,则它将成为被调用函数的所有者(对象)。在“非严格”模式下,它成为全局对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
利用python分析access日志的方法
Oct 26 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
详解vue-cli@2.x项目迁移日志
Jun 06 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
javascript异常处理实现原理详解
Feb 17 #Javascript
Vue+webpack实现懒加载过程解析
Feb 17 #Javascript
javascript History对象原理解析
Feb 17 #Javascript
Vue中fragment.js使用方法小结
Feb 17 #Javascript
javascript实现倒计时效果
Feb 17 #Javascript
JavaScript将数组转换为链表的方法
Feb 16 #Javascript
javascript canvas API内容整理
Feb 16 #Javascript
You might like
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php后门URL的防范
2013/11/12 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
javascript动态加载二
2012/08/22 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
python中subprocess批量执行linux命令
2018/04/27 Python
Python3爬取英雄联盟英雄皮肤大图实例代码
2018/11/14 Python
Python装饰器用法实例分析
2019/01/14 Python
Python检查ping终端的方法
2019/01/26 Python
python三引号如何输入
2020/07/06 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
python 实现的车牌识别项目
2021/01/25 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
理工科学生的自我评价
2013/12/15 职场文书
保险经纪人求职信
2014/03/11 职场文书
加强作风建设心得体会
2014/10/22 职场文书
2015年度校学生会工作总结报告
2015/05/23 职场文书
热血教师观后感
2015/06/10 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
AJAX学习笔记
2021/05/18 Javascript
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
Python的三个重要函数详解
2022/01/18 Python