javascript代码实例教程-Javascript函数调用的四种模式

发布时间:2019-02-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Javascript函数调用的四种模式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。  一  前言

 

  Javascript一共有四种调用模式:方法调用模式、函数调用模式、构造器调用模式以及apply调用模式。调用模式不同,对应的隐藏参数this值也会不同。

 

 

 

  二  方法调用模式

 

  函数作为对象的属性时,称为方法。此时函数(即方法)中的this对应是该对象。

 

复制代码

VAR myObject = {

  value:3,

  func:function(){

    alert(this.value);

  }

  

};

 

// 方法调用模式,this对应的是myObject对象

myObject.func();  //3

复制代码

  也可以写成如下格式:

 

复制代码

var myObject = {

    value:3

};

 

myObject.func = function() {

    alert(this.value);

}

 

// 方法调用模式

myObject.func();  //3

复制代码

  上面,this对应的是myObject对象。

 

 

 

  三  函数调用模式

 

  函数调用模式即通常的函数调用,属于全局性调用,此时this对应的是全局对象,即Window对象。

 

var add = function(a, b) {

    return a + b;

}

 

// 函数调用模式

add(3,4);    //7

  上面也可以写成

 

window.add = function(a, b) {

    return a + b;

}

 

// 函数调用模式

add(3,4); //7

  下面来看看下面的测试题,以检验是否了解了this。

 

复制代码

<script tyPE="text/javascript">

   var add = function(a, b) {

        return a + b;

    }

 

    var myObject = {

        value:3

    };

 

    myObject.func = function() {

        var helper = function() {

            this.value = add(this.value, this.value); 

        }

 

    // 函数调用模式

      helper();

    }

    

  // 方法调用模式

   myObject.func();

 

    alert(myObject.value);

            

</script>

复制代码

  答案会是6吗?仔细想想。

 

  答案为6的程序应该是这样的:

 

复制代码

<script type="text/javascript">

    var add = function(a, b) {

        return a + b;

    }

 

    var myObject = {

        value:3

    };

 

    myObject.func = function() {

        var that = this; // this对应myObject对象   (1)

        var helper = function() {

            //this.value = add(this.value, this.value); //这里调用模式为函数调用模式,而非方法调用模式,所以this对应全局对象   (2)

            that.value = add(that.value, that.value);

        }

    

    // 函数调用模式

      helper();

    }

     

  // 方法调用模式   

   myObject.func();

 

    alert(myObject.value);

            

</script>

复制代码

  (1)处this在firefox调试如下:(方法调用模式处)

 

  

 

  (2)处this在firefox调试如下:(函数调用模式处)

 

  

 

 

 

  四  构造器调用模式

 

  若在函数前面通过new 来调用,其实是生成一新对象,this自然指向该新对象。

 

var add = function(a, b) {

    return a + b;

}

 

// 构造器调用模式

var obj = new add(3, 4);

  obj为一对象:

 

  

 

  对于构造器调用模式,如果函数返回值不是一个对象,则返回该新对象,即this。

 

 

 

  五  apply调用模式

 

  apply方法有两个参数,第一个是要绑定给this的值,第二个是一个参数数组

// apply调用模式

var sum = add.apply(null,[3,4]);       // this对应全局变量,即window对象

var sum2 = add.apply(myObject,[3,4]);  //this对应为myObject对象

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Javascript函数调用的四种模式全部内容,希望文章能够帮你解决javascript代码实例教程-Javascript函数调用的四种模式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。