【前端】JavaScript入门及实战56-60

子非鱼921

于 2024-07-21 13:57:16 发布

阅读量747

点赞数 6

分类专栏：【前端】JavaScript入门及实战（1-140）文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45980065/article/details/140587117

版权

【前端】JavaScript入门及实战（1-140）专栏收录该内容

28 篇文章 0 订阅

订阅专栏

文章目录

56 立即执行函数
57 对象
58 变量的声明提前
59 函数作用域
60 debug

56 立即执行函数

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		立即执行函数：函数对象()
		函数定义完，立即被调用，这种函数叫做立即执行函数
		立即执行函数往往只会执行一次
	*/
	
	// 报错
	function(){
		alert("我是一个匿名函数");
	}
		
	// 用括号标识是一个整体
	(function(){
		alert("我是一个匿名函数");
	})();
	
	// 用括号标识是一个整体
	(function(a, b){
		console.log(a);
		console.log(b);
	})(123, 456);
</script>
<style>
</style>
</head>
<body>
</body>
</html>

57 对象

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		创建一个对象
	*/
	
	var obj = new Object();
	
	// 向对象中添加属性
	obj.name = "孙悟空";
	obj.age = 18;
	
	// 对象的属性值可以是任何的数据类型，也可以是个函数
	obj.sayName = function(){
		console.log(obj.name);
	};
	
	// 调方法
	obj.sayName(); // 孙悟空
	
	/*
		函数也可以称为对象的属性，
		如果一个函数作为一个对象的属性保存，
		那么我们称这个函数是这个对象的方法，
		调用函数就说调用对象的方法（method）
		
		但他只是名称上的区别没有其他的区别
	*/
	
	var obj = {
		name: "孙悟空",
		age: 18, 
		gender: "男",
		address: "花果山"
	};
	
	// 枚举对象中的属性
	// 使用for ... in 语句
	/*
		语法：
		for(var 变量 in 对象){
			
		}
		for ... in 语句在对象中有几个属性，循环体就会执行几次
		每次执行时，会将对象中的一个属性名字赋值给变量
	*/
	for(var n in obj){
		console.log("hello");
		console.log("属性名" + n); // 属性名
		console.log(obj.n); // undefined，相当于obj["n"]
		console.log("属性值" + obj[n]); // 属性值
	}
</script>
<style>
</style>
</head>
<body>
</body>
</html>

58 变量的声明提前

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		变量的声明提前
			1. 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不赋值）
			2. 但是如果声明变量时，不使用var，则变量不会被声明提前
			
		函数的声明提前：
			1. 使用函数声明形式创建的函数function 函数(){}，
			   他会在所有的代码执行之前就被创建
			2. 使用函数表达式创建的函数，不会被声明提前，所以不能在声明前使用
			
	*/
	
	// 二者相同
	a = 123;
	window.a = 123;
	
	console.log(a); // 未报错，undefined
	var a = 123;

	console.log(a); // 报错
	a = 123;
	
	fun(); // 函数声明之前调用，未报错
	fun2(); // 报错，undefined
	// 函数声明，会被提前创建
	function fun(){
		console.log("我是一个fun函数");
	}

	// 函数表达式，不会被提前创建
	var fun2() = function(){
		console.log("我是一个fun函数");
	};
</script>
<style>
</style>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		作用域：
			1. 作用域指一个变量的作用的范围
			2. 在JS中一共有两种作用域：
				（1）全局作用域：
						直接编写在script标签中的JS代码，都在全局作用域中，
						全局作用域在页面打开时创建，在页面关闭时销毁，
						在全局作用域中有一个全局对象window，
						让代表的是一个浏览器的窗口，它由浏览器创建，我们可以直接使用
						
						在全局作用域中：
							创建的变量都会作为window对象的属性保存
							创建的函数都会作为window对象的方法保存
						全局作用域中的变量都是全局变量，在页面的任意部分都可以访问的到
	*/
	
	var b = 456;	
	function fun(){
		var a = 123;
	}
	fun();
	console.log(a);
	
	var c = 10;
	console.log(window.c); // 10
	
	window.fun();
</script>
<style>
</style>
</head>
<body>
</body>
</html>

59 函数作用域

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		函数作用域：
			调用函数时，创建函数作用域，函数执行完毕以后，函数作用域销毁
			每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的
			在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量
			
		当在函数作用域操作一个变量时，他会现在自身作用域中寻找，如果有就直接使用，
			如果没有就在上一级作用域中寻找，直到找到全局作用域，
			如果全局作用域中依然没有找到，则会报错ReferenceError
		
		在函数中要访问全局变量可以使用window变量		
	*/
	
	// 创建一个变量
	var a = 10;
	
	function fun(){
		var a = "函数中的变量a";
		var b = 20;
		console.log(a);
		
		function fun2(){
			console.log(a);
			console.log(window.a);
		}
	}
	fun();
	
	/*
		在函数作用域中也有声明提前的特性，使用var关键字声明的变量，会在函数中所有的代码执行之前先被声明
		函数声明也会在函数中所有的代码执行之前执行
	*/
	function fun3(){
		fun4();
		
		console.log(a); // undefined
		var a = 35;
		
		function fun4(){
			alert("fun4");
		}
	}
	fun3();
	
	/*
		在函数中，不使用var声明的变量都会成为全局变量
	*/
	var c = 33;
	function fun5(){
		console.log(c);  // 33
		c = 10;
		d = 100; // 相当于window.d
	}
	
	fun5();
	//在全局输出c
	console.log(c); // 10
	console.log(d); // 100

	var e = 23;
	/*
		定义形参就相当于在函数作用域中声明了变量
	*/
	function fun6(e){
		alert(e);
	}
	
	fun6(); // alert undefined
</script>
<style>
</style>
</head>
<body>
</body>
</html>

60 debug

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	
	alert(d);
	var a = 10;
	var b = "hello";
	c = true;
	function fun(){
		alert("hello");
	}
	
	var d = 35;	
</script>
<style>
</style>
</head>
<body>
</body>
</html>