Javascript中call与apply的学习笔记

先看MDN中对于call的解释

call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.

注:该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

语法

fun.call(thisArg[, arg1[, arg2[, ...]]])

参数
thisArg

在fun函数运行时指定的this值。需要注意的是，指定的this值并不一定是该函数执行时真正的this值，如果这个函数处于非严格模式下，则指定为null和undefined的this值会自动指向全局对象(浏览器中就是window对象)，同时值为原始值(数字，字符串，布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ...

指定的参数列表。

MDN上的例子一开始并不是很好理解，这里我贴出来，有兴趣可以自己去看看 call-Javascript

这里的thisArg解释为在fun运行时指定的this值，也就是说使用了call后，fun中的this指向了thisArg？看代码

 var p="456";
 function f1(){
  this.p="123";
 }
 function f2() {
  console.log(this.p);
 }
 f2();       //456  f2.call(f1());  //123  f2.apply(f1());  //123

第一次输出是调用的全局变量，之后由于call和apply的使用，f2中的this指向了f1，因此，输出变成了123，其实也就是f1借用了f2的方法输出了自己的p

这时将f1()中的this.p删除，会输出三个456，也就证实了当this为null或者undefined时其实指向了全局变量

至于指向原始值是指向它的包装对象这里，由于我理解的包装对象都是临时的，而且测试时只输出了原始值的类型而不是object，这里如何证明如果有知道的朋友希望可以和我讨论下，谢谢！

既然call可以实现一个对象借用另一个对象，不就可以实现继承了么？看代码

 function f1(){
  this.father="father"
 }
 function f2() {
  f1.call(this);
  this.child="child";
 } var test=new f2();
console.log(test.father);  //father

test中是没有father的，由于f2()中的

f1.call(this);

这里的this指向的就是f2，也就是f2借用了f1的方法，其实也就实现了继承

下面讲一下这里的参数，这里的参数是传递给fun的，看代码吧

 function f1(){
  this.p="123";
 }
 function f2(x) {
  console.log(this.p);
  console.log(x);
 }
 f2.call(f1(),456);   //123
//456

先输出123是因为f1中的p，之后的456是传递给f2的参数，很容易理解

主要是注意call和apply中参数的区别

call是一个一个传入的，而apply是传入的一个数组

  function f1(){
  this.p="测试call";
 }
 function f2(x,y,z) {
  console.log(this.p);
  console.log(x);
  console.log(y);
  console.log(z);
 }
   function f3(){
  this.p="测试apply";
 }
 f2.call(f1(),4,5,6);
 f2.call(f1(),[4,5,6]);
 f2.apply(f3(),[4,5,6]);
 f2.apply(f3(),4,5,6);

这里可以看到结果

第一段测试call是正确输出

第二段测试call由于传入数组，所以先输出一个数组然后两个undefined

第三段测试apply正确输出

第四段由于参数格式错误直接报错

这里的区别应该很明显了

赞 (0)

相关推荐

  • 理解Javascript的caller,callee,call,apply区别

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n] 参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引.  说明 arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.arguments是一个类似数组但不是数组的对象,说它类似

  • 实例分析javascript中的call()和apply()方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,argArray]])

  • JavaScript 学习笔记（九）call和apply方法

    call和apply方法 call方法可改变上下文this指针,类似的方法还有apply,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针. obj1.method1.call(obj2,argument1,argument2) 如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1-这些做为参数传入. 举一个具体的例子 复制代码 代码如下: function add(a, b) { alert(a + b);

  • javascript下arguments,caller,callee,call,apply示例及理解

    在提到上述的概念之前,首先想说说javascript中函数的隐含参数:arguments Arguments 该对象代表正在执行的函数和调用它的函数的参数. [function.]arguments[n] 参数function :选项.当前正在执行的 Function 对象的名字. n :选项.要传递给 Function 对象的从0开始的参数值索引. 说明 Arguments是进行函数调用时,除了指定的参数外,还另外创建的一个隐藏对象.Arguments是一个类似数组但不是数组的对象,说它类似数

  • JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组.call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来. 例1: 复制代码 代码如下: window.firstName = "diz"; window.lastName = "song"; var myObjec

  • JavaScript学习点滴 call、apply的区别

    1.call call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global

  • JavaScript中apply与call的用法意义及区别说明

    apply和call,它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数的方式有所区别: Function.prototype.apply(thisArg,argArray); Function.prototype.call(thisArg[,arg1[,arg2-]]); 从函数原型可以看到,第一个参数都被取名为thisArg,即所有函数内部的this指针都会被赋值为thisArg,这就实现了将函数作为另外一个对象的方法运行的目的.两个方法除了thisArg参数,都是为Funct

  • Javascript中call与apply的学习笔记

    Javascript中call与apply的学习笔记

    先看MDN中对于call的解释 call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法. 注:该方法的作用和 apply() 方法类似,只有一个区别,就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组. 语法 fun.call(thisArg[, arg1[, arg2[, ...]]]) 参数 thisArg 在fun函数运行时指定的this值.需要注意的是,指定的this值并不一定是该函数执行时真正的this值

  • JavaScript中的Number数字类型学习笔记

    JavaScript中的Number数字类型学习笔记

    使用IEEE754格式来表示整数和浮点数值. 浮点数值:该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字.浮点数值需要内存空间是保存整数值的两倍.最高精度是17为小数,但在进行算术运算时其精度远远不如整数. 各种数值类型:十进制,八进制(在严格模式下无效),十六进制 八进制字面量的第一位必须是0,然后是八进制数字序列(0~7).如果字面值中的数值超出了范围,那么前导0将被忽略,后面的数值将被当做十进制数来解析 070//56 079//79 十六进制字面值的前两位必须是0x,后跟十六

  • 有关JavaScript中call()和apply() 的一些理解

    call()方法和apply()方法,在上层应用中用的不是很多,但在底层写JS框架的时候却常常看到.然后度娘谷哥一番,也发现好多达人写出了自己的理解和笔记,但始终还是云里雾里,于是去W3C学习了下 在W3C网上研究这两个方法的时候,看到一个词语,叫"对象冒充",这个概念本人觉得还是挺重要的,让我对这两个方法理解起来更加直观. call()方法,看下官方给出的例子 function sayColor(sPrefix,sSuffix) { alert(sPrefix + this.colo

  • JavaScript for循环 if判断语句(学习笔记)

    今天学习了JavaScript里面的for循环以及if的判断语句 for(初始值:循环条件:操作){ 满足条件要执行的代码语句 } 初始值:循环前的初始化变量,通常为赋值表达式:建议用var赋值,可以加快运行速度. 循环条件:每次循环前要计算的条件,是运算符类别中的条件运算符,返回值为true或false,当返回值为true时执行循环,为false时退出循环.(往往是i>=n;或用逻辑运算符) 操作:每循环一次以后要计算的表达式,通常是递增++或递减--等赋值表达式. for语句中的三个参数,第

  • javascript中call()、apply()的区别

    call().apply()的区别: 相同点: 1.call()和apply()都可以用来间接调用函数,都可以显式调用所需的this.即,任何函数可以作为任何对象的方法来调用. 2.两个方法都可以指定调用实参. 区别: call()和apply()的基本区别:在于将参数传递给函数. call():使用其自有的实参列表作为函数的参数: apply():要求以数组的形式传入参数. function track(o,m){ var original =o[m]; o[m] =function( ){

  • JavaScript中call和apply方法的区别实例分析

    本文实例分析了JavaScript中call和apply方法的区别.分享给大家供大家参考,具体如下: 这两个方法不经常用,但是在某些特殊场合中是非常有用的,下面主要说下它们的区别: 1.首先,JavaScript是一门面向对象的语言,也就是说它有this的概念.而且JavaScript是一门动态类型语言,为什么说它是动态类型语言呢?因为JavaScript在编译时没有类型检查的过程,不会去检查创建的对象类型,也不会去检查传递的参数类型,所以它的变量类型在运行期间是可以改变的. 2.要知道call

  • Python中关于logging模块的学习笔记

    python的logging模块 python提供了一个日志处理的模块,那就是logging. 导入logging模块使用以下命令: import logging logging模块的用法: 1.简单的将日志打印到屏幕上 import logging logging.debug("This is debug message") logging.info("This is info message") logging.warning("This is war

  • JavaScript中call、apply、bind实现原理详解

    目录 前言 call 用法 实现 简单的实现版本: 升级版: apply 用法 实现 bind 用法 基本版: 升级版: 总结 前言 众所周知 call.apply.bind 的作用都是'改变'作用域,但是网上对这这'改变'说得含糊其辞,并未做详细说明,'改变'是直接替换作用域?谁替换谁?怎么产生效果?这些问题如果不理解清楚,就算看过手写实现,估计也记不长久 所以本文介绍了call.apply.bind的用法和他们各自的实现原理. call call() 方法使用一个指定的 this 值和单独给

  • Javascript中call，apply，bind方法的详解与总结

    以下内容会分为如下小节: 1.call/apply/bind方法的来源 2.Function.prototype.call() 3.Function.prototype.apply() 3.1:找出数组中的最大数 3.2:将数组的空元素变为undefined 3.3:转换类似数组的对象 4.Function.prototype.bind() 5.绑定回调函数的对象 6.call,apply,bind方法的联系和区别 1.call/apply/bind方法的来源 首先,在使用call,apply,

  • 实例讲解JavaScript中call、apply、bind方法的异同

    实例讲解JavaScript中call、apply、bind方法的异同

    以实例切入,讲解JavaScript中call,apply,bind方法,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function MAN(name, sex, age) { this.name =

随机推荐