解读this

解读this

this的指向，是在函数被调用的时候确定的。也就是执行上下文被创建时确定的。因此，一个函数中的this指向，可以是非常灵活的。
比如下面的例子中，同一个函数由于调用方式的不同，this指向了不一样的对象。

var a = 10;
var obj = {
    a: 20
}
function fn () {
    console.log(this.a);
}
fn(); // 10     this指向window
fn.call(obj); // 20    this指向obj

1.全局对象的this，它是一个比较特殊的存在。全局环境中的this，指向它本身。

    // 通过this绑定到全局对象 
    this.a2 = 20; 
    // 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身 
    var a1 = 10; 
    // 仅仅只有赋值操作，标识符会隐式绑定到全局对象 
    a3 = 30; 
    // 输出结果会全部符合预期 
    console.log(a1); 
    console.log(a2); 
    console.log(a3);

2.函数中的this

    // 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;
        }
    }
    console.log(obj.c);//40
    console.log(obj.fn());//10

在demo03中，对象obj中的c属性使用this.a + 20来计算。这里我们需要明确的一点是，单独的{}是不会形成新的作用域的，因此这里的this.a，由于并没有作用域的限制，所以它仍然处于全局作用域之中。所以这里的this其实是指向的window对象。

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

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

4.请看以下例子

   'use strict'; 
    var a = 20; 
    function foo () { 
        var a = 1; 
        var obj = { 
            a: 10, 
            c: this.a + 20, 
            fn: function () { 
                return this.a; 
            } 
        } 
        return obj.c; 
    } 
    console.log(foo()); // this指向 undefined
    console.log(window.foo()); // 40

    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

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

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

5.使用call，apply显示指定this：
JavaScript内部提供了一种机制，让我们可以自行手动设置this的指向。它们就是call与apply。所有的函数都具有这两个方法。它们除了参数略有不同，其功能完全一样。它们的第一个参数都为this将要指向的对象。
如下例子所示。fn并非属于对象obj的方法，但是通过call，我们将fn内部的this绑定为obj，因此就可以使用this.a访问obj的a属性了。这就是call/apply的用法。

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

而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

6.因为call/apply的存在，这让JavaScript变得十分灵活。因此就让call/apply拥有了很多有用处的场景。

• 将类数组对象转换为数组：

        function exam(a, b, c, d, e) {      
        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);//rose
  

• 实现继承：

   // 定义父级的构造函数 
    var Person = function(name, age) { 
        this.name = name; 
        this.age = age; 
        this.gender = ['man', 'woman']; 
    } 
    // 定义子类的构造函数 
    var Student = function(name, age, high) { 
        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的指向保持不变：

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

• 借助闭包与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();//20

构造函数与原型方法上的this：在封装对象的时候，我们几乎都会用到this，但是，只有少数人搞明白了在这个过程中的this指向，就算我们理解了原型，也不一定理解了this。所以这一部分，是这篇文章最重要最核心的部分。理解了这里，将会对你学习JS面向对象产生巨大的帮助。
    function Person(name, age) { 
        // 这里的this指向了谁? 
        this.name = name; 
        this.age = age; 
    } 
    Person.prototype.getName = function() {
        // 这里的this又指向了谁？ 
        return this.name; 
    } 
    // 上面的2个this，是同一个吗，他们是否指向了原型对象？ 
    var p1 = new Person('Nick', 20); 
    p1.getName();
    

我们知道通过new操作符调用构造函数，会经历以下4个阶段：
1、创建一个新的对象；
2、将构造函数的this指向这个新对象；
3、执行构造函数的代码，为这个对象添加属性，方法等；
4、 返回新对象。
因此，当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对象返回出来，被实例对象p1接收。因此，我们可以说，这个时候，构造函数的this，指向了新的实例对象，p1。而原型方法上的this就好理解多了，根据上边对函数中this的定义，p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1。