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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
javascript demo 基本技巧
Dec 18 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
Sep 24 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
vue 中引用gojs绘制E-R图的方法示例
Aug 24 Javascript
react 应用多入口配置及实践总结
Oct 17 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
global.php
2006/12/09 PHP
php中将汉字转换成拼音的函数代码
2012/09/08 PHP
php_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
PHP预定义变量9大超全局数组用法详解
2016/04/23 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
JS截取url中问号后面参数的值信息
2014/04/29 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
Bootstrap精简教程
2015/11/27 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
详解如何在vue项目中使用layui框架及采坑
2019/05/05 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
python实现多线程的两种方式
2016/05/22 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
Django多数据库联用实现方法解析
2020/11/12 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
秋天的图画教学反思
2014/05/01 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
合作协议书模板2014
2014/09/26 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
庆七一活动简报
2015/07/20 职场文书