JavaScript函数的apply方法与call方法

首先,function是一个指向Function对象,函数名是一个指向函数的指针。那么在函数体内,就会有一个作用域,即this关键字。

this关键字指的是函数运行的作用域,举个例子来说:

<script type="text/javascript">
        function funcA() {
            alert(this);
            alert("Function A");
        }
</script>

上面这段代码中的函数funcA定义在全局环境中,那么函数体内的this即window对象。

下面该到call和apply的说明了。以call函数为例,call的第一个参数,就是改变函数的作用域,后面的参数为传入函数的所需的参数,必须与原函数的参数一直,举例说明:

<script type="text/javascript">
        var testO = { name: "Lily" };
        function funcA(a,b) {
            console.info(this);
            console.info("Function A");
        }
        function funcB(a, b) {
            funcA.call(testO, a, b);
        }
        funcB(1,2);  //this变成了testO
</script>

我们定义funcB函数的中,调用了funcA的call函数,这个时候我们改变了funcA中this的指向,原本指向window的,现在指向了call的第一个参数testO这个对象。而且调用call时,因为funcA函数有两个参数,所以如果要想funcA传递参数,必须一一指出参数,即后面的两个参数a和b,或者可以只穿第一个参数

即:funcA.call(testO);或者只传a,即:funcA.call(testO,a);call这种写法

而apply与call的区别仅在于,apply的第二个参数可以是数组形式,而且不必一一指出参数,funcA.apply(testO,[a,b])

介绍完call与apply的基本用法,该说说他哥俩真正的用武之地了,扩充函数赖以运行的作用域。

<script type="text/javascript">
        window.color = "透明";
        var testObj = { color: "红色" };        
        function testFuc() {
            console.info(this.color);
        }
        $(function () {
            testFuc(); //弹出“透明”
            testFuc(this); //弹出“undefined”
            testFuc.call(this.parent); //弹出“透明”
            testFuc.call(window); //弹出“透明”
            testFuc.call(testObj); //弹出“红色”
        });
</script>

上面这段代码演示了call的作用。第一个函数调用,this指向了window,所以弹出了window的color属性。

第二个函数可能有些朋友以为也会弹出透明,但是请先确定我们的函数运行在$(function(){});中,这个jQuery的函数,了解jQuery的朋友都很清楚,在$(function(){});中this的作用域指向的是document,然后我们调用testFunc,要弹出document的color,当然是未定义的。(我测试的时候弹出的是"透明...")

第三个函数将testFunc的this指向了document的亲爹window,弹出window的color当然也是没有问题的。

第四个函数就更加直白了,把window传进去了

第五个函数,将testFunc的this指向了testObj,弹出了红色。

讲到这里,用法大家应该都有所了解了,但是具体怎么去理解怎么去使用还是看自己的套路。

我是这么理解的,可以把这种用法看成是C#或者java中的泛型方法。比如一个C#方法的定义

代码如下:

public void Test<T>(T a, T b) { }

这样我们就可以实现对方法的扩展,实现通用的目的。

以上都是本人自己的看法和观点,有什么不对之处还请大家指出来共同学习。

再举个例子方便理解:

jquery call 方法和apply方法接触:

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

apply方法: 
语法:apply([thisObj[,argArray]]) 
定义:用另一个对象替换当前对象来应用方法。 
说明: 
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

<script language="javascript"><!--   
    /**定义一个animal类*/  
    function Animal(){   
        this.name = "Animal";   
        this.showName = function(){   
            alert(this.name);   
        }   
    }   
    /**定义一个Cat类*/  
    function Cat(){   
        this.name = "Cat";   
    }   
      
    /**创建两个类对象*/  
    var animal = new Animal();   
    var cat = new Cat();   
      
    //通过call或apply方法,将原本属于Animal对象的showName()方法交给当前对象cat来使用了。     
    //本来showName()方法的调用者为animal,但是call函数让该方法的调用者变成了cat,函数还是showName()函数,
    //只是调用者改变了,于是在showName()函数内部this的指向变成了cat,而不是animal 
    animal.showName.call(cat,",");  //输入结果为"Cat" 
    //animal.showName.apply(cat,[]); //输入结果为"Cat"   
</script>

以上代码无论是采用animal.showName.call或是animal.showName.apply方法,运行的结果都是输出一个"Cat"的字符串。说明showName方法的调用者被换成了cat对象,而不是最初定义它的animal了。这就是call和apply方法的妙用!

时间: 2024-08-27 23:05:04

JavaScript函数的apply方法与call方法的相关文章

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

javascript中apply和call方法的作用及区别说明 call和apply的说明 call,apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例(就是每个方法)都有call,apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了,这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同. 语法:foo.call(this, arg1,arg

JavaScript 函数基础

1. JavaScript 函数基础 1. 定义方法 2. 函数的调用方法 3. 函数方法 apply : 将函数作为数组的方法来调用 将参数以数组形式传递给该方法 call   : 将函数作为对象的方法来调用 将制定参数传递给该方法 toString : 返回函数的字符串表示 4. arguments对象 arguments对象 功能: 存放实参的参数列表 特性:仅能在函数体内使用  带有下标属性 但并非数组  函数声明时自动初始化 属性: A) length 获取函数实参的长度 B) cal

JavaScript 函数—函数调用

JavaScript 函数有 4 种调用方式. 每种方式的不同在于 this 的初始化. 一.作为一个函数调用 以上函数不属于任何对象.但是在 JavaScript 中它始终是默认的全局对象. 在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面.在浏览器中的页面对象是浏览器窗口(window 对象).以上函数会自动变为 window 对象的函数. myFunction() 和 window.myFunction() 是一样的: 二.函数作为方法调用 注:函数作为

javascript 函数 方法

函数 1.函数的定义 (1)function 函数名(x){ 函数执行体; } (2)var 函数名=function(x){ 函数执行体; }; 这种方法说明,在javascript中,函数就是一种对象,也就是说,函数也是一种数据类型,参数列表相当于函数的入口,return相当于函数的出口. 如:var abs = function (x) { if (x >= 0) { return x; } else { return -x; } }; function (x) { ... }是一个匿名函

JavaScript函数的4种调用方法详解

在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造器形式.以及apply形式.这里所有的调用模式中,最主要的区别在于关键字 this 的意义,下面分别介绍这个几种调用形式. 本文主要内容: 1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数 一.函数调用形式 函数调用形式是最常见的形式,也是最

javascript中apply()方法和call()方法有什么区别?

JavaScript作为web前端开发的必用技术之一,在前端编写的过程中,都会涉及到.但在编写JavaScript的过程中,有一些方法却让人很是纳闷,比如apply()和call()方法. 存在即是合理的,很多时候在编程中,我们不得不用apply()和call()方法的场景,下面我们就通过代码来看看这两种方法的应用. <html> <body> <script> var product = "house"; var boss = { chooseWo

JavaScript 函数定义方法

JavaScript 函数定义方法. 函数声明 在之前的教程中,你已经了解了函数声明的语法 : function functionName(parameters) { 执行的代码 } 函数声明后不会立即执行,会在我们需要的时候调用到. function myFunction(a, b) { return a * b; } 分号是用来分隔可执行JavaScript语句. 由于函数声明不是一个可执行语句,所以不以分号结束. 函数表达式 JavaScript 函数可以通过一个表达式定义. 函数表达式可

JavaScript中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

javascript函数 (二 定义函数的三种方法)

javascript定义函数(声明函数)可以有三种方法:正常方法.构造函数.函数直接量 <html><head></head><body> <script type="text/javascript"> /*javascript定义函数(声明函数)可以有三种方法:正常方法.构造函数.函数直接量.*/ /*1.正常方法 function(param){}*/ function print(msg) { document.writ