JS基础知识 —— this

接下来要总结的是this，学过JS的都知道this都知道它的重要性。

前面也放过这张图了，这是执行上下文的生命周期。再来瞧瞧，这次的主角轮到this了。

一个很重要结论：this指向，是在函数被调用的时候确定的。也就是执行上下文被创建时被确定的。

先来个例子压压惊：同一个函数由于调用的方式不同，this指向了不一样的对象。

var a = 10;
var obj = {
    a: 20
}

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

fn(); // 10
fn.call(obj); // 20

除此之外，在函数执行过程中，this一旦被确定，就不可更改了。

var a = 10;
var obj = {
    a: 20
}

function fn () {
    this = obj; // 这句话试图修改this，运行后会报错
    console.log(this.a);
}

fn();

一、全局对象中的this

全局对象的this，是一个比较特殊的存在。全局对象中的this，指向它本身，也就是window。

// 通过this绑定到全局对象
this.a2 = 20;

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

// 仅仅只有赋值操作，标识符会隐式绑定到全局对象
a3 = 30;

二、函数中的this

在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。如果调用的函数，被某一个对象所拥有，那么该函数在调用时，内部的this的值指向该对象。如果函数独立调用，那么该函数内部的this，则指向undefined。在非严格模式中，当this指向undefined时，它会自动指向全局对象（window）。

// demo01
var a = 20;
function fn() {
    console.log(this.a);
}
fn();// 20

// demo02
var a = 20;
function fn() {
    function foo() {
        console.log(this.a);
    }
    foo();
}
fn();// 20

// demo03
var a = 20;
var obj = {
    a: 10,
    c: this.a + 20,
    fn: function () {
        return this.a + 20;
    }
}

console.log(obj.c);// 40
console.log(obj.fn());// 30

这里需要注意的地方是：单独的{}是不会形成新的作用域，由于没有别的作用域的限制，所以还是处于全局作用域。这里的this还是表示全局对象（即window对象），this.a的值为20。

函数中的this，要准确确定this的指向，找到函数的调用者以及区分它是否独立调用就变得十分关键。

看下面的一个例子

// 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局
function fn() {
    'use strict';
    console.log(this);
}

fn();  // fn是调用者，独立调用
window.fn();  // fn是调用者，被window所拥有

上面的例子，fn()作为独立的调用者，this的指向是undefined；而window.fn()则被window所拥有，所以this的指向是window。

很特别的一个例子

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

function active(fn) {
    fn(); // 真实调用者，为独立调用
}

var a = 20;
var obj = {
    a: 10,
    getA: foo
}

active(obj.getA);

三、使用call，apply和bind显式指定this

JS提供的可以手动设置this的指向的方法。所有函数都具有两个方法。

function fn() {
    console.log(this.a);
}
var obj = {
    a: 20
}

fn.call(obj);// 20

function fn(num1, num2) {
    console.log(this.a + num1 + num2);
}
var obj = {
    a: 20
}

fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50

// 将类数组对象转化为数组

function exam() {

    // 先看看函数的自带属性 arguments 什么是样子的
    console.log(arguments);

    // 使用call/apply将arguments转换为数组, 返回结果为数组，arguments自身不会改变
    var arg = [].slice.call(arguments);

    console.log(arg);
}

exam(2, 8, 9, 10, 3);

// result:
// { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }
// [ 2, 8, 9, 10, 3 ]
//
// 也常常使用该方法将DOM中的nodelist转换为数组
// [].slice.call( document.getElementsByTagName('li') );

// 根据自己的需要灵活修改this指向

var foo = {
    name: 'joker',
    showName: function() {
      console.log(this.name);
    }
}

var bar = {
    name: 'rose'
}

foo.showName.call(bar);

// 实现继承

// 定义父级的构造函数
var Person = function(name, age) {
    this.name = name;
    this.age  = age;
    this.gender = ['man', 'woman'];
}

// 定义子类的构造函数
var Student = function(name, age, high) {

    // use call
    Person.call(this, name, age);
    this.high = high;
}
Student.prototype.message = function() {
    console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');
}

new Student('xiaom', 12, '150cm').message();

// result
// ----------
// name:xiaom, age:12, high:150cm, gender:man;

// 在向其他执行上下文的传递中，确保this的指向保持不变

// one
var obj = {
    a: 20,
    getA: function() {
        var self = this;
        setTimeout(function() {
            console.log(self.a)
        }, 1000)
    }
}

// two
function bind(fn, obj) {
    return function() {
        return fn.apply(obj, arguments);
    }
}

var obj = {
    a: 20,
    getA: function() {
        setTimeout(bind(function() {
            console.log(this.a)
        }, this), 1000)
    }
}

obj.getA();

// three
var obj = {
    a: 20,
    getA: function() {
        setTimeout(function() {
            console.log(this.a)
        }.bind(this), 1000)
    }
}

一个很特别的例子

var n = 'hello world!';　　

function example() {　　　　
  console.log(this.n);　　
}　　

var o = {};　　
o.n = 'hey~';　　
o.m = example;　　
o.m.apply(); // hello world!
// o.m.apply(null); // hello world!

// 单纯地调用 o.m(); 此时输出是hey~

当apply()的参数为空（或者为null）时，就是没有对象去替换掉当前的对象，所以默认调用全局对象。因此，这时会输出’hello world!’，证明this指的是全局对象。

四、构造函数与原型方法上的this

this是在函数被调用时被确定的，这一点是毋庸置疑的。

现在有一个构造函数，我们使用构造函数去创建新对象的过程是这样的 —— 通过new操作符调用构造函数，经历四个阶段

• 创建一个新对象
• 将构造函数的this指向这个新对象
• 执行构造函数的代码，为这个对象添加属性和方法等
• 返回这个新对象