javascript基础（this，工厂方法来创建对象，构造函数创建对象）（十六）

本文链接：https://blog.youkuaiyun.com/u010853130/article/details/54925081

本文详细解析了JavaScript中this关键字的用法及不同上下文的影响，并介绍了三种创建对象的方法：直接赋值、工厂方法和构造函数，展示了实例化对象的过程及instanceof的使用。

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>