6.JS基础的学习——06day

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量187 收藏
点赞数
分类专栏： JavaScript学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/actores/article/details/115254950
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

目录

1.全局作用域（Scope）

2.变量的提前声明

3.函数的（局部）作用域

4.debug的使用

5.函数的练习

6.this的使用

7.this的补充说明

8.使用方法创建工厂

9.test

总结

 

1.全局作用域（Scope）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			/*
			 作用域(作用区域)
			 *  - 作用域值得是一个变量的作用范围
			 * 	- 在JS中一共有两种作用域:
			 * 		1.全局作用域
			 * 			- 直接编写script标签中的JS代码，都在全局作用域
			 * 			- 全局作用域在页面打开时创建，在页面关闭时销毁(那就在不同页面可以用同一个名字)
			 * 			- 在全局作用域中有一个全局对象window
			 * 				它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
			 * 			- 在全局作用域中
			 * 				创建的变量都会作为window对象的属性保存
			 * 				创建的函数都会作为window对象的方法保存:也就是说函数的调用实际上就是window方法的调用
			 * 			- 全局作用域中的变量都是全局变量
			 * 				在页面得任意得部分都可以访问的到
			 * 			举例：相当于教室黑板，谁进来都可以看得到黑白，故黑板是一个抽象的全局变量
			 * 				
			 * 
			 * 
			 * 		2.函数的作用域(局部作用域)
			 * 
			 * 
			 * 
			 */
			/*function fun(){
				var a = 123;//a的作用范围只能在函数中
				
			}
			fun();*/
			//fun();同等于 window.fun();
			//console.log(a);
			/*举例一：
			 	全局作用域中的变量都是全局变量
			 * 	在页面得任意得部分都可以访问的到
			 * */
				var a = 10;
				var b = 20;
				//var c = "hello";
				//console.log(window.c);变量都会作为window对象的属性保存
				function fun(){
					console.log("我是fun函数");
				}
				fun();
				//fun();同等于 window.fun(); window的fun()方法调用
			
			
			
		</script>
	</head>
	<body>
		
	</body>
</html>

2.变量和函数的提前声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		//方法二：
			//var a;
			/*
			 变量的声明提前
			 *  - 使用var 关键字声明的变量，会在所有的代码之前被声明 (只是声明不会赋值)
			 * 		但是如果声明变量时不使用var关键字，则变量不会被声明提前
			 * 
			 * ctrl+方向上下键挪动代码行
			 * */
			//console.log("a = "+a);//显示 undefined
		//方法一：//var a = 123//如果不写var 就相当于window.a = 123 
				
			//a = 123;//方法二提前声明了
			
			
			
			/*
			 函数的声明提前
			 * 一般形式创建的函数：
			 * 	 - 使用函数的声明形式创建的函数function 函数名(){}
			 * 		   它会在所有的代码行执行之前就被创建，所以我们可以在函数声明之前来调用函数
			 * 
			 * 字面量创建的函数：
			 * 	 - 使用函数表达式创建的函数，不会被声明提前，所以不能在声明提前调用
			 * 		得先把函数赋值给变量之后 再调用函数
			 * 			var fun2 = function(){}
			 * 				fun2();
			 * 
			 * */
			
			fun();//显示：我是一个fun函数
			fun2();//显示： undefined
			//函数声明    会被提前创建
			function fun(){
				console.log("我是一个fun函数");
			}
			//函数表达式  不会被提前创建
			var fun2 = function(){
				console.log("我是一个fun2函数");
				//使用这个函数表达式，var fun2;会被在上面提前声明，但是是在39行才开始赋值的
				//是先执行了fun2();再赋值的，所以会显示undefined
			};
			/*fun();//显示：我是一个fun函数
			fun2();//显示： 我是一个fun2函数*/
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

3.函数的（局部）作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 函数作用域
			 * - 调用函数时创建函数的作用域，函数执行完毕以后，函数作用域销毁
			 * - 每调用一次函数就会创建一个新的函数作用域域，他们之间是相互独立的(每调用一次执行一次)
			 * - 在函数作用域中可以访问到全局作用域的变量
			 * 		在全局作用域 当中 无 法访问到 函数作用域内部中的变量
			 * 总结：从里面可以看到外面，从外面看不到里面
			 * 
			 * - 当在函数作用域中操作一个变量时(举例二)，
			 * 		它会先在自身作用域中寻找，如果有就可以直接使用。
			 * 		没有的话就采用就近原则，往上一级找直到找到全局作用域
			 * 		如果全局作用域中依然没有找到，则会报错ReferenceError引用异常
			 * - 在函数作用域当中，没有使用window就是局部的，使用window是全局的值
			 */
			//创建一个全局变量
			/*var a =10;
			
			function fun(){
				
				console.log("a=" +a);
				
			}
			
			fun();
			//fun(); 函数作用域是相互独立的
			//fun(); 整体当中的一个局部
			//fun();*/
			
			/*
			 就近原则举例一
			 * */
				/*var a =10;
			
				function fun(){
					
					var a="我是函数中的变量a";
				
					console.log("a=" +a);//显示：a=我是函数中的变量a
				}
				fun();
				console.log("a=" +a);//显示：a=10;
			*/
			 /*就近原则举例二:从本身往上找的*/
			
				var a =10;
			
				function fun(){
					
					var a="我是函数中的变量a";
				
					function fun2(){
						//这样可以找到局部变量的值
						console.log("a=" +a);//显示：a=我是函数中的变量a
						//如果上一级没有var a="我是函数中的变量a";
						//直接输出 a = 10;
						
						//但是我就是想找到上面哪个全局变量的值，所以
						console.log("a=" +window.a);//使用全局变量的对象调用就可以    显示10
						
					}
					fun2();
				}
				fun();
				//console.log("a=" +a);//显示：a=10;
				
				
			/*带var 的变量调用
			  在函数作用域当中也有声明提前的特性
			 	   使用var关键字来声明变量，会在函数中所有的代码块执行之前被声明	
			 */
			/*function fun3(){
				//相当于 var a;没有赋值 有a但是没有赋值
				console.log(a);//输出：undefined
				var a =35;
				//相当于 a= 35
			}
			fun3();*/
			
			
			
			/*函数声明前调用
			 		其实fun4就相当于一个小的全局作用域
			*/
			/*function fun4(){
				fun5();//在函数声明前调用
				var a =35;
				function fun5(){
					alert("i'm fun5");
				}
			}
			fun4();*/
			//生命周期比较短。使用时间短，调用完了就销毁了。fun4();
			
			
			/*
			 在函数中，不使用var声明的变量都会成为全局变量
			 * window.名
			 * */
			var c =33;
			function fun6(){
			/*情况一*/	//var c;有一个隐藏和没有赋值的c
				//console.log("c = "+c);//就会显示undefined
				//var c = 10;
			/*情况二*/
				console.log("c = "+c);
				c = 10;//没有使用var声明，所以表示没有c。直接找上一级，输出 c=33
			}
			fun6();
			
			/*情况三，全局输出 当 没有声明var的时候，所以声明c = 10 的时候就是等于 window.c=10变为全局变量了*/
			console.log("c = "+c);//显示33 和 10
			
			/*举例四：有形参的时候*/
			/*function fun7(e){
				//var e;相当于声明了变量
				alert(e);//显示undefined
			}
			fun6();*/
		</script>
	</head>
	<body>
	</body>
</html>

4.debug的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 debug 断点调试
			 		浏览器运行  - 脚本 - 选择断点行 - 点击单点跳过 - 看右边的变量值发生的变化
			 * 
			 * 
			 * 
			 * 
			 * 
			 * */
			//a b d 会提前声明变量
			alert(d);
			
			var a = 10 ;
			
			var b = "hello";
			
			c = true;
			
			function fun(){
				alert("hello");
			}
			var d = 35;
		</script>
	</head>
	<body>
	</body>
</html>

