javascript语法难点问题

Javascript的变量
javascript语言和java语言一样变量是分为两种类型：基本数据类型和引用类型。

基本类型是指：Undefined、Null、Boolean、Number和String；
引用类型是指：多个值构成的对象，所以javascript的对象指的是引用类型。

1. var str = "sharpxiajun";
2. str.attr01 = "hello world";
3. console.log(str);// 运行结果：sharpxiajun
4. console.log(str.attr01);// 运行结果：undefined

注意：无法为基本类型指定属性和方法~
Javascript里的基本变量是存放在栈区的（栈区指内存里的栈内存），它的存储结构如下图所示：

Alt text

javascript里引用变量的存储就比基本类型存储要复杂多，引用类型的存储需要内存的栈区和堆区（堆区是指内存里的堆内存）共同完成，如下图所示：

Alt text

在javascript语言里变量定义没有使用var，则变量必须要有赋值操作，只有赋值操作的变量是赋予给window，这其实是javascript语言设计者提升javascript安全性的一个做法。

Alt text

复制变量的值和函数传递参数
基本类型变量的赋值

Alt text

引用类型变量赋值

Alt text

函数传参

Alt text

实参与形参遵循基本类型变量赋值与引用类型变量赋值的规则，即 基本类型 传的是值， 引用类型对象传递的是引用即变量的一个别名，指向同一块堆区，下面是详细解释：
在javascript里变量的存储包含三个部分： 　　
部分一：栈区的变量标示符； 　　
部分二：栈区变量的值； 　　
部分三：堆区存储的对象。

Alt text

Alt text

在javascript里变量的复制（函数传参也是变量赋值）本质是传值，这个值就是栈区的值，而基本类型的内容是存放在栈区的值里，所以复制基本变量后，两个变量是独立的互不影响，但是当复制的是引用类型时候，复制操作还是复制栈区的值，但是这个时候值是堆区对象的地址，因为javascript语言是不允许操作堆内存，因此堆内存的变量并没有被复制，所以复制引用对象复制的值就是堆内存的地址，而复制双方的两个变量使用的对象是相同的，因此复制的变量其中一个修改了对象，另一个变量也会受到影响。

函数执行会将参数存在栈区，变量名 与 实参传递过来的值， 当我们在函数中为参数进行赋值，只是改变了参数在栈区的值，实参并不会收到影响，如下图所示：

Alt text

作用域链相关的问题
讲作用域链首先要从作用域讲起，下面是百度百科里对作用域的定义：
作用域在许多程序设计语言中非常重要。通常来说，一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突。

在javascript里作用域有一个专门的定义execution context，有的书里把这个名字翻译成执行上下文，有的书籍里把它翻译成执行环境，我更倾向于后者执行环境，下文我提到的执行环境就是execution context。这个命名非常形象，这个形象体现在execution这个单词，execution含义就是执行，我们来想想javascript里那些情况是执行：
当页面加载时候在script标签下的javascript代码会按顺序执行，而这些能被执行的代码都是属于window的变量或函数；
当函数的名字后面加上小括号()，例如ftn()，这也是在执行，不过它执行的是函数。

如此说来，javascript里的执行环境有两类一类是全局执行环境，即window代表的全局环境，一类是函数代表的函数执行环境，这也就是我们常说的局部作用域。

执行环境在javascript语言里并非是一个抽象的概念，而是有具体的实现，这个实现其实是个对象，这个对象也有个名字叫做variable object，这个变量有的书里翻译为变量对象，这是直译，有的书里把它称为上下文变量，这里我还是倾向于后者上下文变量，下文里提到的上下文变量就是指代variable object。上下文变量存储的是上下文变量所处执行环境里定义的所有的变量和函数。

全局执行环境的上下文变量是可以访问到的，它就是window对象，所以我们说window能代表全局作用域是有道理的，但是局部作用域即函数的执行环境里的上下文变量是代码不能访问到的，不过javascript引擎在处理数据时候会使用到它。

在javascript语言里还有一个概念，它的名字叫做execution context stack，翻译成中文就是执行环境栈，每个要被执行的函数都会先把函数的执行环境压入到执行环境栈里，函数执行完毕后，这个函数的执行环境就会被执行环境栈弹出，例如上面的例子：函数执行时候函数的执行环境会被压入到执行环境栈里，函数执行完毕，执行环境栈会把这个环境弹出，执行环境栈的控制权就会交由全局环境，如果函数后面还有代码，那么代码就是接着执行。如果函数里嵌套了函数，那么嵌套函数执行完毕后，执行环境栈的控制权就交由了外部函数，然后依次类推，最后就是全局执行环境了。

讲到这里我们大名鼎鼎的作用域链要登场了，函数的执行环境被压入到执行环境栈里后，函数就要执行了，函数执行的第一步不是执行函数里的第一行代码而是在上下文变量里构造一个作用域链，作用域链的英文名字叫做scope chain，作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，这个概念里有两个关键意思：有权访问和有序，我们看看下面的代码：

Alt text

这个例子我们发现，ftn2函数可以访问变量b1，b2，这个体现了有权访问的概念，当ftn1作用域里改变了b1的值并且把b1变量重新定义为ftn1的局部变量，那么ftn2访问到的b1就是ftn1的，ftn2访问到b1后就不会在全局作用域里查找b1了，这个体现了有序性。

