知识积累

Javascript基础

变量和类型

1.变量

js的变量，说白了就相当于是一个存储数据的‘容器’。我们在定义变量的时候需要注意一下几点：

• 变量名大小对大小写字母敏感；
• 变量名须以字母开头（也能以 $ 和 _ 符号开头，但是不建议）；

2.类型

js规定的数据类型有八种：Boolean, String, Number, Null, Undefined, bigInt, Symbol, Object

基本类型有六种： Boolean, String, Number, Null, Undefined,Symbol
引用数据类型有一种： Object(在JS中除了基本数据类型以外的都是对象，Data, function, Array,正则表达式都是对象)
注意：Symbol 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。

拓展： 关于null和undefined的区别和相似之处。于null和undefined在一定程度上及其相似，但是又有着细微的区别。

null表示的是‘没有对象’，即该处不应该有值。（也可以这样理解，null是已经定义但是值为空，分配内存）；

• 作为函数的参数，表示该函数的参数不是对象。
• 作为对象原型链的终点。

undefined表示“未定义”，一个特殊值，通常用于指示变量尚未赋值，其值就为undefined。

• 变量被声明了，但没有赋值时，就等于undefined(较为常见)。
• 调用函数时，应该提供的参数没有提供，该参数等于undefined。
• 对象没有赋值的属性，该属性的值为undefined。
• 函数没有返回值时，默认返回undefined。

原型和原型链

说到原型和原型链，不免得说一下构造函数。

构造函数是一种特殊的方法。主要用来在创建对象时初始化对象。每个构造函数都有prototype(原型)属性。构造函数的出现是为了解决使用Object构造函数和字面量表示法不方便创建大量重复对象的问题。看个例子：

function func(name){
this.name=name;
this.sayHello=function(){
  alert(‘my name is ‘+this.name);
}
}
var f=new func(‘phoebe‘);
f.sayHello();
复制代码

此处的f是func实例化之后的一个构造函数，new是用来实例化函数的一种手段。而func的构造函数实际上是js内置的function，实际上function func(name){}等价于var func = function (name){}。到这里相信你大概已经明白了何为构造函数。

知晓了构造函数的概念之后，我们来探讨一下原型和原型链。

1.原型

• prototype

每个构造函数在创建时都会自动创建一个prototype属性，我们可以在这个属性当中添加新的属性和方法，添加的属性和方法可以为这个函数所使用。将这个函数实例化后的实例也可以使用新添加的属性和方法。这个prototype属性指向的对象，包括自带的属性和我们添加的属性、方法，可以把它指向的对象的内容集合称为构造函数的原型。

注意prototype是构造函数才有的属性。

• __ proto __

__proto__是每个对象自带的属性，属性值是当前实例所属类的原型(prototype)，原型对象中有一个属性constructor, 它指向函数对象。

举了例子：

  function Example() {}
  var ExampleOne = new Example()
  console.log(ExampleOne.__proto__ === Example.prototype) // true
  console.log(Example.prototype.constructor===Example) // true
  // ExampleOne是个实例对象，带有的是__proto__属性，Example是个构造函数，带的是prototype属性
复制代码

图解：

• constructor

每个函数都会有一个原型对象，该原型对象有一个constructor属性，会指向创建对象的函数本身。此外，所有的实例对象都可以访问onstructor属性，constructor属性是创建实例对象的函数的引用。

2.原型链

一般，每个对象都会有一个原型__proto__，这个原型也有它自己的原型，将这些原型连接起来，形成一个原型链。在查找某一特定属性时，会先去这个对象里去找，如果对象上没有的话就会去它的原型对象里面去，单还是没有的话，会再去向原型对象的原型对象里去寻找。 这个寻找的操作被委托在整个原型链上，我们称之为原型链。

图解：

举个例子：

function Example(){}
var ExampleOne = new Example(); //new实例化
console.log(ExampleOne.__proto__ === Example.prototype); // true
console.log(Example.prototype.__proto__ === Object.prototype) //true
console.log(Object.prototype.__proto__) //null

Example.__proto__ == Function.prototype; //true
console.log(Function.prototype)// function(){} (这是个空函数)

