javascript中的this

一般说到JS的this，都会想起在函数中变来变去的this。但是事情的发生都是有规则的约束，JS中的this也不例外，下面我们来看一下JS中this指向的规则

在JS中，有四条规则影响着this的指向

1.默认指向：对于一个函数，如果没有被打点调用，则该函数里的this指向全局(window)
2.隐式指向：对于一个函数，如果被打点调用，则该函数里的this指向调用该函数的对象
3.显式指向：通过call，apply，bind改变函数里的this指向
4.new一个对象：构造函数的this指向该实例化对象

优先级为: 4 > 3 > 2 > 1

一 、默认指向

-> 对于一个函数，如果没有被打点调用，则该函数里的this指向全局(window)

1)先看一个30km/h的小例子

var age = 18;
function showAge () {
  var age = 100;
  console.log('my age is: ' + this.age);
}
showAge();

运行的结果为 my age is : 18

其实这也是符合默认指向这个规则的，在这个小例子中，showAge函数在执行的时候并没有被打点调用×××.showAge()，所以showAge函数里面的this指向全局window，即this.age就是全局的age为18。

可能有人会有疑问，为什么不是打印100呢。首先要清楚的一点是，在这个小例子中，打印的是this.age而不是age，所以要到this指向的对象上找age,而不是单纯地去找age这个变量，如果改成console.log('my age is: ' + age)，打印的就是100了。

2)再来一个60km/h的小例子

var age = 18;
var obj = {
    age : 100,
    showAge : function () {
      setTimeout(function () {
        console.log('my age is: ' + this.age);        
      }, 300);
      return '请稍等300毫秒'；
    }
}
obj.showAge();

运行的结果为my age is : 18

嗯？？？为什么还是18？？？其实把函数执行的位置捋清楚也是符合规则的。
首先，showAge函数定义在一个对象中，里面有个定时器setTimeout，定时器等待300毫秒后执行打印操作，这应该没问题。
然后，在外面执行obj.showAge()，打点调用obj里的showAge方法，所以showAge里的this指向obj，但是，我们要操作的语句是在定时器setTimeout里面的函数里的，所以我们可以粗略地模拟一下这个函数

function setTimeout (callback, delay) {
    ...
    if (...) {
        callback();
    }
    ...
}

好了，大概就是这样子~~
我们可以看出，在定时器中，作为回调函数的callback只是单纯地在符合条件后执行了，那么，这里的callback函数是不是没有被谁打点调用，所以该函数的this应该指向全局对象window。所以打印的就是全局的age,等于18。

同时也可以得到一个普遍的结论：一般的回调函数的this指向全局对象window

二、隐式指向

-> 对于一个函数，如果被打点调用，则该函数里的this指向调用该函数的对象

1)先看一个30kn/h的例子

var age = 18;
var obj = {
    age : 100,
    showAge : function () {
      console.log('my age is: ' + this.age);
    }
}
obj.showAge();

运行结果是my age is: 100

由obj.showAge()可以看出，函数showAge被obj这个对象调用，所以showAge函数里面的this 指向obj这个对象
所以你也可以把showAge函数的执行语句理解为console.log('my age is: ' + obj.age)，所以打印的就是对象obj上的age，为100。

2)再来一个60km/h的例子

var obj1 = {
    age : 18,
    showAge : function () {
      console.log('my age is: ' + this.age);
    }
}
var obj2 = {
    age : 100,
    showAge : function () {}
}
obj2.showAge = obj1.showAge;
obj2.showAge();

运行结果是my age is: 100

首先，执行obj2.showAge = obj1.showAge，把obj1的showAge函数的引用给obj2的showAge，所以obj2的showAge的执行内容就变成了obj1的showAge内容
然后执行obj2.showAge()，shoeAge的this指向obj2，所以打印的是obj2的age，为100。

三、显示指向

-> 通过call，apply，bind改变函数里的this指向

先简单说一下call apply bind 的作用和使用方法
call apply 都是改变一个函数的this指向并执行该函数，区别是传参列表不同，call(obj, 参数1, 参数2, ...) apply(obj, arguments)
bind是改变一个函数的this指向并返回一个新的函数，传参结合call和apply的，只接收第一次绑定的this

1）先来一个30km/h的例子

