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 相关文章推荐
javascript比较文档位置
Apr 08 Javascript
js禁止document element对象选中文本实现代码
Mar 21 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
JS中使用正则表达式g模式和非g模式的区别
Apr 01 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
koa-router路由参数和前端路由的结合详解
May 19 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
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
PHP入门学习笔记之一
2010/10/12 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
Python列表生成器的循环技巧分享
2015/03/06 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
美发店5.1活动方案
2014/01/24 职场文书
关于保护环境的标语
2014/06/09 职场文书
中国梦口号
2014/06/13 职场文书
政工例会汇报材料
2014/08/26 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
同学聚会开幕词
2019/04/02 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Nginx如何配置根据路径转发详解
2022/07/23 Servers