javascript基础--预编译、this指向

javascript预编译

预编译发生在函数执行前一刻，可以拆分成一下几步

1、生成Activation Object 即AO对象(执行期上下文)
2、查找形参和变量，并将其作为AO对象的属性，值为undefined
3、将实参的值赋给形参
4、在函数体内查找函数声明，并将值赋予函数体

看看下面的例子：

function fn(a) {
    console.log(a); // a => function a (){} 
    var a = 123; 

    function a () {}

    console.log(a) // a => 123

    var b = function () {}
    
    console.log(d) // undefined  
    
    if (false) {
         function d () {} // 只提升了变量声明，值未赋予函数体
    }

    var d = 456;

    console.log(d); // 456

    console.log(b); // functionn(){}
}

fn(1);

根据以下四步不难得出结果：

第一步 和 第二步：
AO {
    a: undefined,
    b: undefined,
    d: undefined
}

第三部：

AO {
    a: 1,
    b: undefined,
    d: undefined
}

第四步：

AO {
    a: function(){},
    b: undefined, // var b=function(){} 是函数表达式不是函数声明
    d: function(){}
}

特殊的情况

if(false){
    function test() {
        console.log(2)
    }
}

console.log(test) // undefined 

输出的值是undefined，而不是报错 test is not a function，这表示函数声明提升了，但值没有提升

this的指向

常用普通函数体中的this指向是谁调用指向谁，是在执行时确定，不调用就指向window

this.a = 20;
var test = {
    a: 40, 
    init: function() {
        console.log(this.a); // 40
    }
}
test.init(); // test 调用 init ，则init内部的this指向test

构造函数内部的this指向产生的实例

a = 1
function Test () {
    console.log(this.a);
}
Test.prototype.a = 2;
Test(); // window调用Test，this指向window  a=1
new Test(); // this指向实例对象 Test{}  a = 2 原型链上查找

ES6 箭头函数中的this指向是在定义时确定的，this为箭头函数所在的词法作用域的this（通俗好理解的说法：this指向包含箭头函数最近的函数中的this，若没有父级函数包裹，则指向this）

var tt = { // 对象字面量的花括号不是作用域
    name: 'jin',
    demo: () => {
        console.log(this) // 无函数包裹，指向window
        var say = () => {
            console.log(this);// demo的this指向为windown，所以此地的this也指向window
        }
        say();
    }
}

function Demo() {
    this.name = 'wen';
    var say = () => {
        console.log(this);
    }
    say();
}
Demo(); // Demo中的this为window，则say中的this为window
new Demo();// 实例化时Demo的指向为Demo实例，则say中的this指向Demo{}

call、apply、bind

call、apply、bind都可以改变this的指向
这里只讲下bind

window.a = 1;
function test() {
    console.log(this.a);
}

var obj = {
    a: 2
}

test(); // 1
test.bind(obj)() // 2   此种绑定方法称为硬绑定
test.bind(null) // 此为软绑定

值得注意的是ES6的函数写法使用bind的方式后，是不支持new的，会提示 is not a constructor,普通函数可以new，但会使绑定的this失效

this.a = 20;
var o = {
    foo: function() {
        console.log(111);
        console.log(this.a);
    },
    bar(){ // ES6的写法，包含箭头函数都有这个问题
        console.log(222);
    }
}

var f = o.foo.bind({a: 30});
new f(); // 111   undefined => new 对bind失效，导致this不为{a: 30}，而是foo{}
var b = o.bar.bind({});
new b(); // 报错 b is not a constructor

补充一个知识点，严格模式下也会控制this的指向

1. 严格模式下，在全局作用域中的this，指向window；

"use strict";
 
console.log("this === window",this === window); // true

2. 全局作用域中的函数中的this为undefined

"use strict";
function f1(){
console.log(this); // undefined
}

function demo() { // 'use strict' 写在函数内部，与写在全局作用一样
        'use strict';
        console.log(this); // undefined
  }

3. 对于构造函数中的this，指向实例自身

function demo() {
        'use strict';
        console.log(this) // demo{}
    }
    new demo();

4. 'use strict’写在函数外（非全局），不影响函数中的this

function demo1() {
        console.log(this); // window
    }

    (function(){
        'use strict';
        demo1();
    })();