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 相关文章推荐
淘宝搜索框效果实现分析
Mar 05 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
Jan 28 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
webpack HappyPack实战详解
Oct 08 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 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小偷相关截取函数备忘
2010/11/28 PHP
10 个经典PHP函数
2013/10/17 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
Angular开发实践之服务端渲染
2018/03/29 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
浅谈python中的数字类型与处理工具
2017/08/02 Python
在pytorch中为Module和Tensor指定GPU的例子
2019/08/19 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Django之路由层的实现
2019/09/09 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
英文自我鉴定
2013/12/10 职场文书
税务干部鉴定材料
2014/02/11 职场文书
不错的求职信范文
2014/07/20 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
招商引资工作汇报
2014/10/28 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
团组织推优材料
2014/12/29 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
结婚主持人致辞
2015/07/28 职场文书
年会邀请函的格式及范文五篇
2019/11/02 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
以下牛机,你有几个
2022/04/05 无线电
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS