夯实JS系列--变量、作用域和内存问题

最近在忙于写一个react+node的全栈博客demo,没有时间更新文章。但是还是觉得这样一忙起来不更新是不应该的。正好在空闲上下班地铁上都会再去细读js原生知识。所以打算整理、总结、系统性的分享给大家。

基本类型和引用类型

在ECMAScript中，变量分为基本类型和引用类型两种。
基本类型就是存储简单的数据段。而引用类型指的是那些可能由多个值构成的对象。
在ECMAScript中，基本类型包括：Undefined、Null、Boolean、Number和String。
这些基本类型的对象都是按值访问的。所以js中我们可以直接操作他们。
但是引用类型如Object等，是按照引用来操作的。并非直接操作其值。
并且我们可以动态的为引用类型变量添加属性和方法。而基本类型则不可以。

变量赋值和传参

这里其实对于基本类型来说没有什么需要重点说明的。这里就重点说下引用类型吧

对于赋值

function setName(obj) {
  obj.name = "Neal";
  obj = new Object();
  obj.name = "yang";
}
var person = new Object();
setName(person);
console.log(person.name);

如上代码，最后console出来的是Neal。

这段代码说明两点：

• 引用类型在传参的时候，是按照引用传递的，不然不可能person.name为Neal
• 即使在函数内部修改了参数的值。原始的引用依然不变。实际上，在重写obj的时候，这个变量的引用已经是一个局部变量了。只是在这儿函数运行完，这个对象被销毁了。

所以说到这，对于对象的赋值，一句以概之：引用的赋值。

执行环境及其作用域

这大概是一个非常基础也是重要的部分，后续会在进阶里面详细展开。

执行环境定义了变量或者函数有权访问的其他数据，决定了他们的行为。每一个执行环境都有一个与之关联的变量对象（如global、window）。环境中定义的所有变量和函数都保存在这个对象中。

某一个执行环境执行完毕后，该环境会被销毁。其中的所有的变量和函数也将随之销毁。全局执行环境知道应用程序退出才被销毁（如关闭网页等）

当代码在一个环境中执行的时候，会创建变量对象的一个作用域链。作用域链的用途，是保证对执行环境有权访问的变量和函数的有序访问。作用域链的前端，始终是当前执行的代码所在的
环境的变量对象。全局执行环境始终是作用域链的最后一个对象。

标识符的解析也就是沿着作用域链一级一级的搜索的过程。搜索过程从作用域链的前端开始，然后逐级向后回溯。知道找到标识符为止。

var color = 'red';
function changeColor() {
  var anotherColor = 'blue';
  function swapColors() {
    var tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;
    //这个执行环境中可以访问到 tempColor color antherColor
  }
  //这里只能访问anotherColor color
  swapColors();
}
changeColor();//这里只能访问color

所以从上面代码我们可以感受到：内部环境可以通过作用域链访问到外部环境的变量。反之不可。这些环境之间的联系都是线性、有次序的。

延长作用域链

虽然执行环境的类型只有两种。局部的和全局的。但是还有一种方法可以延长作用域链。

这是因为有些语句可以在作用域链的前端临时添加一个变量对象，改变量对象会在代码执行后被移除。

• try-catch 语句中的catch
• with语句

对于width语句而言，会将指定的对象添加到作用域链中。对于catch语句而言，会创建一个新的变量对象，其中包含被抛出的错误对象的申明。

关于作用域、环境之类的话题后续会再细说。这里作为基础篇，就先介绍到这里。

垃圾收集

很开心~js不需要你来收拾垃圾！好~此篇完结！

好吧~虽然我们不收拾垃圾，但是也是要稍微了解下js是如何收拾垃圾的。

首先什么是垃圾：哪些不再被继续使用的变量都是垃圾。什么叫收拾？释放起垃圾所占用的空间即为释放。

局部变量只在函数执行过过程中存在。而在这个过程中，会为局部变量在栈或者堆中分配相应的内存空间（存值呗）。然后函数执行啦，用了这些变量，执行完啦。完啦！则这些变量就没有用了。没用了，则为垃圾，既需清理。

但是并非所有的情况下都这么容易的得出结论。垃圾收集器必须跟踪哪个变量用了哪个变量没用。对于不在利用的打上标记，已被将来收回其所占用的内存。

标记清除

这是最为常用一种清除方式。当一个变量进入到环境的时候，标记为‘进入环境’，这个基本是不会被清除的，因为执行流进入到相应的环境的时候可能会用到。当变量离开环境的时候，标记为‘离开环境’。

可以使用任何方式来标记。我们要知道是如何标记不重要，重要的是采用什么策略。

垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记。他会去掉环境中的变量以及被环境中的变量所引用的变量的标记。剩下的，则视为嫌疑人，准备删除。因为环境中的变量已经无法访问到这些变量了。目前IE、ff 、 opera 、 chrome都是这种标记清除方式

引用计数

因为不常用，简单说下

引用计数的意思就是跟踪记录每一个值被引用的次数。当一个引用类型的变量复制给一个变量的时候，这个引用次数则+1，如果有别复制给另一个变量，则再+1，如果包含对这个值的引用的变量又被赋值了别的值。则这个值-1.

当引用次数为0的时候，为垃圾~回收！

为什么不常用呢？看着也很清晰啊！

look code:

function test() {
  var objectA = new Object();
  var objectB = new Object();
  
  objectA.someOtherObject = objectB;
  objectB.someOtherObject = objectA;
}

如上，对象A和对象B的属性互相引用。也就是说，这两个对象的引用次数永远都是2.哪怕这个函数执行完咯，也没法清理的。对的，这就是bug~

节制点~你懂得

虽然垃圾回收机制帮我们做了很多事，但是电脑分配给浏览器的可用内存通常要比桌面应用的内存要小的多，毕竟是为了防止运行js的网页耗尽所有的内存而导致系统崩溃的问题发生。

所以我们确保用最少的内存可以让页面获取最好的性能，最佳的执行方案就是执行中的代码都是有必要的数据。就好比用最低的经济拿最多的人头一样，一旦经济不够，技术弥补！一旦数据不要用了，自己主动扫除。

function createPerson(name) {
  var localPerson = new Object();
  localPerson.name = name;
  return localPerson;
}
var neal = createPerson('Neal');

//主动清理垃圾
createPerson = null;

这里讲createPerson设置为null，并没有就把他给清除了，只是释放了他的引用。让其脱离其执行环境，以便于垃圾收集器更快的将其回收。

微信公众号：前端的全栈之路

欢迎大家订阅~更多原创文章整理（js、react）

一起交流~一起进步~