javascript中call apply 的应用场景_javascript技巧

在一些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
, apply
, call
应用场景
js call apply、call apply、call和apply区别、call apply 区别、js call apply 区别,以便于您获取更多的相关知识。

时间: 2024-08-29 05:32:44

javascript中call apply 的应用场景_javascript技巧的相关文章

跟我学习javascript的call(),apply(),bind()与回调_javascript技巧

一.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.简单的说就是改变函数执行的上下文,这是最基本的用法.两个方法基本区别在于传参不同. call(obj,arg1,arg2,arg3); call第一个参数传对象,可以是null.参数以逗号分开进行传值,参数可以是任何类型. apply(obj,[arg1,arg2,arg3]); appl

JavaScript中的依赖注入详解_javascript技巧

计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架.随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题.依赖注入解决的正是如何有效组织代码依赖模块的问题.你可能在一些框架或者库种听说过"依赖注入"这个词,比如说著名的前端框架AngularJS,依赖注入就是其中一个非常

JavaScript中的DSL元编程介绍_javascript技巧

在看JavaScript Template源码的时候,发现有一个很有意思的用法用来生成函数,想到这不就是元编程么? JavaScript 元编程 复制代码 代码如下:  元编程(Metaprogramming)是指某类计算机程序的编写,这类计算机程序编写或者操纵其他程序(或者自身)作为它们的数据,或者在运行时完成部分本应在编译时完成的工作. JavaScript eval 复制代码 代码如下:  eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 可以有下面的用法:

JavaScript中判断数据类型的方法总结_javascript技巧

typeoftypeof用的比较多的时候,是判断某个全局变量在不在,假如某个页面定义了一个全局变量.假如你做如下判断: //haorooms是全局变量 if(haorooms!=undefined){ }//js会报错,说"Uncaught ReferenceError: haorooms is not defined" 解决的方法是我们如下写: if(typeof haorooms!=undefined){ } 用了typeof之后,就不会报错了!这是typeof的应用之一! 此外,

this,this,再次讨论javascript中的this,超全面(经典)_javascript技巧

JavaScript 是一种脚本语言,因此被很多人认为是简单易学的.然而情况恰恰相反,JavaScript 支持函数式编程.闭包.基于原型的继承等高级功能.本文仅采撷其中的一例:JavaScript 中的 this 关键字,深入浅出的分析其在不同情况下的含义,形成这种情况的原因以及 Dojo 等 JavaScript 工具中提供的绑定 this 的方法.可以这样说,正确掌握了 JavaScript 中的 this 关键字,才算迈入了 JavaScript 这门语言的门槛.  至于js中this这

深入浅析JavaScript中prototype和proto的关系_javascript技巧

prototype,每一个函数对象都有一个显示的prototype属性,它代表了对象的原型(Function.prototype函数对象是个例外,没有prototype属性). __proto__:每个对象都有一个名为__proto__的内部隐藏属性,指向于它所对应的原型对象(chrome.firefox中名称为__proto__,并且可以被访问到).原型链正是基于__proto__才得以形成 (note:不是基于函数对象的属性prototype). 简单的说:__proto__是内部原型,pr

JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决_javascript技巧

var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比较,在做的时候个人习惯使用chrome作为调试工具,代码基本完成之后,一切正常: 使用其他浏览器访问,好嘛,IE跟safari都不兼容,返回错误"Invalid Date". 想着估计是字符串格式的问题,改成'2016/11/11 11:11:11'再测试,结果正常,以为这样应该没问题了,

JavaScript中的事件委托及好处_javascript技巧

1,什么是事件委托:通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件. 也就是:利用冒泡的原理,把事件加到父级上,触发执行效果. 好处呢:1,提高性能. 我们可以看一个例子:需要触发每个li来改变他们的背景颜色. <ul id="ul"> <li>aaaaaaaa</li> <li>bbbbbbbb&l

javascript中获取class的简单实现_javascript技巧

js中没有获取class的办法,找了一些封装好的方法,这里整理一下 (1)先进行封装 //封装getClass function getClass(tagName,className) //获得标签名为tagName,类名className的元素 { if(document.getElementsByClassName) //支持这个函数 { return document.getElementsByClassName(className); } else { var tags=document