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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
js form action动态修改方法
Nov 04 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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用数组返回无限分类的列表数据的代码
2010/08/08 PHP
PHP面向对象概念
2011/11/06 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
JS中call和apply函数用法实例分析
2018/06/20 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python赋值操作方法分享
2013/03/23 Python
Python 爬虫多线程详解及实例代码
2016/10/08 Python
Mac 上切换Python多版本
2017/06/17 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
出纳岗位职责模板
2013/11/27 职场文书
大学生自荐信
2013/12/11 职场文书
21岁生日感言
2014/02/27 职场文书
大学毕业生推荐信
2014/07/09 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
2015年入党决心书
2015/02/05 职场文书
2015政治思想表现评语
2015/03/25 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
跑出一片天观后感
2015/06/08 职场文书
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js