JavaScript中的方法调用详细介绍

 更新时间:2014年12月30日 08:50:08   投稿:junjie  
这篇文章主要介绍了JavaScript中的方法调用详细介绍,JavaScript中,如果function属于一个对象,那么通过对象来访问该function的行为称之为“方法调用”,需要的朋友可以参考下

JavaScript中,如果function属于一个对象,那么通过对象来访问该function的行为称之为“方法调用”。与普通的函数调用不同的是,在进行方法调用时,function中的this指代将发生变化 — this将指代用于调用该function的对象(该对象将成为方法调用的invocation context):


复制代码 代码如下:

var x = 99;
var sample = {
  x:1,
  act:function(a){
    this.x = a*a;//assign value to sample's x, not global object's x.
  }
}
sample.act(6);
console.log(sample.x);//36
console.log(x);//99


与访问对象中的property一样,除了使用点号操作符,JavaScript中还可以通过使用中括号操作符来进行方法调用:


复制代码 代码如下:

//other ways to invoke method
sample["act"](7);
console.log(sample.x);//49


对于JavaScript中的function,一个比较有趣的行为是可以在function中嵌入function(闭包)。在进行方法调用时,如果方法function中有嵌入的function,那么这个嵌入的function中的代码可以访问到外部的变量值:


复制代码 代码如下:

//nested function can access variable outside of it.
var y = 88;
var sample2 = {
  y:1,
  act2:function(a){
    this.y = inner();
    function inner(){
      return a*a;
    }
  }
}
sample2.act2(8);
console.log(sample2.y);//64
console.log(y);//88


不过,与直觉相反的是,嵌入function中的代码无法从外部继承this;也就是说,在嵌入的function中,this指代的并不是调用方法的对象,而是全局对象:


复制代码 代码如下:

//nested function does not inherit "this". The "this" in nested function is global object
var sample3 = {
  act3:function(){
    inner();
    function inner(){
      console.log(this);//window object
    }
  }
}
sample3.act3();


如果确实需要在嵌入function中访问到调用方法的对象,可以在外部function中将this值保存到一个变量中:


复制代码 代码如下:

//pass "this" to nested function
var sample4 = {
  act4:function(){
    var self = this;
    inner();
    function inner(){
        console.log(self);//Object {act4=function()}
    }
  }
}
sample4.act4();

相关文章

  • react脚手架配置路径别名的方法

    react脚手架配置路径别名的方法

    本文主要介绍了react脚手架配置路径别名的方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 详细教你微信公众号正文页SVG交互开发技巧

    详细教你微信公众号正文页SVG交互开发技巧

    这篇文章主要介绍了详细教你微信公众号正文页SVG交互开发技巧,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • html5 canvas js(数字时钟)实例代码

    html5 canvas js(数字时钟)实例代码

    这篇文章主要介绍了html5 canvas js(数字时钟)实例代码,有需要的朋友可以参考一下
    2013-12-12
  • JavaScript实现带标题的图片轮播特效

    JavaScript实现带标题的图片轮播特效

    这里给大家分享的是4屏带标题和文字描述的js图片轮播代码,完美兼容IE6。图片滚动切换,鼠标放到数字选项卡即可切换图片。点击图片跳转到指定页面,有需要的小伙伴可以参考下。
    2015-05-05
  • js两行代码按指定格式输出日期时间

    js两行代码按指定格式输出日期时间

    javascript两行代码即可实现按指定格式输出日期时间,非常不错,需要的朋友可以参考下
    2011-10-10
  • layui下拉列表select实现可输入查找的方法

    layui下拉列表select实现可输入查找的方法

    今天小编就为大家分享一篇layui下拉列表select实现可输入查找的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js中键盘事件实例简析

    js中键盘事件实例简析

    这篇文章主要介绍了js中键盘事件,以一个较为简单的实例形式分析了js响应键盘事件的操作技巧,需要的朋友可以参考下
    2015-01-01
  • JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    这篇文章主要介绍了JS数组排序技巧,实例汇总了JavaScript冒泡排序、sort排序、快速排序、希尔排序等,并附带分析了sort排序的相关注意事项,需要的朋友可以参考下
    2015-11-11
  • JS中的防抖与节流及作用详解

    JS中的防抖与节流及作用详解

    这篇文章主要介绍了JS中的防抖与节流及作用详解,本文通过文字说明加示例代码的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • javascript 改变字体大小方法集合

    javascript 改变字体大小方法集合

    给网页正文提供,小 中 大 三种字体的切换功能。用js代码设置div style的fontSize属性。
    2009-06-06

最新评论