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 相关文章推荐
在JavaScript中实现类的方式探讨
Aug 28 Javascript
window.location.hash知识汇总
Nov 09 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
BootStrap前端框架使用方法详解
Feb 26 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
Apr 27 Javascript
vue实现简单跑马灯效果
May 25 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
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
PHP4 与 MySQL 数据库操作函数详解
2006/12/06 PHP
自己前几天写的无限分类类
2007/02/14 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
PHP生成随机密码类分享
2014/06/25 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
php常用hash加密函数
2014/11/22 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
PHP弱类型的安全问题详细总结
2016/09/25 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
jqPlot 基于jquery的画图插件
2011/04/26 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
js post提交调用方法
2014/02/12 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python各种语言间时间的转化实现代码
2016/03/23 Python
python3音乐播放器简单实现代码
2020/04/20 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Python创建数字列表的示例
2019/11/28 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
酒吧创业计划书
2014/01/18 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
团委竞选演讲稿
2014/04/24 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
致运动员的广播稿
2015/08/19 职场文书