javascript 函数调用的对象和方法
发布时间:2010-07-02 12:25:00
如果你真正理解Javascript函数是如何调用工作的,那么就可以避免一些bug的发生;
首先让我们创建一个简单的函数,这个函数将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数.
function makeArray(arg1, arg2){
return [ this, arg1, arg2 ];
}
调用这个函数非常的简单,我们需要做的仅仅是:
makeArray('one', 'two');
返回值:=> [ window, 'one', 'two' ]
问题出现了,this的值怎么会变成了window?下面做个简单分析:
在Javascript里,有一个全局的对象, 那些看起来散落在你的脚本里的每一行代码,其实都被写在了一个全局对象的上下文里.在我们的例子中,其实那个makeArray 函数可以说不是一个松散的全局函数,而是全局对象的一个方法, 让我们返回来看浏览器,在这个环境里它的全局对象被映射到window对象.让我们来证明一下:
alert( typeof window.makeArray);
返回值:=> function
所有的这些意味着我们之前调用makeArray的方法是和下面调用的方法一样的,
window.makeArray('one', 'two');
返回值:=> [ window, 'one', 'two' ]
JavaScript函数调用规则1:在没有通过明确所有者对象而直接调用的函数中,如myFunction(),将导致this的值成为默认对象(浏览器中的窗口)。
现创建一个简单的对象,使用makeArray函数作为它的一个方法,我们将使用json的方式来声明一个对象,我们也来调用这个方法:
var arrayMaker = {
someProperty: 'some value here',
make: makeArray
};
arrayMaker.make('one', 'two');
// 返回:=> [ arrayMaker, 'one', 'two' ]
arrayMaker['make']('one', 'two');
// 返回:=> [ arrayMaker, 'one', 'two' ]
this的值变成了对象arrayMaker本身.你可能会疑问原始的函数定义并没有改变,为何它不是window了呢.函数是一个对象,你可以传递它们或者复制他们.就好像整个函数连带参数列表和函数体都被复制,且被分配给了arrayMaker里的属性make,那就好像这样定义一个arrayMaker:
var arrayMaker = {
someProperty: 'some value here',
make: function (arg1, arg2) {return [ this, arg1, arg2 ];}
};
JavaScript函数调用规则2: 在一个使用方法调用语法,像 obj.myFunction()或者 obj['myFunction'](),这时this的值为obj。
这是事件处理代码中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;
//返回值:=> btn1,它是一个方法调用,this为所属的对象(按钮元素)
button2.onclick = function(){buttonClicked();};
//返回值:=> window ,因为buttonClicked()是被直接调用的(不像 obj.buttonClicked().) 这和我们第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样,都是window.
</script>
我们知道在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' ]
值得注意的是出现在函数调用前面的new运算符,没有它,函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上(window),而你并不想那样,另一个话题是,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为 undefined.因为这个原因,构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.
Javascript函数调用规则3: 当你将函数用作初始化函数的时候,像MyFunction(),Javascript的运行时将把this的值指定为新建的对象.
猜你喜欢
- 本文介绍了asp中 adpbe.stream 的语法,各种参数使用说明,方便大家查阅。更多请看:VBScript 速查手册(语言参考) ch
- 本文将介绍在InterDev中实现网上商店购物车功能的方法,具体步骤如下:一、 数据库结构:产品数据表(Products): 存放产品信息产
- 这是一篇关于使用JScript RuntimeObject(MSDN)调试的文章。虽然这些例子中的大多数在其他浏览器中不能运行,但在IE 5
- 一、格式化输入和输出1.从终端获取用户的输入fmt.Scanf 空格作为分隔符,占位符和格式化输出的一致fmt.Scan 从终端获取用户的输
- functools模块是Python的标准库的一部分,它是为高阶函数而实现的。高阶函数是作用于或返回另一个函数或多个函数的函数。一般来说,对
- 利用tcpdump对mysql进行抓包操作如下所示:命令如下:tcpdump -s 0 -l -w - dst 192.168.244.10
- 与数据类型相关的字段CharField 作用:字符串字段
- 本文详细解说了MySQL Order By Rand()效率优化的方案,并给出了优化的思路过程,是篇不可多得的MySQL Order By
- 和之前C++执行Linux Bash命令的方法 一样,Python依然支持system调用和popen()函数来执行linux bash命令
- 亲身实践安装mysql,用时居然花费了三个小时,在有那么多教程的情况下,依然在不该花费时间的路上浪费了太多时间。希望这篇文章能够帮助大家少走
- Python 基础教程之包和类的用法建立一个文件夹filePackage 在filePackage 文件夹内创建 __init__.py 有
- 以下是演示**“如何在Python中复制文件”的九种方法**。shutil copyfile()方法shutil copy()方法shuti
- 问题你想根据一组语法规则解析文本并执行命令,或者构造一个代表输入的抽象语法树。 如果语法非常简单,你可以不去使用一些框架,而是自己写这个解析
- 以前看过几个JS代码格式的,自己也来写了一个,呵呵,优点是可以处理超长的 JS 而不会死机.........IE Only运行代码框<
- 一个朋友需要,所以写了这两个,话不多说,看代码中国电信号段 133、149、153、173、177、180、181、189、199中国联通号
- Windows 10 x64macOS Sierra 10.12.4Python 2.7准备好装哔~了么,来吧,做个真正意义上的绿色小软件W
- 本文实例讲述了Python编程实现数学运算求一元二次方程的实根算法。分享给大家供大家参考,具体如下:问题:请定义一个函数quadratic(
- Cookies,有些人喜欢它们,有些人憎恨它们。但是,很少有人真正知道如何使用它们。现在你可以成为少数人中的成员-可以自傲的Cookie 大
- 启动服务发生1067错误:1.删除datadir 下的用户数据库文件 和 日志文件 (ib_logfile0,ib_logfile1)。2.
- 安装 SQL2000 时,系统经常会提示:操作被挂起,要求重新启动计算机,如图1: 图1重新启动后,再次安装时问题仍然存在。解决办