An article with you to understand in JavaScript variables, scopes and memory problems

Author | Jeskson

Source | Dada front-end bistro

1

Variable area in JavaScript are divided into two types:

One for the basic type value A value is a reference type.

The basic value refers to a simple type of data segments

Referenced object type is composed of a plurality of values ​​may be provided by

Values ​​of reference types are object stored in memory, JavaScript memory space does not allow direct manipulation of objects, in fact, the operation object reference instead of the actual object.

var dada = new Object();
undefined
dada.name = "dada";
"dada"
console.log(dada.name);
VM158:1 dada
undefined

var da1 = "da1";
undefined
da1.age = 12;
12
console.log(da1.age);
VM272:1 undefined
undefined

Added value of primitive type of property, but to no avail, only to dynamically add attributes to the values ​​of reference types, it is useful.

2

Copy the value of the variable

Copy primitive values ​​is variable from one to another type of variable and reference value

var da1 = 12;
var da2 = da1;

Da1 stored value is 12, when used to initialize values ​​da1 da2, da2 also holds the value of 12, but the value of d2 values ​​da1 12 and 12 are completely independent. These two variables can participate in any operation independently of each other.

Copy the value of a reference type variable from one variable to another:

The value of reference type is actually a pointer pointing to objects stored in a heap, a reference type of replication, reference is directed to the same object, so changes to a variable, the other variables also affected brother.

var da3 = new Object();
var da4 = da3;

da3.name = "dada";
console.log(da4.name);

da4 da3 and the same object, the name attribute is added da3, da4 access this property, because the two variables refer to the same object, the result is output as dada.

3

Parameter passing:

In JavaScript, all parameters are passed by value function, the meaning of the parameter passed by value, and copying the same, the value of the transfer function to the outer internal functions.

function addNum(num){
 num = num + 1;
 return num;
}
var da5 = 12;
var result = addNum(da5);
console.log(da5);
console.log(result);

AddNum one parameter function num, this parameter is actually a function of local variables. Call this function, as da5 variable parameters are passed to this function, the variable is 12, the parameter num is used in the function 12 in this addNum ().

function setName(obj) {
 obj.name = "dada";
}
var da6 = new Object();
setName(da6);
console.log(da6.name);

Detection type:

typeof operator is used to detect whether a variable is an elementary data type, if a variable has a value object, or null, the return of this typeof operator is the object.

var da7 = "dada";
var da8 = 12;
var da9;
var da10 = null;
var da11 = new Object();

console.log(typeof da7);
console.log(typeof da8);
console.log(typeof da9);
console.log(typeof da10);
console.log(typeof da11);

instanceof operator is used to doing it? Judge what type of object.

// 前提先定义person
console.log(person instanceof Object);
console.log(person instanceof Array);
console.log(person instanceof RegExp);

注意，所有的引用类型的值都是Object的实例，所以检测引用类型的值和Object构造函数时，instanceof操作符都是返回true。instanceof操作符检测基本类型的值，返回的则都是false。因为instanceof检测的都是什么类型的对象。

4

作用域：

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

标识符解析是沿着作用域链一级一级地搜索标识符的过程。

var da12 = "dada"

function changeDa(){
 if(da12 === "dada"){
  da12 = "da";
 }else{
  da12 = "da1";
 }
}

changeDa();

console.log(da12);

函数changeDa()的作用域链包含两个对象：

它自己的变量对象，和，全局环境的 变量对象。

它自己的 定义着的arguments对象

var da12 = "dada"

function changeDa(){
 var anotherDa = "dadada";
 
 function daDa(){
  var tempDa = anotherDa;
  anotherDa = da12;
  da12 = tempDa;
  // 可以访问 tempDa, anotherDa,da12
 }
 // 这里只能访问 da12,anotherDa
 daDa();
}
// 这里只能访问da12;
changeDa();

分析执行环境，有3个，一个为全局环境，一个为changeDa()的局部环境，一个为daDa()的局部环境。

全局环境中有一个变量da12，和一个函数changeDa()。

changeDa()的局部环境中有什么？

一个变量anotherDa，一个名为daDa()的函数。这个函数可以访问全局变量中的da12。

daDa()的局部环境中有什么？

一个变量tempDa，该变量只能在这个环境中访问。

无论是全局环境还是changeDa()的局部环境都无法访问tempDa。

为什么内部的daDa()可以访问其他两个环境中的所有变量呢？

因为那是它们两个的环境是它的父执行环境。

内部环境可以通过作用域链访问所有的外部环境，但是外部环境不能访问内部环境中的任何变量和函数，内部环境都可以向上搜索作用域链，查变量和函数名，不能向下搜索作用域链进入另一个环境。

