Javascript深入认识（6）——this的问题

误区：

对于this的理解，以前一直以为是谁调用了，this就指向谁，这样理解可能会有偏差。

定义：

this的指向，是在函数被调用的时候确定的，也就是执行上下文被创建时确定的。

下面这个例子的this

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

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

fn(); // this指向window
fn.call(obj); // this指向obj

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

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

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

fn();

全局对象中的this

this.a2 = 20
var a1 = 10;
a3 = 30;

这三个变量都是全局对象中的，在chrome里面可以看到

函数中的this

在一个函数的上下文中，this由调用者提供，有嗲用函数的方式来决定。

• 如果调用者函数被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。
• 如果函数独立调用，那么该函数内部的this，指向undefined

在非strict情况下

• demo1–this指向window

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

• demo2—this指向window

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

• demo3—this指向obj

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

console.log(obj.c);
console.log(obj.fn());

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

在’use strict’情况下

• demo1和demo2中都是fn()函数独立调用，内部的this会指向undefined
  
• demo3中第二个console.log的fn()被obj调用,所以this指向obj
  

容易弄错的一些例子：

独立调用

var a = 20;
var foo = {
    a: 10,
    getA: function () {
        return this.a;
    }
}
console.log(foo.getA()); // 10

var test = foo.getA;
console.log(test());  // 20

getA被foo调用，不会undefined

var a = 20;
function getA() {
    return this.a;
}
var foo = {
    a: 10,
    getA: getA
}
console.log(foo.getA());  // 10

这个比较难看懂，其实可以理解为fn=obj.getA，尽管他与obj.getA的引用相同，但是它是独立调用的

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

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

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

active(obj.getA);

使用call，apply显示指定的this

JavaScript内部提供了一种机制，让我们可以自行手动设置this的指向。它们就是call与apply。所有的函数都具有着两个方法。它们除了参数略有不同，其功能完全一样。它们的第一个参数都为this将要指向的对象。
而call与applay后面的参数，都是向将要执行的函数传递参数。其中call以一个一个的形式传递，apply以数组的形式传递。这是他们唯一的不同。

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(a, b, c, d, e) {

    // 先看看函数的自带属性 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;

在Student的构造函数中，借助call方法，将父级的构造函数执行了一次，相当于将Person中的代码，在Sudent中复制了一份，其中的this指向为从Student中new出来的实例对象。call方法保证了this的指向正确，因此就相当于实现了继承。Student的构造函数等同于下。

var Student = function(name, age, high) {
    this.name = name;
    this.age  = age;
    this.gender = ['man', 'woman'];
    // Person.call(this, name, age); 这一句话，相当于上面三句话，因此实现了继承
    this.high = high;
}

• 改变this指向

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

obj.getA();

我们期待的是getA被obj调用时，this指向obj，但是由于匿名函数的存在导致了this指向的丢失，在这个匿名函数中this指向了全局，因此我们需要想一些办法找回正确的this指向。

1. 将this的引用保存起来

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

obj.getA();

2. 借助闭包与apply方法，封装一个bind方法

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();

3. 也可以使用ES5中已经自带的bind方法, 它与上面封装的bind方法是一样的效果

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

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

function Person(name, age) {

// 这里的this指向了谁?
this.name = name;
this.age = age;   
console.log(this)
}

Person.prototype.getName = function() {

// 这里的this又指向了谁？
console.log(this)
return this.name;
}

// 上面的2个this，是同一个吗，他们是否指向了原型对象？

var p1 = new Person('Nick', 20);

通过new操作符调用构造函数，会
经历以下4个阶段。

创建一个新的对象；
将构造函数的this指向这个新对象；
指向构造函数的代码，为这个对象添加属性，方法等；
返回新对象。
因此，当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对象返回出来，被实例对象p1接收。因此，我们可以说，这个时候，构造函数的this，指向了新的实例对象，p1。

而原型方法上的this就好理解多了，根据上边对函数中this的定义，p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1。