javascript中call apply 的应用场景


Posted in Javascript onApril 16, 2015

在一些jQuery插件中经常看到类似 callback.call(xxx,xxx) 虽然看到书上有介绍 说call和apply函数可以改变作用域,但还是无法非常透彻的理解改变作用域主要是为了解决什么问题,有没有替代方案,或者 这2个函数主要为了解决什么问题,应用场景,何时使用最合适,每次读到这样的代码就晕了,一下子从线性阅读中跳出去了,感觉有点绕

call和apply的作用很简单,就是改变上下文,适用场景太多了,虽然有时候只是为了“美观”,下面几个是我常用的。

1.

Object.prototype.toString.call(Obj)

用来判断 Obj 的类型

arguments 虽然和Array 很像,但是他没有Array的push之类的方法,怎么办?
Array.prototype.push.call(arguments)

3.Javascript 没有私有方法的概念,想用闭包实现

(function () {
  var Person = function () {
    this.doSomeThing = function () {
      _privateFunction.call(this);
    }
  }

  var _privateFunction = function () {

  }

  window.Person = Person;

}).call(window);

差不多就是这个意思,callback的时候,当你希望你的callback中的上下文是当前上下文的时候,也可以用call或者apply,有什么好处呢?

这个时候你的callback 里面的this 就是指代当前上下文。例如一个类Person,然后他的方法 say 有一个callback的参数,如果这个callback是通过普通的括号来执行的话,那在这个callback里面执行person的其它方法还需要用person.other 来实现,但是切换上下文之后,就是this.other搞定~代码对比如下:

var Person = function(){

};

Person.prototype.say = function(callback){
  callback();
};

Person.prototype.other = function(){

};

var vincent = new Person();

vincent.say(function(){
  vincent.other();
});

用了call的:

var Person = function(){

};

Person.prototype.say = function(callback){
  callback.call(this);
};

Person.prototype.other = function(){

};

var vincent = new Person();

vincent.say(function(){
  this.other();
});

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
判断ie的两种简单方法
Aug 12 Javascript
jQuery获取DOM节点实例分析(2种方式)
Dec 15 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
javascript三元运算符用法实例
Apr 16 #Javascript
jQuery on()方法使用技巧详解
Apr 16 #Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 #Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 #Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 #Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 #Javascript
JQuery跳出each循环的方法
Apr 16 #Javascript
You might like
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
提高Laravel应用性能方法详解
2019/06/24 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
javascript 节点排序 2
2011/01/31 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
使用python实现kNN分类算法
2019/10/16 Python
keras 多gpu并行运行案例
2020/06/10 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
Diptyque英国官方网站:源自法国的知名香氛品牌
2019/08/28 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
旅游专业职业生涯规划范文
2014/01/13 职场文书
无传销社区工作方案
2014/05/13 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
mysql数据库隔离级别详解
2022/06/16 MySQL