js 基础知识整理

[ZSI2017]

总结一些js 基础相关知识点，收集网上分析透彻的文章，希望通过整理的文章，对JavaScript有一个全面深刻的认识。当然，这些基础，也是面试过程中非常容易被问到的，有空拿出了回味一下，也许会有意想不到的效果。

以下知识点分类，许多都有共同交叉的地方，尽量全部都通读一遍，才能更加深入理解

变量类型与函数中的参数传递

ECMAScript的变量是松散类型的，所谓松散类型就是可以用来保存任何类型的数据。定义变量时使用var关键字。5种基本数据类型：Undefined,Null,Boolean,Number和String,3中引用类型：Array,Function,和Object,严格意义上说，三种都可以归纳为对象

正因为JavaScript的松散类型，参数传递也变得复杂，但是都可以看成按值传递，分别细分为传递的是变量本身还是引用，这里和变量类型一起讲解，可以加深对js中变量类型的理解。

• 图解JavaScript的参数传递

this

在面向对象编程中，this的指向非常重要，从一个角度上看，它的值取决于调用的模式.this到对象的绑定，发生在函数被调用的时候，称为 延迟绑定。有一种通俗的解释，谁调用它，this就指向谁。

• 函数的四种调用模式

作用域

作用域（scope）可以理解为不同变量和函数的访问范围，JavaScript 中全局作用域 ，局部作用域,在不同场景下生成不同的作用域，可以理解为函数外部的为全局作用域，函数内部的为局部作用域。

提及到了闭包的概念，内层函数能够访问外层函数的变量，形成了闭包，可以用来实现每个模块都有属于自己的作用域，不互相影响，间接实现了私用变量（private varibale）

虽然都提倡尽可能延迟声明变量，但JavaScript中缺少块级作用域，所以尽量在函数体顶部声明即将用到的所有变量

• Understanding Scope in JavaScript
• 《JavaScript 闯关记》之作用域和闭包

执行上下文

JavaScript 中 上下文（context）指的是this的值，而执行上下文（execution context)涉及到作用域的概念而不是上下文，JS 单线程语言，每次只能一个任务。刚开始执行上下文中默认会添加进去全局，遇到每个函数都会创造一个属于自己的执行上下文。

执行上下文的代码被分为两个基本的阶段来处理：
进入执行上下文 和 执行代码

执行上下文与变量关系密切。
变量自己应该知道它的数据存储在哪里，并且知道如何访问，这种机制称为变量对象（variable object）

变量对象(缩写为（VO）)是一个与执行上下文相关的特殊对象，它存储着在上下文中声明的以下内容（详细解释看看下面的第一篇文章）：
1,函数的形参，2,函数声明（FunctionDeclaration,缩写为FD），3,变量声明（var,变量声明）
全局上下文中的变量对象就是全局对象自己，函数上下文中变量对象是不能直接访问的，由活动对象（activeation object，缩写为AO）扮演VO的角色
在全局上下文中，

  global = {
      Math:<...>,
     String:<...>,
     ...
     window:global   // 引用自身
}

在函数上下文中，

   AO= {
      arguments:<Argo>
 }

在进入执行上下文，涉及到变量声明和函数声明的问题。在变量声明时，如果变量名称跟已经声明的形式参数或函数相同，则声明不会干扰已经存在的这类属性，相反的，函数声明创建时，如果变量对象已经存在相同名称的属性，则完全替换这个属性。
从此可以看出函数声明提升的优先级要高于变量声明提升。

• 深入理解JavaScript系列（12）：变量对象（Variable Object）
• 前端基础进阶：详细图解 JavaScript 执行上下文

call，apply and bind

包括了 三种方法的应用场景，每种方法对改变函数内部的this上下文指向和传递给函数参数的方式不同。

• 深入浅出妙用 Javascript 中 apply、call、bind
• call,apply and bind in JavaScript

js 异步 回调操作

setTimeout配合 Promise 完美的封装异步操作，在循环的setTimeou 回调中，如何利用闭包传递变量.理解JavaScript中堆栈中任务优先执行，消息队列中的任务等待同步任务执行完成后才开始执行。

围绕setTimeout的面试题，同时可以考察对变量作用域，闭包，IIFE，异步队列任务，js执行顺序，单线程等，所以下面列出了面试题为主的文章

• JavaScript：彻底理解同步、异步和事件循环
• 并发模型与事件循环
• 破解前端面试（80% 应聘者不及格系列）：从 闭包说起
• JavaScript同步、异步、回调执行顺序之经典闭包setTimeout面试题分析

prototype、_proto_、原型链

"prototype“属性值是一个对象，它用来实现继承和共享属性，对象__proto__属性的值就是它所对应的原型对象。

最原始的几个对象：
Object.prototype是JavaScript中原始对象，所以Object.prototype.__proto__为null。为了构建各种类型的函数，产生了另一个原始对象Function.prototype。
所以object,Function,String,Number,Boolen',Array等等的__proto__都是 Function.prototype。
通过instanceof验证下 Array instanceof Function 为 true.
知乎上有一张图，非常生动描述了上面的关系；

每个JS对象一定对应一个原型对象，并从原型对象继承属性和方法
判断的时候，通常会用到instanceof运算符，来测试一个对象在其原型链中是否存在一个构造函数的prototype属性

Object instanceof Object // logs true

Function构造函数本身也算是Function类型的实例吗？
Function.__proto__===Function.prototype // logs true

...

• 从探究Function._proto_===Function.prototype过程中的一些收获
• Prototype 与 _Proto_ 的爱恨情仇
• 从__proto__和prototype来深入理解JS对象和原型链
• Master JavaScript Prototypes & Inheritance

练习题

看完上面的概念，基本对JavaScript有了大致掌握，下面可以通过几道题目，考察下情况。

• 《你真懂JavaScript吗？》答案详解
• 六道js题目