深刻理解javascript系列(十一):this

曾经我觉得我掌握了this，直到不断学习，才发现真是个无知...

在前面的系列中咱们已经知道，当函数被调用执行时，变量对象会生成，这个这时候，this的指向会被肯定。所以咱们首先要牢记一个很是重要的结论，当前函数的this是在函数被调用执行的时候才肯定的。若是当前的执行上下文处于函数调用栈的栈顶，那么这个时候变量对象会变成活动对象，同时this的指向确认。

正是因为这个缘由，才致使一个函数内部的this到底指向谁是很是灵活且不肯定的，这也是this难以被真正理解的缘由所在。例如，下面的例子，同一个函数因为调用的方式不一样，它内部的this指向了不一样的对象。

var a = 10;
var obj = {
    a: 20
}
function fn() {
    console.log(this.a);
}
fn();        //10
fn.call(obj);//20复制代码

经过a值的不一样表现，咱们能够知道this分别指向了window与obj。

接下来，咱们一步步来分析this中的具体表现。

1.  全局对象中的this

在以前变量对象的笔记中曾提到过，全局对象的变量对象是一个比较特殊的存在。在全局对象中，this指向它自己，所以相对简单，没有那么多复杂的状况须要考虑。

//经过this绑定到全局对象
this.a1 = 20;

//经过声明绑定到变量对象，但在全局环境中，变量对象就是它自己
var a2 = 10;

//仅仅只有赋值操做，标识符会隐式绑定全局对象
a3 = 30;
复制代码

2.  函数中的this

在一开始的例子中，同一个函数中的this因为调用方式不一样致使this指向不一样，所以，this最终指向谁，与调用该函数的方式息息相关。

在一个函数的执行上下文中，this由该函数的调用者提供，由调用函数的方式来决定其指向。

function fn() {
    console.log(this);
}
fn(); //fn为调用者复制代码

若是调用者被某一个对象所拥有，那么在调用该函数时，内部的this指向该对象。若是调用者函数独立调用，那么该函数内部的this则指向undefined。可是在非严格模式中，当this指向undefined时，他会自动指向全局对象。

//为了可以准确判断，咱们在函数内部使用严格模式
//由于非严格模式会自动指向全局

function fn() {
    'use strict';
    console.log(this);
}

fn();  //fn是调用者，独立调用，this为undefined
window.fn();    //fn是调用者，被window所拥有，this为window对象复制代码

函数是独立调用，仍是被某个对象所拥有，是很是容易辨认的。综合上面的结论，下面结合一些简单的例子来分析。

//demo01
var a = 20;
var obj = {
    a: 40
}
function fn() {
    console.log('fn this: ',this);

    function foo() {
        console.log(this.a)
    }
    foo();
}

fn.call(obj);
fn();复制代码

算了，不写了..................................................

越写下去，发现本身记录的这些，还不如'饥人谷方应杭'说的一句话：this 就是 call 的第一个参数！call 的其余参数统称为 arguments。

当你明白了方方说的，call/apply/bind都不是问题了...

这些都是我以往的学习笔记。若是您看到此笔记，但愿您能指出个人错误。有这么一个群，里面的小伙伴互相监督，坚持天天输出本身的学习心得，不输出就出局。但愿您能加入，咱们一块儿终身学习。欢迎添加个人我的微信号：Pan1005919589