JavaScript this 从此不再疑惑

1. 问题引入

function A() {}
A.prototype.fna = function() {
    console.log(this);
}

我的问题是 fna 的 this 是指向哪里的？

var a = new A();
a.fna();  // A {}

var fnt = a.fna;
fnt();  // window {...}

再看我们经常遇到的情形

function A() {
    this.name = 'A';
}

A.prototype.fna = function() {
    return this.name;
}

function sayName(fn) {
    console.log(fn());
}

var a = new A();
sayName(a.fna); //undefined
sayName(a.fna.bind(a));  //A

这里就是我们平时在写代码的时候为什么要调用 bind 函数来绑定上下文

function A() {
    this.fna = function() {
        console.log(this);
    }
}

A.prototype.getFna = function() {
    return this.fna;
}

function sayContext(fn) {
    fn();
}

var a = new A();
var fna = a.getFna();
sayContext(fna);  //window

为什么会有以上这种情况呢，在 java 中 this 是始终指向调用对象的。是的，始终指向调用对象，调用对象，这个很重要，java 的静态成员是没有 this 的概念的。在 javascript 中 this 只和函数的执行环境有关。只有三种情况，在浏览中 window、调用对象、严格模式下的undefined，对应我们开发者来说能接触到的就是以上三者，所以我们可以理解为 函数的执行环境就是以上三者。

2. 确定 this 指向

我们如何确定 this 的指向呢，有很多文章介绍 this 确定指向，方式也有很多种，而我是根据函数的调用形势去判断的，有以下两个判断标准。

1 如果函数的最终调用形式是 fn(); 那么在非严格模式下 this 指向 window 对象，在严格模式下指向 undefined
2 如果是通过对象调用 o.fn(); 这种形式 this 指向对象 o

是的就这两个标准，就这么简单。

3. 通过 call 、apply、bind 深入理解 this

函数调用原型

fn.call(thisArg, arg1, arg2, ...)
fn.apply(thisArg, [argsArray])
fn.bind(thisArg[, arg1[, arg2[, ...]]])

上面这三个函数都是用来改变函数的 this 指向的
1 call 第一个参数是 fn 中 this 的期望指向，值可以是 对象 或者 undefined，后面的参数是要传递 给 fn 的参数列表

2 apply 第一个参数是 fn 中 this 的期望指向，值可以是 对象 或者 undefined，后面的值是 fn 的 参数，是一个数组

call 和apply 功能相同，唯一不同的是选择将参数以 参数列表 传入或者以 数组 传入，都可以，可以互换
使用。调用者两个函数会立即执行 fn，这里是立即执行

3 bind 第一个参数是 fn 中 this 的期望指向，值可以是 对象 或者 undefined，后面的参数是要传递 给 fn 的参数列表

调用 bind 函数会返回一个函数，这个函数是 fn 的包装，和 fn 的唯一区别是绑定了 this，即 this指向明确。所以 bind 和 call、apply，的区别是 bind 返回一个 this 明确的新函数，call 和 apply立即执行了 fn。

到这里我想 javascript 的 this 已经说的很清楚了。