javascript 函数调用的对象和方法


Posted in Javascript onJuly 01, 2010

如果你真正理解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的值指定为新建的对象.

Javascript 相关文章推荐
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
ajax请求乱码的解决方法(中文乱码)
Apr 10 Javascript
JavaScript中的splice()方法使用详解
Jun 09 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
this和执行上下文实现代码
Jul 01 #Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 #Javascript
jquery validate使用攻略 第四步
Jul 01 #Javascript
jquery.validate使用攻略 第三部
Jul 01 #Javascript
jquery.validate使用攻略 第二部
Jul 01 #Javascript
jQuery Validation插件remote验证方式的Bug解决
Jul 01 #Javascript
jquery.validate使用攻略 第一部
Jul 01 #Javascript
You might like
Zerg建筑一览
2020/03/14 星际争霸
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
JavaScript截取字符串的2个函数介绍
2014/08/27 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
JavaScript运算符小结
2015/06/03 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
浅谈python对象数据的读写权限
2016/09/12 Python
简单实现python数独游戏
2018/03/30 Python
简单了解python单例模式的几种写法
2019/07/01 Python
Python闭包及装饰器运行原理解析
2020/06/17 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
副董事长岗位职责
2014/04/02 职场文书
给客户的感谢信
2015/01/21 职场文书
2015年重阳节主持词
2015/07/04 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js