目录
作用域
作用域指一个变量的作用范围。它是静态的(相对于上下文对象), 在编写代码时就确定了。
作用:隔离变量,不同作用域下同名变量不会有冲突。
全局作用域
直接编写在script标签中的JS代码,都在全局作用域。
在全局作用域中:
-
在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,它由浏览器创建我们可以直接使用。
-
创建的变量都会作为window对象的属性保存。
<script>
var a = 10;
</script>
-
创建的函数都会作为window对象的方法保存。
<script>
function say(){
}
</script>
全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问到。
函数作用域
调用函数时创建函数作用域,函数执行完毕以后,函数作用域销毁。每调用一次函数就会创建一个新的函数作用域,他们之间是互相独立的。
在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量。简单讲就是里面可以访问外面,但是外面不能访问里面。
在函数中要访问全局变量可以使用window对象。
<script>
var a = 10;
function say(){
console.log(window.a);
}
</script>
提醒1:
在函数作用域也有声明提前的特性:
-
使用var关键字声明的变量,会在函数中所有的代码执行之前被声明
-
函数声明也会在函数中所有的代码执行之前执行
因此,在函数中,没有var声明的变量都会成为全局变量,而且并不会提前声明。
<script>
var a = 10;//全局
function say(){
var a = 5;//局部变量
b = 20;//全局
console.log(window.a);
}
</script>
提醒2:定义形参就相当于在函数作用域中声明了变量。
<script>
var a = 10;//全局
function say(b){
//b为局部
}
</script>
执行上下文
函数执行上下文
在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)。
(1)对局部数据进行预处理:
形参变量==>赋值(实参)==>添加为执行上下文的属性
arguments==>赋值(实参列表), 添加为执行上下文的属性
var定义的局部变量==>undefined, 添加为执行上下文的属性
function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
this==>赋值(调用函数的对象)
(2)开始执行函数体代码
执行上下文栈
1.在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
2.在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
3.在函数执行上下文创建后, 将其添加到栈中(压栈)
4.在当前函数执行完后,将栈顶的对象移除(出栈)
5.当所有的代码执行完后, 栈中只剩下window
作用域与执行上下文的区别
区别1:
全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时
全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
函数执行上下文是在调用函数时, 函数体代码执行之前创建
区别2:
作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放
联系:
执行上下文(对象)是从属于所在的作用域
全局上下文环境==>全局作用域
函数上下文环境==>对应的函数使用域
递归
一个函数通过名字调用自身的情况,好处是代码简洁。在树的前序,中序,后序遍历算法中,递归的实现明显要比循环简单得多。
注意:
-
找规律,很容易找到规律的使用递归特别方便
-
出口,必须得有个已知的,没有出口就会一直循环
缺点:
-
函数调用导致的时间和空间消耗大
-
存在重复计算,效率低
-
调用栈可能会溢出
<script>
//递归实现阶乘
function sayhi(num) {
if (num <= 1){
return 1;
}else {
return num * sayhi(num-1);
}
}
console.log(sayhi(5));
</script>
<script>
//递归:一个函数可不可以自己调用自己
function f1() {
console.log("hello");
f1();
}
//递归就是老和尚讲故事,死循环了,必须要给一个结束的条件才有意义
var i = 0;
function f1() {
console.log("hello");
i++;
if (i < 10) {
f1();
}
// }
// f1();
//
//求n个数的累加,我们可以采取递归来替代循环
function getSum(n) {
if (n === 1) {
return 1;
}
return n + getSum(n-1);
}
console.log (getSum(100));
//递归调用比较占用资源,循环次数太多不适合使用
//
//输入一个数,求这个数的各位数字之和
//先取余再相除在取整
function getSum(n) {
//结束条件
if (n < 10) {
return n;
}
return n % 10 + getSum(parseInt(n/10));
}
console.log(getSum(140));
</script>
闭包
有权访问另外一个函数作用域中的变量的函数。当内部函数被保存在外部时,将会生成闭包。
产生闭包的条件
-
1.函数嵌套
-
2.内部函数引用了外部函数的数据(变量/函数)。
缺点:闭包导致原有作用链不释放,导致内存泄露(漏得越多,等价占用的内存越多,剩下的可用内存就少了)。
全局变量和局部变量,该特殊之处在于函数内部可以读取全局变量,但是函数外部是不能读取局部变量的。函数内部声明变量的时候,一定要使用var命令。这就导致一个问题,如果我们需要从外部读取函数内的局部变量的时候,就必须采用一种特殊的方式,在函数内部再定义一个函数。
<script>
function f1(){
var n=22;
function f2(){
alert(n); // 22
}
}
</script>
我们只需要将f2作为返回值,就可以读取f1的内部变量了。
上述f2就是闭包,也就是说闭包是一个可以读取其他函数内部变量的函数;即一个函数内部的函数。
闭包的作用
- 读取函数内部的变量,实现公有变量;
- 可以做缓存,使得变量的值始终保持在内存中;
- 可以实现封装,属性私有化;
- 模块化开发,防止污染全局变量
举例1:
<script>
function f1() {
var a = 1;
function f2() {
a ++;
console.log(a);
}
return f2;
}
var f = f1();
f();//2
f();//3
f();//4
f();//5
</script>
ps:外部函数f1执行完毕后,变量a并没有消失,而是保存在了内存中。
内部采用函数表达式,没有产生闭包的原因如下:
<script>
function f1() {
var re = [];
for (var i=0; i < 10; i++){
re[i] = function () {
console.log(i);
};
}
return re;
}
var f = f1();
for (var j=0; j < 10; j++){
f[j]();
}
// 输出为10个10
</script>
ps:f1执行完了之后外部i值已经是10了,函数内部只是引用 ,只有外部调用的时候才会运行函数,那时候i就已经是10了,而且10个函数都指向同一个AO。
举例2:将所有的数据和功能都封装在一个函数内部(私有的),只向外暴露一个包含n个方法的对象或函数。
<script>
function myModule() {
//私有数据
var msg = 'hello'
//操作私有数据的函数
function doSomething() {
console.log('doSomething() ');
}
function doOtherthing() {
console.log('doOtherthing() '))
}
//通过【对象字面量】的形式进行包裹,向外暴露多个函数
return {
doSomething1: doSomething,
doOtherthing2: doOtherthing
}
}
</script>
使用注意
- 内存消耗大,理性使用
- 不要随便改变父函数内部变量的值
内存泄漏
内存泄漏:占用的内存没有及时释放。内存泄露积累多了就容易导致内存溢出。
常见的内存泄露:
-
1.意外的全局变量
-
2.没有及时清理的计时器或回调函数
-
3.闭包
内存溢出(一种程序运行出现的错误)
内存溢出:当程序运行需要的内存超过了剩余的内存时,就出抛出内存溢出的错误。