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 相关文章推荐
Prototype使用指南之array.js
Jan 10 Javascript
优化javascript的执行速度
Jan 23 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
JS实现页面打印功能
Mar 16 Javascript
微信小程序中的swiper组件详解
Apr 14 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
javascript的setTimeout()使用方法总结
Nov 20 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 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
Python 内置函数complex详解
2016/10/23 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
美国牛仔品牌:True Religion
2018/11/16 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
性能测试工程师的面试题
2015/02/20 面试题
法院实习人员自我鉴定
2013/09/26 职场文书
业务代表的岗位职责
2013/11/16 职场文书
家长会邀请书
2014/01/25 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
工作决心书
2014/03/11 职场文书
空气环保标语
2014/06/12 职场文书
社团活动总结怎么写
2014/06/30 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
律师授权委托书范本
2014/10/07 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL