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 iframe内的函数调用实现方法
Jul 19 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
Aug 16 Javascript
input框中的name和id的区别
Nov 16 Javascript
Bootstrap响应式表格详解
May 23 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
利用node.js开发cli的完整步骤
Dec 29 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
微信公众平台消息接口校验与消息接口响应实例
2014/12/23 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
浅析js封装和作用域
2013/07/09 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
vue router 配置路由的方法
2018/07/26 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
解决antd的Form组件setFieldsValue的警告问题
2020/10/29 Javascript
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Django开发中的日志输出的方法
2018/07/02 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python日志logging模块使用方法分析
2019/05/23 Python
对django中foreignkey的简单使用详解
2019/07/28 Python
Python continue语句实例用法
2020/02/06 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
哪些情况下不应该使用索引
2015/07/20 面试题
党支部考察鉴定意见
2015/06/02 职场文书
中国合伙人观后感
2015/06/02 职场文书
大学体育课感想
2015/08/10 职场文书
SQL Server——索引+基于单表的数据插入与简单查询【1】
2021/04/05 SQL Server