5.函数的练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 说出以下代码的执行结果咯
			 * 
			 * 
			 */
		/*1.------------*/
			/*var a = 123;
			function fun(){
				alert(a);
			}
			fun();
			结果：123
			* */
		/*2.------------*/
			/*var a = 123;
			function fun(){
				/ var a;默认
				alert(a); //undefined
				var a =456;
			}
			fun();
			alert(a);//显示123
			结果: undefined 123
			
			函数内部可以使用全局变量
			全局变量不能使用内部函数数据
			* */
		/*3.------------*/
			/*var a = 123;
			function fun(){
				alert(a);//显示123  上一级a=123
				a = 456;//没有var 默认为 window.a=456全局变量
			}
			fun();
			alert(a);//显示456   上一级a=456
			结果:  123  456

			都变为全局变量，按照就近原则，找上一级最近的
			*/
		/*4.------------*/
			/*var a = 123;
			function fun(a){
				alert(a);//undefined
				a = 456;//这里括号里有一个形参a就表示着  在函数里面声明了var a;
			}
			fun();
			alert(a);//显示123
			结果:undefined  123 (括号里有一个形参a就表示着 a是内部函数的值了  不能用了)
			* 
			*/
		/*5.------------*/
			/*var a = 123;
			function fun(a){
				alert(a);//显示123
				a = 456;//这里a = 456已经变为函数内部的值了 在前已经声明var了，不属于全局变量了
			}
			fun(123);
			alert(a);//显示123
		*/
		
		
		
			
			
		</script>
	</head>
	<body>
	</body>
</html>

6.this的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 	解析器在调用函数每次都会向函数内部传递进一个隐含的参数
			 		这个隐含的参数就是this，this指向的是一个对象
			 		这个对象我们称为函数执行的上下文对象（this指向）
			 		根据函数的调用方式的不同，this会指向不同的对象
			 			 1.以函数的形式调用时，this永远都是window
			 			 2.以方法的形式调用时，this就就是调用方法的那个对象
			 * 
			 * 
			 * */
			
			function fun(){//(a,b)
				//console.log("a= "+a+ ",b="+b); 显示undefined
				console.log(this.name);//浏览器给我们传过来的
				
				/*复习：
				 * 	    现在的this指的是 obj 或者 obj2 
				 * 
				 * 	    调用哪一个this指向的就是哪一个
				 * 
				 */
				
				
				
				
			}
			
		/*一句话：this就像  在当前的fun中指哪打哪*/
		/*举例一：对象的this  根据环境来使用this*/
			//创建一个对象
			var obj = {
				name:"孙悟空",
				sayName:fun
			};
			//console.log(obj.sayName == fun);//显示true
			//fun();//显示：window
			var obj2 = {
				name:"猪八戒",
				sayName:fun
			};
			/*对象的name属性：
			 	以方法的形式调用，this是调用方法的对象（obj）
			 */
			  obj.sayName();//显示孙悟空
			  obj2.sayName();//显示猪八戒
		/*复习*/
			  //和this.name有关系，也就是说this调用对象是不固定的，执行哪个就调动哪个
		
		
		/*举例二：全局的this  根据环境来使用this*/
			
			var name = "全局的name属性";
			//以函数的形式调用 this是window
			fun();//显示     全局的name属性
			//等于 window.fun(); 这样就会有了this指哪打哪的作用
		
		
		
		
		
		</script>
	</head>
	<body>
	</body>
</html>

7.this的补充说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			
			

			//创建一个name变量
			var name = "全局";
			
			//创建一个fun()函数
			function fun(){
				//console.log(name);
				//console.log(obj.name);一个一个输入太麻烦
				//console.log(obj2.name);一个一个输入太麻烦
				console.log(this.name);//自动适配：孙
			}
			//创建两个对象
			var obj = {
				name:"孙悟空",
				sayName:fun
			};
			var obj2 = {
				name:"猪八戒",
				sayName:fun
			};
			
			//fun();显示  全局
			//我们希望调用obj.sayName()时可以输出obj的名字
			obj.sayName();//显示   全局   because sayName就是fun函数，这里调用的是fun函数，所以函数里面没有name值，就直接往上找
			
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

8.使用方法创建工厂

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 创建一个对象
			 * 
			 *
			 */
			
		//写固定的普通对象obj
		/*	var obj = {
				name:"孙悟空",
				age:18,
				gender:"男",
				sayName:function(){
					alert(this.name);
				}
			};*/
			
			
		//更加灵活：工厂实例化
			/*
			 使用工厂方法创建对象
			 * 通过该方法可以大批量的创建对象
			 * 
			 */
			function createPerson(name , age , gender){
				//创建一个新的对象
				var obj = new Object();
				//向对象当中添加属性
				/*obj.name = "孙悟空";
				obj.age = 18;          写固定了
				obj.gender = "男";*/
				//利用参数传递值
				obj.name = name;
				obj.age = age;         
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
				}
				/*obj 代表的是一个对象
				 * 所谓对象就是所他可以包纳万物
				 * 无论是Number bool 还是String
				 * 或这是其他实列都包含在里面
				 * 然而Return就是需要将处理过后的结果返回出去
				 * 就相当于一个工厂
				 * 我提供原材料然而工厂输出的将会是产品
				 * 
				 */
				//将新的对象返回到函数中，让函数自己输出
				return obj;
			}
		//obj1和obj2和obj3就是工厂实例化的对象
			var obj1 = createPerson("孙悟空",18,"男");
			var obj2 = createPerson("猪八戒",28,"男");
			var obj3 = createPerson("沙悟净",28,"男");
			/*console.log(obj1);
			console.log(obj2);
			console.log(obj3);*/
			obj1.sayName();//显示  孙悟空
			
			
				
			
		</script>
	</head>
	<body>
	</body>
</html>

9.test使用工厂方法创建对象练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 使用工厂方法创建对象练习
			 * 
			 * 
			 */
			
			/*function createPerson(name , age , gender){
				//创建一个对象使用
				var obj = new Object();
				//创建对象属性：通过参数传递
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					console.log(this.name);//为什么一次只能写一次
					//console.log(this.name,this.age);
				}
				//返回一个新的对象，因为函数需要有一个值能够返回其结果并告诉函数
				return obj;
			};
			
			var obj1 = createPerson("周启永",20,"男");
			obj1.sayName();*/
		
		//使用工厂方法
			function bulider(name , age , gender){
				var obj = new Object();
				//设置属性：单个值，单个函数
				obj.name = name;
				obj.age = age;
				obj.gender = gender;
				obj.sayName = function(){
					alert(this.name);
					alert(this.age);
					alert(this.gender);
				}
				return obj;
			}
			var obj1 = bulider("周启永",18,"男");
			obj1.sayName();
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

总结

 

小周日记
关注
专栏目录
Node.js学习笔记 [黑马程序员]——day2
weixin_45732235的博客
10-21 1350
day2
谷粒商城基础篇——Day06
wu6426的博客
05-05 811
商品服务-API-品牌管理 一、使用逆向功能的前后端代码 效果优化与快速显示开关 云存储开通与使用 OSS整合测试 OSS获取服务端签名 OSS前后联调测试上传 表单校验&自定义校验器 JSR303数据校验 统一异常处理 JSR303分组校验 JSR303自定义校验注解 概念-SPU&SKU&规格参数&销售属性 商品服务-API-属性分组 前端组件抽取&父子组件交互 获取分类属性分组 分组新增&级联选择器 分组修改&级联选择器回显 商品服务-API-品
前端基础（四）：JS（对象）
sulia1234567890的博客
08-28 372
目录 4. 对象 4.1 对象定义 4.2 创建对象 4.3 对象的分类 4.3.1 内建对象 4.3.2 宿主对象 4.3.3 自定义对象 4.4 引用数据类型 4.5 对象字面量 4.6 函数 4.6.1 函数的概念 4.6.2 函数的参数 4.6.3 函数的返回值 4.6.4 return 子函数 4.6.5 立即执行函数 4.7 对象方法 4.8 遍历对象中的属性 4.9 作用域 4.10 变量的声明提前 4.11 This 4.12 构造函数 4.13
window.onload=fun()和window.onload=fun的区别
wangdandan6541的博客
01-12 1675
window.onload=fun()和window.onload=fun直观看上去，两者只有一个括号的区别，那么接下来我们分析下他们的本质区别： 举个例子： function  abc(){ return 123}     window.onload=abc()  就等于  window.onload=123   它的优先执行顺序是从右往左，abc（）函数先执行再赋值，而onload是绑定
当window.parent.fun();子页面调用父页面方法不起作用时
liona_koukou的博客
12-21 9593
当window.parent.fun();子页面调用父页面方法不起作用时 请果断试一下top.window.parent.fun(); 有时间想仔细整理一下父子页面的传值和调用function的方法_(:зゝ∠)_
窗函数(window function)
热门推荐
长风破浪会有时，直挂云帆济沧海
03-11 1万+
原文地址：function)">窗函数(window function)作者：了凡春秋窗函数是频谱分析中一个重要的部分，窗函数修正了由于信号的非周期性并减小了频谱中由于泄露而带来的测量不准确性。 快速傅里叶变换假定了时间信号是周期无限的。但在分析时，我们往往只截取其中的一部分，因此需要加窗以减小泄露。窗函数可以加在时域，也可以加在频域上，但在时域上加窗更为普遍。截断效应带来了泄漏，窗函数是为了减小
Vue子组件调用父组件方法并传参的5种方式：$emit触发、传入子组件function、访问父组件$parent.function、用inject关联父组件provide的方法、用window.fun
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
09-04 8415
子组件child.vue。父组件father.vue。
8.JS的基础学习——08day
actores的博客
03-26 262
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 1.数组的简介 2.数组的字面量 3.数组的4个方法 4.数组的遍历 5.重写数组的练习 6.forEach的使用 7.数组的方法slice和splice 8.数组的去重练习 9.数组的剩余方法 总结 1.数组的简介 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit..
谷粒商城基础篇——Day04
wu6426的博客
05-02 1375
前端开发基础知识&快速入门
微信小程序——day02.zip
01-11
在"微信小程序——day02"的学习主题中，我们将深入探讨微信小程序开发的基础和进阶知识。 1. **环境配置**：首先，你需要安装微信开发者工具，这是创建和调试小程序的必备平台。下载并安装后，可以通过工具进行项目...
谷粒商城基础篇——Day01
wu6426的博客
04-29 1969
01、分布式基础&项目环境搭建 一、项目简介 1. 项目背景 1.1 电商模式 市面上有 5 种常见的电商模式 B2B、B2C、C2B、C2C、O2O 1) B2B 模式 B2B(Business to Business)，是指商家和商家建立的商业关系，如 阿里巴巴 2) B2C 模式 B2C(Business to Consumer) 就是我们经常看到的供应商直接把商品卖给用户，即 “商对客” 模式，也就是通常所说的商业零售，直接面向消费者销售产品和服务，如苏宁易购，京东，天猫，小米商城 3) C
Web所有父窗体与子窗体的交互方法列举(子调用父窗体函数)
JetWindLee的专栏
07-29 2484
Web所有父窗体与子窗体的交互方法列举(子调用父窗体函数)
js中抛出方法的方式
负数
12-12 3489
在window上挂载 window.Fun = Fun //不建议使用 抛出一个对象 var common = { arrayRule:function(){ }, methodRule:function(){ }, .... } export default common 引入方法 全局引入 import common from '...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 882
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 630
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 482
实现中国地图各省数据案例
Python学习：Json与Csv数据存储实战——爬虫Day12
这篇教程为学习者提供了关于数据存储中JSON和CSV的基础知识，以及如何在Python中进行数据格式转换的实践示例，这对于爬虫项目中数据的收集、清洗和存储非常实用。通过每天30分钟的学习，读者能够掌握这些关键技能，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值