JavaScript四种调用模式和this示例介绍


Posted in Javascript onJanuary 02, 2014

JavaScript调用时除了声明时定义的形参外,每个函数接受两个附加参数:this 和arguments,this在面向对象编程中非常重要,它取决于调用模式。

JavaScript有四种调用模式,方法调用模式,函数调用模式,构造器调用模式和apply调用模式。这些模式在初始化关键参数this上存在差异。

方法调用模式:当一个函数被保存为对象的一个属性时,我们称它为一个方法,当一个方法被调用时,this被绑定到该对象上。如果调用表达式包含一个属性取表达式(即一个.点表达式或[script]下标表达式),那么它被当做一个方法调用。

var myObject = { 
value: 0; 
increment: function(inc){ 
this.value += typeof inc === 'number' ? inc : 1; 
} 
}; myObject.increment(); 
document.writeln(myObject.value);//1 
myObject.increment(2); 
document.writeln(myObject.value);//2

方法可以使用this去访问对象,所以它能从对象中取值或修改对象。this的绑定发生在调用的时候。这个超级迟绑定使得函数可以对this高度复用。通过this可以取得他们所属的上下文方法称为公共方法。

函数调用模式:当一个函数并非一个对象的属性时,那么它被当做一个函数来调用 var sum = add(3, 4);//sum值为7
当函数以此模式调用时,this被绑定到全局对象。

构造器调用模式:JavaScript是一门基于原型继承的语言。这意味着可以直接从其他对象继承属性。该语言是无类别的。
如果在函数前面带上new来调用,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将会被绑定到那个新对象上。

Apply调用模式:因为JavaScript是一门函数式的面向对象编程语言,所以函数可以拥有方法。
apply方法让哦我们构建一个参数数组并用其去调用函数。它也允许我们选择this的值。
apply方法接受两个参数,第一个将被绑定给this的值,第二个就是一个参数数组。

Javascript 相关文章推荐
关于JavaScript的with 语句的使用方法
May 09 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
Jan 02 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
小程序登录之支付宝授权的实现示例
Dec 13 Javascript
Vue router安装及使用方法解析
Dec 02 Vue.js
ParseInt函数参数设置介绍
Jan 02 #Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 #Javascript
JavaScript中Math对象方法使用概述
Jan 02 #Javascript
javascript数组快速打乱重排的方法
Jan 02 #Javascript
利用进制转换压缩数字函数分享
Jan 02 #Javascript
利用window.name实现windowStorage代码分享
Jan 02 #Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
Jan 02 #Javascript
You might like
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
向左滚动文字 js代码效果
2013/08/17 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
Python实现类继承实例
2014/07/04 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
python3.4+pycharm 环境安装及使用方法
2019/06/13 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
说出数据连接池的工作机制是什么?
2013/04/19 面试题
ORACLE十问
2015/04/20 面试题
财务会计实训报告
2014/11/05 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书