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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
js模拟淘宝网的多级选择菜单实现方法
Aug 18 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
React + webpack 环境配置的方法步骤
Sep 07 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
jquery实现点击弹出对话框
Feb 08 jQuery
vue中使用腾讯云Im的示例
Oct 23 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-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP获取中英混合字符串长度的方法
2014/06/07 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php生成rss类用法实例
2015/04/14 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
react-native 封装选择弹出框示例(试用ios&android)
2017/07/11 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python3 re返回形式总结
2020/11/20 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
小学教师师德反思
2014/02/03 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
MySQL Server层四个日志的实现
2022/03/31 MySQL
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python