Javascript中函数调用的疑惑积累

来源：互联网发布：井冈山大学网络编辑：程序博客网时间：2024/06/11 17:40

一、困惑

个人知道函数的调用，传参的理解等等有多么重要，但是理解起来比较缓慢，是自己的弱项，正好记个单词：invoke=调用；

所以只好借助碎片时间到处去捡起来理解，系统的是最重要的，但是那个一个角度比较枯燥，所以自己这样穿插，前面可能都还是收集，没有办法判断优劣，但是后期再整理

先把自己能有一丢丢的收获的点积累，借鉴不同的看法和分析角度，希望能够克服弱项，也是基础，实在是没有函数寸步难行的感觉，共勉

高深的我也不懂，小白在路上，不想死在自己找不出的bug上，一天爱代码多一点。

二、函数

【2016-10-10】--摘录，感觉规则是真理，但是示例需要个人自己看更多的，敲更多的。

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

?
1
2
3
4
5
<script type="text/javascript">
function makeArray(arg1, arg2){
    return [this, arg1, arg2 ];
}
</script>

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

?
1
2
3
4
5
6
7
8
9
10
11
12
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的方式来声明一个对象,我们也来调用这个方法

?
1
2
3
4
5
6
7
8
9
10
11
12
//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:

?
1
2
3
4
5
6
var arrayMaker = {
    someProperty:'some value here',
    make:function (arg1, arg2) {
        return [this, arg1, arg2 ];
    }
};

　　JavaScript函数调用规则2

　　在一个使用方法调用语法,像 obj.myFunction()或者 obj['myFunction'](),这时this的值为obj

　　这是事件处理代码中bug的主要源头,看看这些例子

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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的值以保证它包含了当前事件源元素的引用,

?
1
2
3
4
//使用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进行重置.

?
1
2
3
4
5
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中没有类,而且任何一个自定义的类型需要一个初始化函数,使用原型对象(作为初始化函数的一个属性)定义你的类型也是一个不错的主义,让我们来创建一个简单的类型

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//声明一个构造器
 
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的值是避免他们第一步function

　　所有的这些意味着我们之前调用 makeArray的方法是和下面调用的方法一样的object doing there? Why is it the value of this? If you haven't stopped to think about it, please staywith me here.
　　等一等,那个Window对象在这里干嘛呢,为何this的值是它呢,如果你以前没有停下来思考这个问题,那么请和我一起来分析吧,在Javascript里,我没有指特定的浏览器,有一个全局的对象,那些看起来散落在你的脚本里的每一行代码(例如在一个对象外的声明)其实都被写在了一个全局对象的上下文里.在我们的例子中,其实那个makeArray函数可以说不是一个松散的全局函数,而是全局对象的一个方法,让我们返回来看浏览器,在这个环境里它的全局对象被映射到window对象。

【2016-10-10】--摘录，主要是函数的访问级别问题，需要自行补充函数作用域相关知识，去复习。

首先说函数的定义：

function Hanshu(){      //函数体...}

这样我们就定义了一个名为Hanshu的函数，现在我们尝试调用一下这个函数。其实很简单，调用函数就是用函数的名称加括号，即：

Hanshu();

这样我们就调用了这个函数。

我们用一个按钮调用一下这个函数：将按钮的点击事件指向这个方法

现在我在此方法中再写一个方法

我们在这个方法中将body的点击事件指向了一个新的方法，匿名方法。然后弹出click body

function Hanshu(){   document.body.onclick = new function()   {   alert('click body');   };}

现在我们尝试调用一下

但是这样是不能实现每单击body时，弹出click body

因为当body去访问这个匿名方法时，找不到此方法

我们可以这么测试一下

function AddClick(){   // 这样不能实现把body的单击事件指给新的方法, 因为body不能访问在函数体里的函数   /*   document.body.onclick = new function()   {   alert('click body');   };   */   // 这样可以实现   document.body.onclick = BtnAn;   // 如果把方法指向函数内的方法，则会出现错误：NeiHanshu未定义   // document.body.onclick = NeiHanshu;}function BtnAn(){   alert('click body');   //   function NeiHanshu()   //   {   //   alert('函数里的函数被调用');   //   }   //   NeiHanshu();}

所以结果是：我们只能调用在外部的函数，不能调用函数里的函数，这也就是一个访问级别的问题。

=====================分割线=====================

0 0