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 相关文章推荐
js cookies实现简单统计访问次数
Nov 24 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
javascript轻量级模板引擎juicer使用指南
Jun 22 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
详解webpack 多入口配置
Jun 16 Javascript
django使用channels2.x实现实时通讯
Nov 28 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
Javascript之datagrid查询详解
Sep 15 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
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
php 需要掌握的东西 不做浮躁的人
2009/12/28 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
javascript常用对话框小集
2013/09/13 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python中的Numpy入门教程
2014/04/26 Python
Python中的字符串替换操作示例
2016/06/27 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
游戏商店:Eneba
2020/04/25 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
农民工创业典型事迹
2014/01/25 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
js之ajax文件上传
2021/05/13 Javascript
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL