javascript基礎（this，工廠方法來建立物件，建構函式建立物件）（十六）

厚積薄發2017發表於2017-02-08
JavaScript物件函式

1.this詳解：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//建立一個變數name
			var name = "全域性中的name";
			
			/*
			 * 每次呼叫函式時，瀏覽器都會將一個物件作為隱藏的引數傳遞進函式
			 * 	這個物件就是函式執行的 上下文物件，我們可以通過this來引用該物件
			 * 根據函式的呼叫的形式不同，this的值也不同：
			 * 	1.以函式的形式呼叫時，this永遠都是window
			 * 	2.以方法的形式呼叫時，誰呼叫this就是誰
			 */
			
			
			//建立一個函式
			function fun(){
				/*
				 * 我們希望誰呼叫的函式，就可以輸出誰的name屬性
				 * 	window呼叫時，就輸出window.name
				 * obj 呼叫時 就輸出 obj.name
				 * obj2 呼叫時 就輸出 obj2.name
				 */
				console.log(this.name);
				
				//console.log(this == obj);
			}
			
			//建立一個物件
			var obj = new Object();
			obj.name = "孫悟空";
			obj.sayName = fun;
			
			//建立一個物件
			var obj2 = new Object();
			obj2.name = "豬八戒";
			obj2.sayName = fun;
			
			
			//console.log(obj.sayName == fun);
			//window.fun();
			//obj.sayName();
			//obj2.sayName();
			
			//obj.sayName();
			//fun();
			//obj.sayName();
			//fun();
			
			//window.fun();
			
			//obj2.sayName();
			
			var obj3 = {
				
						name:"沙和尚",
						age:38,
						sayName:function(){
							
							function test(){
								console.log(this.name);
							}
							
							test();
						}
			};
			
			obj3.sayName();
			
			
		</script>
	</head>
	<body>
	</body>
</html>

2.工廠方法來建立物件： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 建立一個物件，來表示一個人的資訊
			 */
			/*var person = {
							name:"孫悟空",
							age:18,
							gender:"男",
							address:"花果山"
						};
						
			var person2 = {
							name:"白骨精",
							age:16,
							gender:"女",
							address:"白骨洞"
						};
						
			var person3 = {
							name:"蜘蛛精",
							age:15,
							gender:"女",
							address:"盤絲洞"
						};*/
						
						
			/*
			 * 使用工廠方法來建立物件
			 */
			function createPerson(name , age , gender , address){
				
				//建立一個物件
				var obj = new Object();
				
				//向物件中新增屬性
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.address = address;
				obj.sayName = function(){
					console.log("大家好，我是："+this.name);
				};
				
				//將物件返回
				return obj;
				
			}
			
			//呼叫函式
			var person = createPerson("孫悟空",18,"男","花果山");
			var person2 = createPerson("白骨精",16,"女","白骨洞");
			var person3 = createPerson("蜘蛛精",14,"女","盤絲洞");
			
			//console.log(person);
			
			function createDog(name , age){
				var obj = new Object();
				obj.name = name;
				obj.age = age;
				obj.sayHello = function(){
					console.log("汪汪");
				};
				return obj;
			}
			
			//person3.sayName();
			
			//建立狗的物件
			var dog = createDog("旺財",6);
			
//			console.log(person);
//			console.log(dog);

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

3.建構函式建立物件： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 建構函式（constructor）
			 * 	 建構函式是專門用來建立物件的函式	
			 * 	 建構函式就是一個普通的函式，不同的是建構函式需要通過new關鍵字來呼叫
			 * 	 建構函式一般都是首字母大寫
			 * 
			 * 	建構函式的執行的流程：
			 * 		1.建立一個新的物件
			 * 		2.將新建立的物件設定為函式中的this
			 * 		3.逐行執行函式
			 * 		4.將新建的物件作為返回值返回
			 * 
			 * 如果以建構函式的形式呼叫，this就是新建立的那個物件
			 * 
			 * 建構函式我們也可以稱它為一個類，
			 * 	使用同一個建構函式建立的物件，我們稱為一類物件
			 * 	通過建構函式建立的物件，我們稱這個物件是該類的例項
			 * 
			 */
			
			//建立一個人類的建構函式
			function Person(name , age){
				//通過this，向新物件中新增屬性
				this.name = name;
				this.age = age;
				this.sayName = function(){
					console.log(this.name);
				};
			}
			
			
			function Dog(){
				
			}
			
			var p = new Person("孫悟空",18);
			var person2 = new Person("沙和尚",38);
			
			var dog = new Dog();
			
			
			//console.log(person);
			//person2.sayName();
			
			
			var a = new Person();
			var b = new Dog();
			
			/*
			 * instanceof
			 * 	- 可以檢查一個物件是否是一個類（建構函式）的例項
			 * 	- 語法：物件 instanceof 建構函式
			 */
			//console.log(b instanceof Person);
			
			/*
			 * 所有的物件都是Object的後代
			 */
			//console.log(a instanceof Object);
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>



相關文章