韓順平_輕鬆搞定網頁設計(html+css+javascript)_第33講_Object類_閉包_成員函數再說明_聰明的豬小練習_學習筆記_源代碼圖解_PPT文檔整理

文西馬龍:http://blog.csdn.net/wenximalong/

記不住,和不知道是兩回事,記住最常用的,記不住的,學會查找。


js面向(基於)對象編程—類(原型對象)與對象
對象—Object類
Object類是所有javascript類的基類,提供了一種創建自定義對象的簡單方式,不需要程序員再定義構造函數。

主要屬性:
constructor—對象的構造函數
prototype—獲得類的prototype對象
static性質

主要方法:
hasOwnProperty(property)—是否屬於本類定義的屬性
isPrototypeOf(object)—是否是指定類的prototype
propertylsEnumerable(property)—是否可列舉的屬性
toString()—返回對象對應的字符串
valueOf()—返回對象對應的原始類型值

<script language="javascript">
function getAttributeValue(attr){
	alert(person[attr]);
}
var person=new Object();
person.name="zs";
person.age=18;
getAttributeValue("name");
getAttributeValue("age");
</script>

思考題:
var i=new Number(10); // <====> var i-10;
Number.prototype.add=function(a){ // 所有Number對象都有一個add方法
	return this+a;
}
window.alert(i.add(10).add(30)); //在這裏,上面代碼中的this就是i
var b=90;
window.alert(b.add(40));

上面的寫法我們爲對象的修改和擴展。
demo1.html

<html>
	<head>
		<script language="javascript">
			//創建Person實例
			function Person(){
			}
			var p1=new Person();
			p1.name="sp";

			//初步體驗Object類
			//對比上面的,可以用Object直接來創建對象
			var p1=new Object(); //此時p1就是一個對象
			p1.name="sp"; //和上面是等價的
			window.alert(p1.constructor); //所有的類都是Object的子類,constructor是從Object來的
			//javascript類的所有基類都是Object類,和java有點像,java所有類的超類都是Object
			//Number類,內置的,javascript支持Number對象,該對象是原始數值的包裝對象
			var i1=new Number(10); //<====> var i1=10;
			window.alert(i1.constructor);
			var i2=10;
			window.alert(i2.constructor);
			//爲什麼說是等價的,通過上面查看構造函數,就可以看出來了

			//我們可以給類添加方法
			Number.prototype.add=function(a){
				return this+a;
			}
			window.alert(i1.add(10).add(30)); //輸出50

		</script>
	</head>
	<body></body>
</html>

Array是javascript的內置類
請思考給js的Array對象擴展一個find(val)方法,當一個Array對象調用該方法的時候,如果能找到val則返回其下標,否則返回-1
demo2.html

<html>
	<head>
		<script language="javascript">
			//體驗Array內置類
			var arr1=new Array(3); //3代表可以有3個數據
			arr1[0]="George";
			arr1[1]="John";
			arr1[2]="Thomas";
			//遍歷該數組
			for(var i=0;i<arr1.length;i++){
				document.writeln(arr1[i]+" ");
			}
			//使用Array提供的方法,顛倒數據。既然都提供了,何必有自己重新發明輪子去做顛倒呢。
			arr1.reverse();
			document.write("<br/>");
			for(var i=0;i<arr1.length;i++){
				document.writeln(arr1[i]+" ");
			}
			/*
			請思考給js的Array對象擴展一個find(val)方法,當一個Array對象調用該方法的時候,如果能找到val則返回其下標,否則返回-1。
			*/

			//現在我們一起看如何給所有Array對象添加一個方法 find(val);
			//現在只考慮一維數組,只考慮找到一個就行,暫時不考慮多個的問題
			Array.prototype.find=function(val){
				//遍歷數組this
				for(var i=0;i<this.length;i++){
					if(val==this[i]){
						return i;
					}
				}
				//如果沒有
				return -1;
			}

			document.write("<br/>");
			document.writeln("John 下標="+arr1.find("John"));
		</script>
	</head>
	<body></body>
</html>

不要學的很多,知識點還沒搞懂就跑到下一個地方,欲速則不達,技術欠債就會越積越多,越來越看不懂,看不懂就對自己產生動搖。不要想一天背300單詞,如果你能一天背誦30個,堅持一個月,你就會發現其實背單詞很容易,踏實。

什麼是閉包
閉包(closure)
javascript閉包是在另一個作用域中保存了一份它從上一級函數或作用域取得的變量(鍵值對),而這些鍵值對是不會隨上一級函數的執行完成而銷燬。
function a(){
	var i=0;
	function b(){
		alert(++i);
	}
	return b;
}
var c=a();
c();