作用域链的相关问题，这个标题定义的含义是指作用域链是大名鼎鼎了，但是作用域链在广大程序员的理解里其实包含的意义已经超越了作用域链在javascript语言本身的定义。广大程序员对作用域链的理解有两块一块是作用域，而作用域在javascript语言里指的是执行环境execution context，执行环境在javascript引擎里是通过上下文变量体现的variable object，javascript引擎里还有一个概念就是执行环境栈execution context stack，当某一个函数的执行环境压入到了执行环境栈里，这个时候就会在上下文变量里构造一个对象，这个对象就是作用域链scope chain，而这个作用域链就是广大程序员理解的第二块知识，作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

this指针构造是和作用域链同时发生的，也就是说在上文变量构建作用域链的同时还会构造一个this对象，this对象也是属于上下文变量，而this变量的值就是当前执行环境外部的上下文变量的一份拷贝，这个拷贝里是没有作用域链变量

就上一个例子我们看一下chrome控制台的情况：

Alt text

这是ftn2执行时的作用域链 local(ftn2) -> closure(ftn1) -> global(window)

Alt text

这是ftn1执行时的作用域链
最外层栈为一个anonymous function(匿名函数)

this、new、call和apply的相关问题
在面向对象编程里有两个重要的概念：一个是类，一个是实例化的对象，类是一个抽象的概念，用个形象的比喻表述的话，类就像一个模具，而实例化对象就是通过这个模具制造出来的产品，实例化对象才是我们需要的实实在在的东西，类和实例化对象有着很密切的关系，但是在使用上类的功能是绝对不能取代实例化对象，就像模具和模具制造的产品的关系，二者的用途是不相同的。

其实javascript里的this指针逻辑上的概念也是实例化对象，这一点和java语言里的this指针是一致的，但是javascript里的this指针却比java里的this难以理解的多，有三个原因：

原因一：javascript是一个函数编程语言，怪就怪在它也有this指针，说明这个函数编程语言也是面向对象的语言，说的具体点，javascript里的函数是一个高阶函数，编程语言里的高阶函数是可以作为对象传递的，同时javascript里的函数还有可以作为构造函数，这个构造函数可以创建实例化对象，结果导致方法执行时候this指针的指向会不断发生变化，很难控制。

原因二：javascript里的全局作用域对this指针有很大的影响，由上面java的例子我们看到，this指针只有在使用new操作符后才会生效，但是javascript里的this在没有进行new操作也会生效，这时候this往往会指向全局对象window。

原因三：javascript里call和apply操作符可以随意改变this指向，这看起来很灵活，但是这种不合常理的做法破坏了我们理解this指针的本意，同时也让写代码时候很难理解this的真正指向.

在javascript语言里全局作用域可以理解为window对象，记住window是对象而不是类，也就是说window是被实例化的类，这个实例化的过程是在页面加载时候由javascript引擎完成的，整个页面里的要素都被浓缩到这个window对象，因为程序员无法通过编程语言来控制和操作这个实例化过程，所以开发时候我们就没有构建这个this指针的感觉，常常会忽视它，这就是干扰我们在代码里理解this指针指向window的情形。

Alt text

下面为Person的构造函数

1.<script type="text/javascript">
2. function Person(name,sex,age,job){
3.   this.name = name;
4.   this.sex = sex;
5.   this.age = age;
6.   this.job = job;
7.   this.showPerson = function(){
8.   console.log("姓名:" + this.name);
9.   console.log("性别:" + this.sex);
10.   console.log("年龄:" + this.age);
11.   console.log("工作:" + this.job);
12.   console.log(this);// Person { name="马云", sex="男", age=46, 更多...}
13.   }
14. }
15. var person = new Person("马云", "男", 46, "董事长");
16. person.showPerson();
17.</script>

看this指针的打印，类变成了Person，这表明function Person就是相当于在定义一个类，在javascript里function的意义实在太多，function既是函数又可以表示对象，function是函数时候还能当做构造函数，javascript的构造函数我常认为是把类和构造函数合二为一，当然在javascript语言规范里是没有类的概念，但是我这种理解可以作为构造函数和普通函数的一个区别，这样理解起来会更加容易些。

《javascript高级编程》里对new操作符的解释：
new操作符会让构造函数产生如下变化：

1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象

Call和apply是改变函数的作用域（有些书里叫做改变函数的上下文） 　
这个说明我们参见上面new操作符第二条： 　　
将构造函数的作用域赋给新对象（因此this就指向了这个新对象）； 　　
Call和apply是将this指针指向方法的第一个参数。

表面原因就是我们定义对象使用对象的字面表示法，字面表示法在简单的表示里我们很容易知道this指向对象本身，但是这个对象会有方法，方法的参数可能会是函数，而这个函数的定义里也可能会使用this指针，如果传入的函数没有被实例化过和被实例化过，this的指向是不同，有时我们还想在传入函数里通过this指向外部函数或者指向被定义对象本身，这些乱七八糟的情况使用交织在一起导致this变得很复杂，结果就变得糊里糊涂。
　　其实理清上面情况也是有迹可循的，就以定义对象里的方法里传入函数为例：
　　情形一：传入的参数是函数的别名，那么函数的this就是指向window；
　　情形二：传入的参数是被new过的构造函数，那么this就是指向实例化的对象本身；
　　情形三：如果我们想把被传入的函数对象里this的指针指向外部字面量定义的对象，那么我们就是用apply和call
例子如下:

Alt text