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 相关文章推荐
小议Function.apply() 之一------(函数的劫持与对象的复制)
Nov 30 Javascript
用javascript编写的第一人称射击游戏
Feb 25 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
Node.js的特点详解
Feb 03 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
介绍php设计模式中的工厂模式
2008/06/12 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
微信小程序定位当前城市的方法
2018/07/19 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
python3的pip路径在哪
2020/06/23 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
平面设计自荐信
2013/10/07 职场文书
迟到检讨书800字
2014/01/13 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
护理专科毕业自荐信范文
2014/04/21 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
2015年公司国庆放假通知
2015/07/30 职场文书
公司安全管理制度范本
2015/08/05 职场文书
2016教师学习教育法心得体会
2016/01/19 职场文书