javascript中call apply 的应用场景

 更新时间:2015年04月16日 11:23:58   投稿:hebedich  
call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.

在一些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();
});

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

相关文章

  • JS动态创建Table,Tr,Td并赋值的具体实现

    JS动态创建Table,Tr,Td并赋值的具体实现

    这篇文章介绍了JS动态创建Table,Tr,Td并赋值的具体实现,有需要的朋友可以参考一下
    2013-07-07
  • javascript 面向对象封装与继承

    javascript 面向对象封装与继承

    本文是对自己这么长时间以来学习javascript面向对象的总结,这里针对封装和继承结合实例进行了详细分析,给有相同需求的小伙伴们参考下吧。
    2014-11-11
  • js闭包实现按秒计数

    js闭包实现按秒计数

    闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。相信很少有人能直接看懂这句话,因为他描述的太学术。其实这句话通俗的来说就是:JavaScript中所有的function都是一个闭包。
    2015-04-04
  • NodeJS的模块写法入门(实例代码)

    NodeJS的模块写法入门(实例代码)

    前面提到了NodeJS的命令行和Web版之“Hello,World”。命令行是直接执行hello.js文件,Web版的需要require http模块。http模块是NodeJS自身提供的
    2012-03-03
  • js中小数转换整数的方法

    js中小数转换整数的方法

    js中小数转换整数的方法有很多,有下退、上进、四舍五入等等,需要的朋友可以了解下本文
    2014-01-01
  • js防止表单重复提交实现代码

    js防止表单重复提交实现代码

    重复提交、重复刷新、防止后退等等都是属于系统为避免重复记录而需要解决的问题,在客户端去处理需要针对每一种的可能提出相应的解决方案,然而在服务器端看来只不过是对于数据真实性的检验问题
    2012-09-09
  • JS 控制非法字符的输入代码

    JS 控制非法字符的输入代码

    JS控制非法字符的输入实现代码,需要的朋友可以参考下。
    2009-12-12
  • Javascript的promise,async和await的区别详解

    Javascript的promise,async和await的区别详解

    这篇文章主要为大家详细介绍了Javascript的promise,async和await的区别,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • dispatchEvent解决重叠元素响应事件示例详解

    dispatchEvent解决重叠元素响应事件示例详解

    这篇文章主要为大家介绍了dispatchEvent解决重叠元素响应事件示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • JS实现点击图片在当前页面放大并可关闭的漂亮效果

    JS实现点击图片在当前页面放大并可关闭的漂亮效果

    点击图片在当前页面放大的漂亮效果实现方法有很多,在本文将为大家介绍下使用Lightbox JS是如何实现的,感兴趣的朋友不要错过
    2013-10-10

最新评论