var number = new Array()
console.log(number.__proto__ == Array.prototype) // true
console.log( Array.prototype.__proto__ == Object.prototype) // true
console.log(Array.prototype) // [] (这是个空数组)
console.log(Object.prototype.__proto__) //null

console.log(Array.__proto__ == Function.prototype)// true
复制代码

小结:

1. __proto__是对象的属性，prototype是构造函数的属性，__proto__总指向prototype;
2. prototype在构造函数创建时会自动生成，它总会被__proto__指向。

作用域和闭包

1.作用域

我们先来说一下变量的作用域。变量的作用域一般分为两种：全局作用域和局部作用域。

全局作用域：函数最外层定义的变量，任何函数内部都可以访问到。

例如

var a = ‘1‘;
function change() {
    console.log(a)
};
change()  // 1
复制代码

局部作用域： 和全局作用域不同，局部作用域只能允许自身内部调用变量，外部函数无法访问。

例如：

function num() {
  var b=‘2‘
};
num();
console.log(b) // b is not defined
复制代码

需要注意的是，在函数内部声明一个变量的时候，一定要记住得用var定义，不然相当于声明了一个全局变量。

例如:

function change() {
    num=2;
}
change();
console.log(num) // 2
复制代码

需要注意的是，函数内部存在的变量提升问题。

我们先看下面例子：

var num1 = 1;
function one() {
    console.log(num1);  // undefined
    var num1 = 2;
    console.log(num1) // 2
}
复制代码

其实上面的例子等价于：

var num1 = 1;
function one() {
  var num1
  console.log(num1);  // undefined
  num1 = 2;
  console.log(num1) // 2
}
复制代码

不难看出，这是存在在函数内部变量提升的现象。

或许对概念不清晰的童鞋对于第一个例子会有点疑惑，认为第一个打印出来的应该是1，而不是undefined（寄拖鞋警告一次）。

为什么呢？其实one()函数内部声明了num1，one()此时就是一个局部作用域，在内部没有声明num1的情况下，是会直接获取全局变量num1。

但是在局部作用域声明了num1之后，num1这个变量会提升。如第一个例子，当第一次console.log(num1)的时候，就相当于var num1，定义了一个变量但没有赋值，第二次打印，会打印出赋值之后的num1，就像上面的第二个例子。

拓展：在这里，想拓展一下几种常见的声明变量的方式。

• var ：如果在当前函数内部声明一个变量，则作用范围在函数内部；如果在最外层声明，则作为全局变量；如果未使用var定义直接使用变量，则会报错；
• const：具有块级作用域的特征，同一个作用域中，变量名只能声明一次，不存在变量提升。const声明的变量必须是个常量。
• let： 跟const几乎类似，但是最主要的区别是let声明的是一个变量，const声明的必须是个常量。

不同之处：

*var存在变量提升，let和const不会；

• var在函数内部同一个变量可以重复声明，而在同一个块级作用域内部，let和const只能声明一次，并且const声明的是个常量，不能修改；
• var 声明的变量属于函数作用域，let 和 const 声明的变量属于块级作用域

2.闭包

简单的说，闭包有两个作用：一就是能够读取其他函数内部变量的函数（也就是读取自身函数以外的变量）。二是让这些外部变量始终保存在内存中。

闭包可以避免使用全局变量，防止变量污染，但是过多使用会造成内存泄露。

举个例子，我想要获取一个函数内部的变量：

var num = 200;
function f1() {
    var num = 100;
    return a
};
f1() // 100
var fn = f1(); 
fn() // fn is not a function
复制代码

这显然是不行的，fn获取不到f1内部的变量。这时候我们可以考虑在f1内部返回一个函数看看结果：

var num = 200;
function f1() {
    var num = 100;
    return function () {
        return num
    }
};
var fn = f1(); 
fn() // 100
复制代码

通过在函数内部返回一个函数，外部函数可以根据返回的函数获取到原来函数内部的变量，这就体现了闭包的作用。

想研究的更透彻欢迎猛戳：

developer.mozilla.org/zh-CN/docs/…

执行机制

