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 相关文章推荐
JavaScript浏览器选项卡效果
Aug 25 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php向js函数传参的几种方法
2014/08/10 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
javascript call方法使用说明
2010/01/11 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
ES6新特性:使用export和import实现模块化详解
2017/07/31 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
js实现简易计算器功能
2019/10/18 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
小区停车场管理制度
2014/01/27 职场文书
小学生考试获奖感言
2014/01/30 职场文书
小学端午节活动方案
2014/03/13 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL