JavaScript this调用规则说明


Posted in Javascript onMarch 08, 2010

JavaScript函数调用规则一
(1)全局函数调用:

function makeArray( arg1, arg2 ){ 
return [this , arg1 , arg2 ]; 
}

这是一个最常用的定义函数方式。相信学习JavaScript的人对它的调用并不陌生。
调用代码如下:
makeArray('one', 'two');
// => [ window, 'one', 'two' ]
这种方式可以说是全局的函数调用。
为什么说是全局的函数?
因为它是全局对象window 的一个方法,
我们可以用如下方法验证:
alert( typeof window.methodThatDoesntExist );
// => undefined
alert( typeof window.makeArray);
// => function
所以我们之前调用 makeArray的方法是和下面调用的方法一样的
window.makeArray('one', 'two');
// => [ window, 'one', 'two' ]
JavaScript函数调用规则二
(1)对象方法调用:
//creating the object 
var arrayMaker = { 
someProperty: 'some value here', 
make: makeArray 
}; 
arrayMaker.make('one', 'two'); // => [ arrayMaker, 'one', 'two' ] 
//或者用下面的方法调用: 
arrayMaker['make']('one', 'two'); // => [ arrayMaker, 'one', 'two' ]

看到这里跟刚才的区别了吧,this的值变成了对象本身.
你可能会质疑:为什么原始的函数定义并没有改变,而this却变化了呢?
非常好,有质疑是正确的。这里涉及到 函数在JavaScript中传递的方式,
函数在JavaScript 里是一个标准的数据类型,
确切的说是一个对象.你可以传递它们或者复制他们.
就好像整个函数连带参数列表和函数体都被复制,
且被分配给了 arrayMaker 里的属性 make,那就好像这样定义一个 arrayMaker :
var arrayMaker = { 
someProperty: 'some value here', 
make: function (arg1, arg2) { 
return [ this, arg1, arg2 ]; 
} 
};

如果不把调用规则二 弄明白,那么在事件处理代码中 经常会遇到各种各样的bug,举个例子:
<input type="button" value="Button 1" id="btn1" /> 
<input type="button" value="Button 2" id="btn2" /> 
<input type="button" value="Button 3" id="btn3" onclick="buttonClicked();"/> 
< script type="text/javascript"> 
function buttonClicked(){ 
var text = (this === window) ? 'window' : this.id; 
alert( text ); 
} 
var button1 = document.getElementById('btn1'); 
var button2 = document.getElementById('btn2'); 
button1.onclick = buttonClicked; 
button2.onclick = function(){ 
buttonClicked(); 
}; 
< /script>

点击第一个按钮将会显示”btn1”,因为它是一个方法调用,this为所属的对象(按钮元素) 。
点击第二个按钮将显示”window”,因为 buttonClicked 是被直接调用的( 不像 obj.buttonClicked() ),
这和第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的。
所以请大家注意:
button1.onclick = buttonClicked; 
button2.onclick = function(){ 
buttonClicked(); 
};

this指向是有区别的。
JavaScript函数调用规则三
当然,如果使用的是jQuery库,那么你不必考虑这么多,它会帮助重写this的值以保证它包含了当前事件源元素的引用。
//使用jQuery 
$('#btn1').click( function() { 
alert( this.id ); // jQuery ensures 'this' will be the button 
});

那么jQuery是如何重载this的值的呢?
答案是: call()和apply();
当函数使用的越来越多时,你会发现你需要的this 并不在相同的上下文里,这样导致通讯起来异常困难。
在Javascript中函数也是对象,函数对象包含一些预定义的方法,其中有两个便是apply()和call(),我们可以使用它们来对 this进行上下文重置。
<input type="button" value="Button 1" id="btn1" /> 
<input type="button" value="Button 2" id="btn2" /> 
<input type="button" value="Button 3" id="btn3" onclick="buttonClicked();"/> 
< script type="text/javascript"> 
function buttonClicked(){ 
var text = (this === window) ? 'window' : this.id; 
alert( text ); 
} 
var button1 = document.getElementById('btn1'); 
var button2 = document.getElementById('btn2'); 
button1.onclick = buttonClicked; 
button2.onclick = function(){ 
buttonClicked.call(this); // btn2 
}; 
< /script>

JavaScript函数调用规则四
(1)构造器
我不想深入研究在Javascript中类型的定义,但是在此刻我们需要知道在Javascript中没有类,
而且任何一个自定义的类型需要一个初始化函数,使用原型对象(作为初始化函数的一个属性)定义你的类型也是一个不错的想法,
让我们来创建一个简单的类型
//声明一个构造器 
function ArrayMaker(arg1, arg2) { 
this.someProperty = 'whatever'; 
this.theArray = [ this, arg1, arg2 ]; 
} 
// 声明实例化方法 
ArrayMaker.prototype = { 
someMethod: function () { 
alert( 'someMethod called'); 
}, 
getArray: function () { 
return this.theArray; 
} 
}; 
var am = new ArrayMaker( 'one', 'two' ); 
var other = new ArrayMaker( 'first', 'second' ); 
am.getArray(); 
// => [ am, 'one' , 'two' ] 
other.getArray(); 
// => [ other, 'first', 'second' ]

一个非常重要并值得注意的是出现在函数调用前面的new运算符,没有那个,你的函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上(window),而你并不想那样。
另外一点,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为 undefined。
所以构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.
这样 初始化函数里的代码和你在其他语言里写的初始化函数是相似的.this的值将是你将创建的对象.
总结
我希望通过这些来使你们理解各种函数调用方式的不同,
让你的JavaScript代码远离bugs。
知道this的值是你避免bugs的第一步。
Javascript 相关文章推荐
图解JavaScript中的this关键字
May 28 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 #Javascript
JavaScript中的闭包原理分析
Mar 08 #Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 #Javascript
JavaScript 滚轮事件使用说明
Mar 07 #Javascript
javascript下4个跨浏览器必备的函数
Mar 07 #Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 #Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
表单元素事件 (Form Element Events)
2009/07/17 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
纯css+js写的一个简单的tab标签页带样式
2014/01/28 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
JavaScript更改字符串的大小写
2015/05/07 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
JavaScript原生数组Array常用方法
2017/04/06 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Tensorflow tf.tile()的用法实例分析
2020/05/22 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
历史系自荐信范文
2013/12/24 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技