有关JavaScript中call()和apply() 的一些理解


Posted in Javascript onMay 20, 2016

call()方法和apply()方法,在上层应用中用的不是很多,但在底层写JS框架的时候却常常看到。然后度娘谷哥一番,也发现好多达人写出了自己的理解和笔记,但始终还是云里雾里,于是去W3C学习了下

在W3C网上研究这两个方法的时候,看到一个词语,叫“对象冒充”,这个概念本人觉得还是挺重要的,让我对这两个方法理解起来更加直观。

call()方法,看下官方给出的例子

function sayColor(sPrefix,sSuffix) {
  alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.call(obj, "The color is ", "a very nice color indeed.");

最后输出的结果是“The color is blue, a very nice color indeed.”

call()方法就是将第一个参数替换方法中的this,然后后面的参数传入该方法使用

apply()方法,同样先看个官方给出的例子

function sayColor(sPrefix,sSuffix) {
  alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, new Array("The color is ", "a very nice color indeed."));

最后输出的结果仍然是“The color is blue, a very nice color indeed.”

其实call()方法和apply()方法可以粗略的认为是差不多的,第一个参数都是替换方法中this关键字,只是后面传给方法的传参方式不同,call是直接对应,apply是利用数组,在数组中一一对应

以上这篇有关JavaScript中call()和apply() 的一些理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 应用代码 方便的排序功能
Feb 06 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
Bootstrap表格和栅格分页实例详解
May 20 #Javascript
JavaScript 数组some()和filter()的用法及区别
May 20 #Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
May 20 #Javascript
AngularJS中的指令全面解析(必看)
May 20 #Javascript
浅析angularJS中的ui-router和ng-grid模块
May 20 #Javascript
javascript的理解及经典案例分析
May 20 #Javascript
JS中对象与字符串的互相转换详解
May 20 #Javascript
You might like
短波问题解答
2021/02/28 无线电
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
原生js实现购物车功能
2020/09/23 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
python3+PyQt5实现柱状图
2018/04/24 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python实现Selenium自动化Page模式
2019/07/14 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
python mock测试的示例
2020/10/19 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
高中生期末评语
2014/01/28 职场文书
公司放假通知怎么写
2015/04/15 职场文书
格林童话读书笔记
2015/06/30 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
pytorch 实现变分自动编码器的操作
2021/05/24 Python