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 For Beginners(转载)
Jan 05 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
Element PageHeader页头的使用方法
Jul 26 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
举例详解PHP脚本的测试方法
2015/08/05 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Python正则简单实例分析
2017/03/21 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
python打开文件的方式有哪些
2020/06/29 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
次世代生活态度:Hypebeast
2018/07/05 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
查摆问题自我剖析材料
2014/08/18 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
深入理解 Golang 的字符串
2022/05/04 Golang