javascipt是单线程的描述性脚本语言，与java或C#等编译性语言不同,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。所以，弄懂它的执行机制是很有必要的。

由于javascript是单线程的，为了防止在网页加载过程中由于图片音乐等过大文件而导致加载阻塞，从而衍生出了‘同步任务’和‘异步任务’。我们可以先看一下如下流程图：

通过上图可以较为清晰的看到任务执行的流程。

在同步任务和异步任务之外，执行任务的时候还定义了‘宏观任务’和‘微观任务’两种。一般来说：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval；
micro-task(微任务)：Promise，process.nextTick；

任务一开始执行的时候，会进入到相应的Event Queue当中。事件循环的顺序，决定js代码的执行顺序。进入整体代码(宏任务)后，开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始，找到其中一个任务队列执行完毕，再执行所有的微任务。

虽然说js是单线程的，但是并不是简单意义上的就是按顺序往下执行。通过以上所讲的这些执行顺序，相信你们应该在心里有个大概的思路了（拖鞋警告二）。看个例子（网上搜的，就得解释的可以就拿过来了）：

console.log(‘1‘);
 
setTimeout(function() {
    console.log(‘2‘);
    process.nextTick(function() {
        console.log(‘3‘);
    })
    new Promise(function(resolve) {
        console.log(‘4‘);
        resolve();
    }).then(function() {
        console.log(‘5‘)
    })
})
process.nextTick(function() {
    console.log(‘6‘);
})
new Promise(function(resolve) {
    console.log(‘7‘);
    resolve();
}).then(function() {
    console.log(‘8‘)
})
 
setTimeout(function() {
    console.log(‘9‘);
    process.nextTick(function() {
        console.log(‘10‘);
    })
    new Promise(function(resolve) {
        console.log(‘11‘);
        resolve();
    }).then(function() {
        console.log(‘12‘)
    })

复制代码
最终输出的顺序是：1，7，6，8，2，4，3，5，9，11，10，12。

有没有跟你所预想的一样？如果是，那么恭喜这位童鞋，你已经大致掌握了js的执行机制了。如果不是，那就往下瞅瞅。

第一轮事件循环流程分析如下：

整体script作为第一个宏任务进入主线程，遇到console.log，输出1。

遇到setTimeout，其回调函数被分发到宏任务Event Queue中。我们暂且记为setTimeout1。

遇到process.nextTick()，其回调函数被分发到微任务Event Queue中。我们记为process1。

遇到Promise，new Promise直接执行，输出7。then被分发到微任务Event Queue中。我们记为then1。

又遇到了setTimeout，其回调函数被分发到宏任务Event Queue中，我们记为setTimeout2。

上表是第一轮事件循环宏任务结束时各Event Queue的情况，此时已经输出了1和7。

我们发现了process1和then1两个微任务。

执行process1,输出6。

执行then1，输出8。

第一轮事件循环正式结束，这一轮的结果是输出1，7，6，8。那么第二轮时间循环从setTimeout1宏任务开始：

首先输出2。

接下来遇到了process.nextTick()，同样将其分发到微任务Event Queue中，记为process2。new Promise立即执行输出4，then也分发到微任务Event Queue中，记为then2。

第二轮事件循环宏任务结束，我们发现有process2和then2两个微任务可以执行。

输出3。

输出5。

第二轮事件循环结束，第二轮输出2，4，3，5。

第三轮事件循环开始，此时只剩setTimeout2了，执行。

直接输出9。

将process.nextTick()分发到微任务Event Queue中。记为process3。

直接执行new Promise，输出11。

将then分发到微任务Event Queue中，记为then3。

第三轮事件循环宏任务执行结束，执行两个微任务process3和then3。

输出10。

输出12。

第三轮事件循环结束，第三轮输出9，11，10，12。

最终整段代码，共进行了三次事件循环，完整的输出为1，7，6，8，2，4，3，5，9，11，10，12。

(需要注意的是，node环境下的事件监听依赖libuv与前端环境不完全相同，输出顺序可能会有误差)

最后补充一点，谨记javascript是一门单线程语言，而Event Loop是javascript的执行机制。