1. 程式人生 > >JS函式定義方式

JS函式定義方式

最近沒事看了下類似淘寶,京東的前臺原始碼,發覺自己基本看不懂,硬著頭皮看了些,也看得不是很明白,大概總結了下看不懂的原因,

1,        我是幾個月前報的培訓班培訓出來的,JS的基礎,太薄弱了,基本都是以JAVA的基礎來看的JS,其實JS本身也有很多特性的,所以在程式碼中遇到這些就看不懂了,例如:像JS最基本的一些資料型別都不知道是怎麼回事,如define是什麼,NaN是什麼,都有什麼特性,都不懂;

2,        形式上很靈活,就拿很基本的函式定義來說吧,JS定義函式的形式有好幾種,有些方式定義函式會立即執行,還有別的方式定義函式不會立即執行,開始,這些都分不清,所以就讀不懂了;

3,        JS的要求並不嚴格,如型別是弱型別,分號經常是可有可無的,而且經常會壓縮空格之類的,使得程式碼緊湊,很難讀,變數的起名也經常就用一個字母來表示,沒有什麼函式,可讀性很差,函式的呼叫之類不會像JAVA程式碼一樣,用快捷鍵再一點就可以看到方法的定義了,但JS就不行了,而函式定義,而使用又經常不在一起,所以讀著吃力。

這篇文章我就簡單把JS方法定義方式總結一下:

1.        最簡單的宣告方式,如下程式碼所示,定義了一個名為a的函式,不會執行,需要用a()呼叫才會執行。

程式碼:

<span style="white-space:pre">	</span><script type="text/javascript">
		function a()
		{
			alert(123);
		}
	</script>

2.        定義匿名函式,如下程式碼所示,定義了一個匿名函式,然後把方法賦值給一個變數,這種和第一種方式的區別是,第一種可以在宣告前呼叫方法,而這種方式則不可以,

程式碼:
<span style="white-space:pre">	</span><script type="text/javascript">
		var a = function()
		{
			alert(123);
		}
	</script>


3.        定義一個匿名函式並立即執行,

程式碼:

<span style="white-space:pre">	</span><pre name="code" class="javascript"><script type="text/javascript">
		(function(){
			alert(123);
		})();
	</script>

這種方式,還可以把後面括號裡放一些引數,這樣,後面括號裡的變數值就可以對應傳給函式的引數列表中的引數了

程式碼:

<span style="white-space:pre">	</span><script type="text/javascript">
		(function(a,b){
			alert(a+b);
		})(1,2);
	</script>

使用jQuery的$時經常會發生jQuery的$與其他框架的$使用衝突,常常就會使用上述方式來避免發生衝突

程式碼:

<span style="white-space:pre">	</span><script type="text/javascript">
		(function($){
			alert(a+b);
		})(jQuery);
	</script>

4.我要說的第四種嚴格說來這並不算是定義函式的一種方式

程式碼:

<span style="white-space:pre">	</span><script type="text/javascript">
		$(function(){
<span style="white-space:pre">			</span>$("#myinput").val(234);
<span style="white-space:pre">		</span>})();
	</script>
這種寫法其實是新增document.ready事件,其等價於以下幾種寫法

程式碼:

<span style="white-space:pre">	</span><script type="text/javascript">
		$().ready(function(){
			$("#myinput").val(234);
		})();
	</script>

<span style="white-space:pre">	</span><script type="text/javascript">
		$(document).ready(function(){
			$("#myinput").val(234);
		})();
	</script>

<span style="white-space:pre">	</span><script type="text/javascript">
		document.ready = function(){
			$("#myinput").val(234);
		};
	</script>

 而這種寫法的好處就在於由於是新增document.ready事件,所以函式會在document載入完成後執行,而我們經常習慣把JS程式碼寫在body前,而此時如果使用第四種定義方式定義並執行函式,並且在函式裡需要對body裡的物件進行操作時就會發生錯誤,因為document還沒載入,所以實際上是取不到物件的,這一點尤其需要注意。

另外還要說明的一點是我們有時還會使用<body onload=”load()”>定義onload事件,這個事件的執行是在document.ready事件之後的.

5.補充一種,

用 Function 類直接建立函式的語法如下:

var function_name = new function(arg1, arg2, ..., argN, function_body)

在上面的形式中,每個 arg 都是一個引數,最後一個引數是函式主體(要執行的程式碼)。這些引數必須是字串。

注意:儘管可以使用 Function 建構函式建立函式,但最好不要使用它,因為用它定義函式比用傳統方式要慢得多。不過,所有函式都應看作 Function 類的例項。

<span style="white-space:pre">	</span><script type="text/javascript">
		var a = new Function()
		{
			alert(123);
		}
	</script>

程式設計技術交流請加QQ群:點選連結加入群【Just Do IT】:https://jq.qq.com/?_wv=1027&k=478lBF3