3.JavaScript基础——作用域、this关键字、工厂函数、构造函数

本文链接：https://blog.csdn.net/weixin_43986818/article/details/123666307

一. 作用域

在JS中一共有两种作用域

1. 全局作用域

直接写在script标签中的js代码，都在全局作用域中；
全局作用域在页面打开时创建。在页面关闭时销毁；
在全局作用域中，有一个全局对象window；
它代表的是一个浏览器窗口，由浏览器创建。我们可以直接调用

2. 函数作用域

调用函数时创建函数作用域，函数执行完毕后。函数作用域销毁；
每调用一次函数就会创建一个新的函数作用域，他们之间都是相互独立的；
当在函数作用域中操作一个变量时，它会先在自身作用域中寻找如果没有，就会向上一级寻找；
直到找到全局作用域为止。如果全局作用域中没有，则报错；

在函数作用域中访问全局变量可使用window对象使用windo.xx 直接去找全局变量的值。

 在函数作用域中，也是有变量提前的特性
 使用var关键字声明变量。会在函数中所有的代码执行前被声明
 
 函数声明也会在所有代码执行前被声明执行

			var a = 10;   //全局作用域
			function fun(){   //函数作用域(函数内部)
				var a = "132";
				var b = 20;
				console.log(a);
			}

二. this关键字

浏览器每次调用函数时，每次都会向函数内部传递一个隐含的参数。这个隐含参数就是 this ， this指向的是一个对象，这个对象我们一般称之为上下文对象（重点）

根据函数调用方式不同， this会指向不同的对象
		 	1.当以函数的形式调用时。 this指向的是window， 例:   fun();
		  	2.当以方法的形式调用时，this就是调用方法的那个对象

			function fun(){
				console.log(this);
			}
			
			//创建一个对象
			var obj = {
				name: '张三',
				sayName: fun
			}
			obj.sayName();  //this指向obj对象
			fun();  // this指向window

三. 工厂函数（顾名思义：和工厂一样批量化）

举例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 在创建多个属性一样的对象时，可以使用工厂函数快速创建对象
			 */
			var obj = {
				name: '张三',
				age: 18,
				gender: '男',
				sayName: function(){
					alert(this.name);
				}
			}
			
			var obj2 = {
				name: '李四',
				age: 20,
				gender: '男',
				sayName: function(){
					alert(this.name);
				}
			}
			// 以上方法创建函数对象比较繁琐
			
			//使用工厂函数创建对象  通过这种方法可以大批量的创建对象
			function createPerson(name, age, gender){
				// 创建一个新的对象
				var obj = new Object();
				obj.name = name;
				obj.age  = age;
				obj.gender = gender;
				obj.sayName = function (){
					alert(this.name)
				}
				return obj;
			}
			
			var per = createPerson('zhangsan', 18, '男');
			console.log(per);
		/*
		 * 使用工厂函数创建的对象，使用的构造函数都是Object
		 *  所以创建的对象都是Object类型
		 * 	这时就导致我们无法区分多种不同数据类型的对象
		 */
		</script>
	</head>
	<body>
	</body>
</html>

四. 构造函数

构造函数的本意是解决普通函数创建对象的数据类型都为Object的问题（个人理解）
主要区别为：构造函数需要使用new 首字母一般为大写

构造函数的执行流程

当调用构造函数时，就会立即创建一个对象；
将新建的对象设置为函数中的this，在构造函数中，可以使用this来引用新建的对象；
逐行执行函数中的代码；
新建的对象作为返回值返回。

<script type="text/javascript">
			 * this的情况：
			 * 	1.当以 函数 的形式调用时， this指向window;
			 *  2.当以 方法 的形式调用时， 谁调用这个方法 this 就指向谁;
			 *  3.当以 构造函数 的形式调用时，
			 */
			
			function Person(name, age, gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				// 构造方法
				this.sayName = function(){
					alert(this.name);
				}
			}
			// 创建一个  人  的对象
			var obj = new Person('张三', 18, '男');
			console.log(obj)
		</script>