JavaScript中的方法调用详细介绍


Posted in Javascript onDecember 30, 2014

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();
Javascript 相关文章推荐
jquery 入门教程 [翻译] 推荐
Aug 17 Javascript
理解 JavaScript 预解析
Oct 25 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
js实现input密码框显示/隐藏功能
Sep 10 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
Vue 实现把表单form数据 转化成json格式的数据
Oct 29 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 #Javascript
JavaScript中的类(Class)详细介绍
Dec 30 #Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 #Javascript
jQuery实现ichat在线客服插件
Dec 29 #Javascript
jQuery中用dom操作替代正则表达式
Dec 29 #Javascript
jQuery中:animated选择器用法实例
Dec 29 #Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 #Javascript
You might like
php页面函数设置超时限制的方法
2014/12/01 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP CodeIgniter框架的工作原理研究
2015/03/30 PHP
php实现的操作excel类详解
2016/01/15 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
超清晰的document对象详解
2007/02/27 Javascript
Jquery 扩展方法
2010/05/06 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
理解javascript模块化
2016/03/28 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[01:04:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第二场 1月31日
2021/03/11 DOTA
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python去掉空白行的多种实现代码
2018/03/19 Python
Django实现表单验证
2018/09/08 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
python3实现斐波那契数列(4种方法)
2019/07/15 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python之语音识别speech模块
2020/09/09 Python
外企财务年会演讲稿
2014/01/03 职场文书
员工考核管理制度
2014/02/02 职场文书
现实表现材料范文
2014/12/23 职场文书
教师节班会主持词
2015/07/06 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
《风筝》教学反思
2016/02/23 职场文书