JS中的预编译

JS中的预编译

JS代码执行过程

JS语言是一种单线程解释性语言。它是一门语言，它有它自己的执行机制。

JS代码执行过程分三个过程：

1. 首先，进行语法分析，语法分析就是浏览器先通栏浏览一下整体的代码有没有少写分号、单词拼错等语法的错误。
2. JS预编译。本质是创建AO对象或GO对象，对其属性的操作。
3. 最后一行一行的读取代码执行代码。

var关键字

var关键字

在ES6语法之前，有var关键字。var 声明语句声明一个变量，并可选地将其初始化为一个值。

当赋值给未声明的变量, 则执行赋值后, 该变量会被隐式地创建为全局变量（它将成为全局对象的属性）。

声明和未声明变量之间的差异是：

1. 声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的。
2. 声明变量在任何代码执行前创建，而非声明变量只有在执行赋值操作的时候才会被创建。
3. 声明变量是它所在上下文环境的不可配置属性，非声明变量是可配置的（如非声明变量可以被删除）。

变量提升

由于变量声明（以及其他声明）总是在任意代码执行之前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明。

new关键字

用new操作符创建对象时发生的事情：

（1）创建一个新对象；

（2）将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；

（3）执行构造函数中的代码（为这个新对象添加属性和方法）；

（4）返回新对象；

通过new操作符后跟构造函数的方式创建的对象（实例），这个对象有一个constructor（构造函数）属性，该属性指向构造函数。

this关键字

函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。

具体关于new关键字的this关键字的介绍可看我之前的博客this、return、new关键字的简单理解

例题：

function Foo() {
    getName = function () {
        console.log(1);
    };
    return this;
};
Foo.getName = function () {
    console.log(2);
};
Foo.prototype.getName = function () {
    console.log(3);
};
var getName = function () {
    console.log(4);
};
function getName() {
    console.log(5);
};

Foo.getName(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
new Foo.getName(); //2
new Foo().getName(); //3
new new Foo().getName(); //3

分析：

1.函数是一等公民

var getName = function () {
    console.log(4);
};
function getName() {
    console.log(5);
};

var关键字声明虽然在前，但是后面的函数声明会先执行，所以 5 会被 4 给覆盖掉。

2.this关键字谁调用指向谁

function Foo() {
    getName = function () {
        console.log(1);
    };
    return this;
};
Foo().getName();//Foo()执行时，return了this返回了本身，其中Foo函数内又有getName函数，于是，这个getName函数挂在了window上

3.new关键字与原型链

Foo.prototype.getName = function () {
    console.log(3);
};
new Foo.getName();//等价于new (Foo.getName())，Foo.getName是Foo的静态方法，这里的getName虽然是Foo的静态方法，但是既没有继承Foo的原型，自身内部也没提供任何构造器属性（this.name这样的），所以new这个静态方法只能得到一个空属性的实例。因此这里new的过程就相当于单纯把Foo.getName执行了一遍输出2，然后返回了一个空的实例
new Foo().getName();//这个语句可视为两步：第一步得到一个实例，this指向新建的对象;第二步调用实例对象原型上的getName方法。
new new Foo().getName(); //这个语句可视为三步：第一步得到一个实例，this指向新建的对象；第二步得到实例对象原型上的getName方法，但是它内部没有提供任何构造器属性；第三步所以new这个方法只能得到一个空属性的实例。但是Foo原型上有getName方法，不会报错会输出这个方法