对于daDa()函数，其中作用域链包含3个对象：

daDa()的变量对象，changeDa()的变量对象，全局变量对象。

过程：

daDa()函数的局部环境，会先开始搜索自己的变量对象中的变量和函数名，如果找不到，会向上搜索上一级的作用域链。

对于changDa()中的环境：

它包含两个对象：：一为它自己的变量对象，二为全局变量对象。

即它不能访问daDa()函数的局部环境。

5

执行环境分两种：

一种为全局作用域，一种为局部作用域。

如何理解 try catch 延长了作用域链？

with语句和 try catch 都可以延长作用域链

with比较好理解，而且一般有性能问题，也不推荐用

try catch 是捕获Error对象的时候 会新开一个作用域吗？

还是说 catch的大括号内就是一个能访问到error对象的块级作用域？

try中的代码捕获到错误以后，会把异常对象推入一个可变对象并置于用域的头部，在catch代码块内部，函数的所有局部变量将会被放在第二个作用域对象中，catch中的代码执行完，会立即销毁当前作用域。

什么叫延长作用域链

执行环境（变量对象可谓是它的衍生物）、作用域、作用域链

作用域：函数当前执行环境。

作用域链：执行环境产生的变量对象构成。 作用域链是保证函数在执行时能够正确访问需要的变量和函数。

作用域链最外层就是全局作用域

var i = 0;
function dada(){
    console.log(i);
}
undefined
dada();
VM656:3 0
undefine

在函数中是没有存在i的，但是在调用这个函数时会返回为0，这是为什么呢？这就是函数作用域链的作用。

延长一： try catch

(function(window){
   try{
       throw Error("出错误了");
   }catch(e){
      alert(e);  //alert("Error: 出错误了")
   }
   console.log(e);  //undefind
})(window);

在执行catch语句块时，JavaScript自动把其执行环境添加作用域链中，但是该语句块执行完后又自动把该执行环境（变量对象）移除。

alert(e) ==  alert("Error:出现错误");
console.log(e)  ==  undefined;

IE结果：

alert(e)  =>  alert("Error: 出错误了");   

console.log(e) =>   
object Error: 
出错误了{description: "出错误了",message: "出错误了",name: "Error"}

延长二：with

function da(){
    console.log(location.href); 
} 

function da(){ 
    with(location){ 
        console.log(href); 
    } 
}

两种方式是等价的：

前提是非严格模式下， 因为严格模式下不支持 with这种方式。

延长作用域的表现

什么是作用域链？

我的理解就是，根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问。

想要知道js怎么链式查找，就得先了解js的执行环境。

每个函数运行时都会产生一个执行环境，而这个执行环境怎么表示呢？

js为每一个执行环境关联了一个变量对象。环境中定义的所有变量和函数都保存在这个对象中。

没有块级作用域：

if(true) {
 var da = "dada";
}
console.log(da);

function add(num1,num2){
    var num = num1 + num2;
    return num;
}
undefined
var result = add(1,2);
undefined
console.log(result);
VM962:1 3
undefined

向上查询：

var da = "dada";

function getDa(){
 var da = "dadada";
 return da;
}

console.log(getDa());

JavaScript中最常用的垃圾收集方式是标记清除，另一种不太常见的垃圾策略叫做引用计数。

The basic type value and reference types values:

Primitive values ​​occupy a fixed space in memory, stored in the stack memory, copy the value of the basic types of variables from one variable to another, this will create a copy of the value, the value of reference type objects stored in the heap memory .

Not an object contains a reference type variable values ​​actually contain itself, but a pointer to an object point.

typeof operator determines what kind of value is a primitive type, instanceof operator determines what kind of value is a reference type.

Execution Environment points:

Global execution environment, the function execution environment.

Each time you enter a new execution environment, will create a search scope chain for variables and functions.

❤️ Do not forget to leave your footprints learning [+ collection point Like Comments +]

Author Info:

[Author]: Jeskson
[original] Public number: Dada front-end bistro.
[Welfare]: No public reply "Information" self-study materials sent to spree (into the group to share what you want to say Ha, I did not see)!
[Reserved] Description: reproduced please indicate the source, thank you! ~

Large front-end development, front-end development positioning technology stack blog, PHP background knowledge, web full stack technology fields, data structures and algorithms, and so easy to understand network theory is presented to the junior partner. Thank you support, courtesy of love! ! !

---

If this number of local contents do not get bits (for example: to copyright or other problems), please contact us for rectification can be timely and will be processed in the first time.

---

Please thumbs up! Because you agree / encouragement is the greatest power of my writing!

Welcome attention to Dada 's CSDN!

This is a quality, attitude blog