var obj = {
    age : 100,
    showAge : function () {
      console.log('my age is: ' + this.age);
    }
}
var newObj = {
    age : 18
}
obj.showAge.call(newObj);  //apply效果一样

//var func = obj.showAge.bind(newObj);  //拿个变量接收bind方法执行后返回的新函数
//func();  //结果和call apply相同

运行结果是：my age is: 18

首先，执行语句从左往右看，调用obj对象中的showAge方法，然后使用call方法改变showAge方法中的this为newObj对象。所以，showAge函数里的执行语句可以理解为console.log('my age is: ' + newObj.age)，所以打印的是newObj里的age，为18。

2)剖析一下call改变this的原理，车速100km/h (拓展部分，需要有一定JS基础)

虽然知道call(apply bind 不做解释，有兴趣的可以看完call的原理后自己尝试还原)能改变一个函数this的指向，那么它里面是怎样操作然后改变一个函数的this指向的呢？

首先，在隐式指向中我们知道，对于一个函数，如果被打点调用，则该函数里的this指向调用该函数的对象，那么我们就可以利用这点来模拟一下call方法

在原型链上编写，模拟就要真实一点~~

Function.prototype.myCall = function (context) {
    var ctx = context || window,  //兼容没传上下文的情况
        arg = arguments,  //保存函数的实参列表
        len = arg.length,  
        args = [];  

    ctx.fn = this; 
    for (var i = 1; i < len; i++) {
        //从实参列表的第一位开始遍历，因为第零位为指向的上下文
        args.push('arg[' + i + ']');
    }
    //遍历完后 args = [ 'arg[1]', 'arg[2]', ...]

    var result = eval( 'ctx.fn(' + args.join(',') + ')' );
    //上述语句可理解为 eval('ctx.fn(arg[1], arg[2], ...)')

    delete ctx.fn;
    return result;
}

运行结果依旧为my age is: 18

首先，从结果看，myCall函数没有问题，然后我们来分析一下函数里面到底主要干了些啥 (整体思路见代码注释)

①通过ctx.fn = this把调用myCall的函数变为目标上下文的一个方法，由此可以改变fn方法的this为目标上下文，也就是调用myCall的函数的this指向了目标上下文

②把调用myCall的函数的参数整合，通过eval方法把字符串解析为脚本并执行

好了，整体思路就是如此，这块不懂也没关系，我们主要讲的是改变this的指向~

四、通过new实例化一个对象(主要讲解this问题，构造函数知识不做过多概述)

-> 构造函数的this指向该实例化对象

1)先来一个30km/h的例子

function Person (name, age) {
    this.name = name;
    this.age = age;
    this.introduceYourself = function () {
      console.log('my name is ' + this.name, 'and I\'m ' + this.age + ' years old.');
    }
}
var person = new Person('xuyede', 18);
person.introduceYourself ();

运行结果为my name is xuyede and I'm 18 years old.

为了更好地让大家理解，我们可以把new Person()的过程分成4个步骤理解 (当然不是真的是这个过程，只是为了让大家能理解new的过程，稍后会揭晓真的过程~)

①在Person函数里面的第一行隐式生成一个对象 var this = {}
②让该this的原型指向该函数的原型 this.__proto__ = Person.prototype
③执行 this.xxx = xxx
④在函数最后一行把这个this返回出去

所以，你可以理解为变量person拿到了构造函数里面this的引用，所以person可以使用在构造函数里设置在this上的值

构造函数还涉及原型、原型链的知识，在这里就不过多阐述这方面的知识

2)剖析一下new这个东西到底干了什么，车速180km/h（需要对原型有一定的了解）

话不多说，上代码~~~

function myNew() {
    var func = [].shift.call(arguments);  //把实参列表的第一位截取出来，获得构造函数
    var instance = Object.create(func.prototype);  //声明一个上下文，原型为构造函数的原型
    func.apply(instance, arguments);  //执行该构造函数，并改变构造函数的this为instance
    return instance;  //返回这个上下文
}

是的，你没看错，就只有四行代码，但是这四行代码理解起来可不简单，具体的请看代码的注释~~

最后的最后，希望你能从这篇文章中能学到东西就好~感谢阅读
虽然不是什么精品文章，但是劳动不易，如果要转载的请注明出处。