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 获得绝对,相对位置的坐标方法
Feb 09 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
微信小程序实现页面浮动导航
Jan 08 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 SEO优化之URL优化方法
2011/04/21 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
2015/08/24 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python中日期和时间格式化输出的方法小结
2015/03/19 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
经济信息管理专业大学生求职信
2013/09/27 职场文书
大四自我鉴定
2014/02/08 职场文书
参观接待方案
2014/03/17 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
安全温馨提示语大全
2015/07/14 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery