前端基础(十二)_函数高级、全局变量和局部变量、 预解析(变量提升)、函数返回值

作用域

作用域指:变量或函数的有效使用范围,有全局作用域与局部作用域两种。

全局变量和局部变量

全局变量:直接在 script 标签下声明的变量,任何地方都能访问,任何地方都能对其值进行改变。
局部变量:函数内部定义的变量,函数内能访问,出了函数的括号就不能访问(垃圾回收)。

例1:全局变量或函数能在任何地方访问和修改

var a = 10; // 全局 在任何地方被访问且修改
function fun1() {
    
    
	a++;
console.log(a); //11
}
function fun2() {
    
    
	a++; //12
	a--; //11
	console.log(a); //11
}
fun1();
fun2();
console.log(a);//11

在这里插入图片描述
例2:局部变量或函数只能在函数内部访问

sum();
function sum() {
    
    
	var a = 10; // 定义一个局部变量
	console.log(a);
	function s() {
    
    
		console.log(A+a);
	}
s();
}
console.log(a); //a 是局部变量,出了函数,就会被销毁(垃圾回收)
s();//s is not defined

注意:不是{}中声明的就是局部变量,只有在函数中声明的是局部变量。

预解析(变量提升)

浏览器在解析js代码的时候,会进行一个预解析的操作,会有一个js解析器(假设有的名字),里面会执行其中的两步(不单单就这两步):
1、找一些东西(var function 参数)
2、逐步执行代码
找var的时候,如果存在var关键字,则会将这个变量先存储下来,存储的形式为:var a,预解析的时候变量中存的都是 undefined,等到逐行解析遇到表达式即 + - * / % ++ – = 等操作才会改变变量的值。
找 function 的时候,会将整个函数都保存下来。
找参数的时候,即执行函数时,函数内部可以看作是一个小的区域,有自己的预解析,参数就跟变量 var 一样。
例1:var

console.log(a); //undefined	
var a = 10; //a = 10
console.log(a);//10

上面代码中,先找 var,存储 a 的值为 undefined,所以第一次打印的结果为undefined,然后执行 a=10。
例2:function

console.log(fun1);
function fun1() {
    
    
	alert(“fun1”);
	// 我是一个注释
}
console.log(fun1);

上面代码中,函数会整个存储下来,包括注释。
例3:函数内部会进行一个跟外部一样的预解析

var a = 10;
console.log(a); //10
function fun2() {
    
    
	alert(a); //undefined
	var a = 20;
	alert(a); //20
}
fun2();

函数返回值

函数是用来实现某个特定功能,如计算某个范围内的累加,操作完成之后,在函数外部可能需要使用计算好的这个值,但是在函数内部定义的变量外面访问不了,针对这个情况,函数通过返回值将计算好的数据传出函数,在外部使用。在函数中将某个值返回到函数外,使用 return 关键字。

注意:
1、函数通过关键字return 返回函数中的内容
2、return 一次只能返回一个值
3、函数中只要遇到return,函数就会结束
4、函数没有返回值,默认结果为undefined

例1:计算 1-100 之间的累加和,将结果返回

function fun3(num) {
    
    
	var sum = 0;
	for (var i = 1; i <= num;i++){
    
    
		sum += i;
	}
	return sum; //return 关键字,将 sum 的值传出去
}
// 如果函数存在返回值,可以在调用函数的同时得到函数的返回值
console.log(fun3(100));//5050
var sum = fun3(100);
console.log(sum); //5050

在这里插入图片描述

函数返回值类型

和函数的参数一样,函数的返回值也可以是 js 数据类型中的任何一个。
例1:function 做为返回值

function fun1() {
    
    
	return function () {
    
    
		alert(“返回了一个函数”);
	}
}
var f = fun1(); // 接收返回的函数
f(); // 调用返回的函数
fun1()(); // 直接调用

以前写的文章 :
1、浏览器预解析之变量提升奥秘
2、this指向-作用域、作用域链-预解析 变量提升-Vue组件传值 父子 子父 非父子-Vue数据双向绑定原理

猜你喜欢

转载自blog.csdn.net/qq_43291759/article/details/128655717
今日推荐