javascript 函数调用规则


Posted in Javascript onAugust 26, 2009

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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
超棒的响应式布局jQuery插件Freetile.js
Nov 17 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
jQuery实现扑克正反面翻牌效果
Mar 10 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
Jun 30 Javascript
对vue v-if v-else-if v-else 的简单使用详解
Sep 29 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 #Javascript
javascript 继承实现方法
Aug 26 #Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 #Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 #Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 #Javascript
jquery 表单进行客户端验证demo
Aug 24 #Javascript
JS 时间显示效果代码
Aug 23 #Javascript
You might like
WordPress判断用户是否登录的代码
2011/03/17 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
AngularJS入门教程之过滤器用法示例
2016/11/02 Javascript
jQuery实现最简单实用的分秒倒计时
2017/02/05 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
浅谈Vue组件单元测试究竟测试什么
2020/02/05 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
Numpy中的mask的使用
2018/07/21 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
学校运动会开幕演讲稿
2014/01/04 职场文书
优秀民警事迹材料
2014/01/29 职场文书
应届大学生求职信
2014/07/20 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
爱的教育读书笔记
2015/06/26 职场文书
python基础之类属性和实例属性
2021/10/24 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS