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 相关文章推荐
解决用jquery load加载页面到div时,不执行页面js的问题
Feb 22 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
ionic3双击返回退出应用的方法
Sep 17 Javascript
Vue.js中的高级面试题及答案
Jan 13 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集成FCK的函数代码
2008/09/27 PHP
PHP中PDO的错误处理
2011/09/04 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
Python sys.path详细介绍
2013/10/17 Python
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python实现简单颜色识别程序
2020/02/19 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
实习自我鉴定模板
2013/09/28 职场文书
小学生开学感言
2014/02/28 职场文书
房屋出租委托书格式
2014/09/23 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
2014年维稳工作总结
2014/11/18 职场文书
尼克胡哲观后感
2015/06/08 职场文书
祝福语集锦:给妹妹结婚的祝福语
2019/12/18 职场文书
通过Python把学姐照片做成拼图游戏
2022/02/15 Python
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python