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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jquery tab标签页的制作
May 10 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
在vue中利用v-html按分号将文本换行的例子
Nov 14 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中url函数介绍及使用示例
2014/02/13 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
JavaScript常见JSON操作实例分析
2018/08/08 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Flask数据库迁移简单介绍
2017/10/24 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
小学校园活动策划
2014/01/30 职场文书
公益活动邀请函
2014/02/05 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
解除劳动合同通知书范本
2015/04/16 职场文书
倡议书格式及范文
2015/04/29 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS