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 变量基础知识
Nov 07 Javascript
Array.prototype.slice 使用扩展
Jun 09 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
PHP 5昨天隆重推出--PHP 5/Zend Engine 2.0新特性
2006/10/09 PHP
PHP 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
讲解vue-router之命名路由和命名视图
2018/05/28 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
你准备好迎接vue3.0了吗
2020/04/28 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
python导入库的具体方法
2020/06/18 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
物流管理专业毕业生求职信
2014/03/23 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
英文道歉信
2015/01/20 职场文书
主持人开幕词
2015/01/29 职场文书
高三化学教学反思
2016/02/22 职场文书