這樣在執行完var c=a()後,變量c實際上是指向了函數b,b中用到了變量i,再執行c()後就會彈出一個窗口顯示i的值(第一次爲1)。這段代碼其實就創建了一個閉包,爲什麼?因爲函數a外的變量c引用了函數a內部的函數b
就是說
當函數a的內部函數b被函數a外的一個變量引用的時候,就創建了一個我們通常所謂的閉包。
閉包的作用:就是在a執行完並返回後,閉包使得javascript的垃圾回收極致GC不會收回a所佔用的資源,因爲a的內部函數b的執行需要依賴a中的變量。

閉包在講封裝的時候再講,現在講有點早。這個知識點在講封裝特性的時候,再講解。
========
成員函數—細節說明
①函數的參數列表可以是多個

案例:在Person類中編寫一個成員方法(面向對象方式),從鍵盤輸入三個數,返回最大的那個數。
參數列表可以是多個,並且數據類型可以是任意的類型,整數、小數、類
========>
function 函數名(參數列表){
語句; //函數主體
return 返回值;
}

②函數可以沒有返回值,但最多只能有一個返回值
案例:編寫一個函數(面向對象方式),從頁面輸入一個整數打印出對應的金字塔。

返回類型可以是任意的數據類型(整數、小數、字符串)也可以沒有返回值

==========>>
function 函數名(參數列表){
語句; //函數主體
return 返回值;
}

js中的函數還有以下兩點特別說明一下
①js支持參數個數可變的函數
②js支持創建動態函數,這個用的比較少,瞭解即可

針對可變的說明,看下面的代碼
function test(a){
	window.alert(a);
}
function test(a,b){
	window.alert(a+" "+b);
}
test(23); //它始終只找最後一個,只看最後一個,很神奇,javascript沒有重載的概念。相當於第二個test函數就把第一個test函數覆蓋掉了,就不認第一個test函數了。所有它會輸出"23空格undefined"
//所以不管最後一個test函數前面,有多少個test函數,只認最後一個test函數。javascript不是編譯語言,它遇到這樣的情況也不會報錯,而是在運行的時候選擇一個,選最後一個。
window.test(3,"hello"); //從上面的分析,輸出:3hello

從上面的分析可以看出,究竟是以哪個函數爲標準調用的呢。
③js中不支持函數的重載(重載:同樣的函數名,根據參數個數或者參數類型的不一樣,來實現不同的函數調用)
結論:js在調用一個函數的時候,是根據函數名來調用,如果有多個函數名相同,則認最後那個函數。
(1)js函數不支持重載
(2)直接定義一個函數或者變量實際上這些函數和變量就是全局函數和全局變量(本質上他們是屬於window對象的,這個後面講面向對象的時候還有精講)

請看下面代碼(可變參數),會輸出什麼呢

function abc(a,b){
	return a+b;
}
function abc(a,b,c){
	return a+b+c;
}
window.alert(abc(1,2)); //這裏會報錯,因爲return 1+2+undefined,無法返回,輸出NaN
window.alert(abc(1,2,3)); //輸出6


function abc(){
	var s=0;
	for(var i=0;i<arguments.length;i++){
		s+=arguments[i];
	}
return s;
}
window.alert(abc(1,2)); //輸出3
window.alert(abc(7,8,9)); //輸出24
demo3.html
<html>
	<head>
		<script language="javascript">
			function abc(a,b){
				return a+b;
			}
			function abc(a,b,c){
				return a+b+c;
			}
			window.alert(abc(1,2));
			window.alert(abc(1,2,3));

			function bcd(){
				var s=0;
				for(var i=0;i<arguments.length;i++){
					s+=arguments[i];
				}
				return s;
			}
			window.alert(bcd(1,2));
			window.alert(bcd(7,8,9));
		</script>
	</head>
	<body></body>
</html>

函數—小練習
案例:編寫一個函數(面向對象的方式),從網頁輸入一個整數打印出對應的菱形和空心菱形[愛玩遊戲的小豬]


請編寫一個Pig對象,可以完成
(1)輸出自己的名字,體重,年齡,顏色
(2)可以增加自己的體重/減輕自己的體重
(3)可以打印金字塔,層數隨意(此豬的特殊能力)
        *
       ***
      *****
     *******
(4)可以打印空心金字塔,層數隨意
        *
       * *
      *   *
     *******
(5)菱形
        *
       ***
      *****
       ***
        *
(6)繼續改進 輸出 空心菱形
        *
       * *
      *   *
       * *
        *


函數—小練習
案例:編寫一個函數(面向對象),從頁面輸入一個整數(1-9),打印出對應的乘法表:【上機練習】(聰明的小貓)


案例:編寫函數,使給定的一個二維數組(3x3)轉置


小結:
1.先設計類
2.然後根據類創建對象

小練習
1.設計計算機類,要求如下:
屬性:品牌,顏色,cpu型號,內存容量,硬盤大小,價格,工作狀態
方法:打開,關閉,休眠,創建一個計算機對象,調用打開,關閉方法
2.採用面向對象思想設計超級馬里奧遊戲人物


韓順平_php從入門到精通_視頻教程_學習筆記_源代碼圖解_PPT文檔整理_目錄


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章