JavaScript中5种调用函数的方法


Posted in Javascript onMarch 12, 2015

这篇文章详细的介绍了Javascript中各种函数调用的方法及其原理,对于理解JavaScript的函数有很大的帮助!

JavaScript,调用函数的5种方法

一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那样的代码是我写的).JavaScript拥有函数式编程的特性, 当我们选择面对它的时候,这将成为我们前进的阻碍.

作为初学者,我们来测试五种函数调用的方法,从表面来看我们会认为那些函数与C#中函数的作用非常相似,但是我们一会儿可以看到还是有非常重要的不同的地方的,忽视这些差异无疑会导致难于跟踪的bug。首先让我们创建一个简单的函数,这个函数将在将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数.

<script type="text/javascript">

function makeArray(arg1, arg2){

    return [ this, arg1, arg2 ];

}

</script>

最常用的方法,但不幸的,全局的函数调用
当我们学习Javascript时,我们了解到如何用上面示例中的语法来定义函数。
,我们也知道调用这个函数非常的简单,我们需要做的仅仅是:

makeArray('one', 'two');

// => [ window, 'one', 'two' ]

 

Wait a minute. What's that window

 

 

alert( typeof window.methodThatDoesntExist );

// => undefined

alert( typeof window.makeArray);

// =>

 

 

window.makeArray('one', 'two');

// => [ window, 'one', 'two' ]

我说最普遍的调用方法是不幸的是因为它导致我们声明的函数默认是全局的.我们都知道全局成员不是编程的最佳实践.这在JavaScript里是特别的正确,在JavaScript中避免使用全局的成员,你是不会为之后悔的.

JavaScript函数调用规则1
在没有通过明确所有者对象而直接调用的函数中,如myFunction(),将导致this的值成为默认对象(浏览器中的窗口)。

函数调用

让我们现在创建一个简单的对象,使用 makeArray函数作为它的一个方法,我们将使用json的方式来声明一个对象,我们也来调用这个方法

//creating the object

var arrayMaker = {

    someProperty: 'some value here',

    make: makeArray

};

 

//invoke the make() method

arrayMaker.make('one', 'two');

// => [ arrayMaker, 'one', 'two' ]

// alternative syntax, using square brackets

arrayMaker['make']('one', 'two');

// => [ arrayMaker, 'one', 'two' ]

看到这里的不同了吧,this的值变成了对象本身.你可能会疑问原始的函数定义并没有改变,为何它不是window了呢.好吧,这就是函数在JSavacript中传递的方式,函数在JavaScript里是一个标准的数据类型,确切的说是一个对象.你可以传递它们或者复制他们.就好像整个函数连带参数列表和函数体都被复制,且被分配给了 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;

button2.onclick = function(){   buttonClicked();   };

</script>

点击第一个按钮将会显示”btn”因为它是一个方法调用,this为所属的对象(按钮元素) 点击第二个按钮将显示”window”因为 buttonClicked是被直接调用的(不像 obj.buttonClicked().) 这和我们第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样的.
使用像jQuery的JS库有这样的优点,当在jQuery里定义了一个事件处理函数,JS库会帮助重写this的值以保证它包含了当前事件源元素的引用,

//使用jQuery

$('#btn1').click( function() {

    alert( this.id ); // jQuery ensures 'this' will be the button

});

jQuery是如何重载this的值的呢?继续阅读

另外两个:apply()和call()

你越多的使用JavaScript的函数,你就越多的发现你需要传递函数并在不同的上下文里调用他们,就像Qjuery在事件处理函数里所做的一样,你往往经常需要重置this的值.记住我告诉你的,在Javascript中函数也是对象,函数对象包含一些预定义的方法,其中有两个便是apply()和call(),我们可以使用它们来对this进行重置.

var gasGuzzler = { year: 2008, model: 'Dodge Bailout' };

makeArray.apply( gasGuzzler, [ 'one', 'two' ] );

// => [ gasGuzzler, 'one' , 'two' ]

makeArray.call( gasGuzzler,  'one', 'two' );

// => [ gasGuzzler, 'one' , 'two' ]

这两个方法是相似的,不同的是后面的参数的不同,Function.apply()是使用一个数组来传递给函数的,而Function.call()是将这些参数独立传递的,在实践中你会发现apply()在大多数情况下更方便.

JSavacript函数调用规则3

如果我们想在不复制函数到一个方法而想重载this的值的时候,我们可以使用 myFunction.apply( obj ) 或 myFunction.call( obj ).

构造器

我不想深入研究在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' ]

一个非常重要并值得注意的是出现在函数调用前面的new运算符,没有那个,你的函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上(window),而你并不想那样,另一个话题是,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为 undefined.因为这个原因,构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.

带着这样的小心,初始化函数里的代码和你在其他语言里写的初始化函数是相似的.this的值将是你将创建的对象.

Javascript函数调用规则4

当你将函数用作初始化函数的时候,像MyFunction(),Javascript的运行时将把this的值指定为新建的对象.

我希望理解各种函数调用方式的不同会使你的Sjavacript代码远离bugs,有些这样的bug会确保你总是知道this的值是避免他们第一步。

Javascript 相关文章推荐
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
深入理解Node.js的HTTP模块
Oct 12 Javascript
JavaScript下拉菜单功能实例代码
Mar 01 Javascript
JS实现简单获取最近7天和最近3天日期的方法
Apr 18 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
npm的lock机制解析
Jun 20 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
JavaScript实现的一个倒计时的类
Mar 12 #Javascript
JavaScript将XML转成JSON的方法
Mar 12 #Javascript
JavaScript中诡异的delete操作符
Mar 12 #Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
Mar 12 #Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 #Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 #Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 #Javascript
You might like
php在线生成ico文件的代码
2007/10/09 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
使用jQuery获取data-的自定义属性
2015/11/10 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python机器学习库scikit-learn安装与基本使用教程
2018/06/25 Python
tensorflow更改变量的值实例
2018/07/30 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
在vscode中配置python环境过程解析
2019/09/28 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
资深地理教师自我评价
2013/09/21 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
专项资金申请报告
2015/05/15 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL