全面解析 this

文章目录

1. 1. this机制的四种规则
   1. 1.0.1. 1.默认绑定全局变量
   2. 1.0.2. 2.隐式绑定
   3. 1.0.3. 3. 显示绑定
   4. 1.0.4. 4.new新对象绑定

前言:
不要再被this迷惑了.
this跟函数在哪里定义没有半毛钱关系，函数在哪里调用才决定了this到底引用的是啥。也就是说this跟函数的定义没关系，跟函数的执行有大大的关系。所以，记住，“函数在哪里调用才决定了this到底引用的是啥”。

this机制的四种规则

1.默认绑定全局变量

这条规则是最常见的，也是默认的。当函数被单独定义和调用的时候，应用的规则就是绑定全局变量。如下：　

function fn() {
    console.log( this.a );
}
var a = 2;
fn(); // 2 -- fn单独调用，this引用window

2.隐式绑定

隐式调用的意思是，函数调用时拥有一个上下文对象，就好像这个函数是属于该对象的一样。例如：

function fn() {
    console.log( this.a );
}
var obj = {
    a: 2,
    fn: fn
};
obj.fn(); // 2 -- this引用obj

需要说明的一点是，最后一个调用该函数的对象是传到函数的上下文对象（理解为直接关系,间接关系的老夫(this)不屌你）。如：

function fn() {
      console.log( this.a );
  }
  var obj2 = {
      a: 42,
      fn: fn
  };
  var obj1 = {
      a: 2,
     obj2: obj2
 };
 obj1.obj2.fn(); // 42 -- this引用的是obj2(obj1,this我不屌你)

还有一点要说明的是，失去隐式绑定的情况，如下：

　function fn() {
    console.log( this.a );
}
var obj = {
    a: 2,
    fn: fn
};
var bar = obj.fn; // 函数引用传递
var a = "全局"; // 定义全局变量
bar(); // "全局"
//执行的效果明显是把fn赋给bar。这样bar执行的时候，依然是默认绑定全局变量

3. 显示绑定

学过bind()\apply()\call()函数的都应该知道，它接收的第一个参数即是上下文对象并将其赋给this。看下面的例子：

function fn() {
    console.log( this.a );
}
var obj = {
    a: 2
};
fn.call( obj ); // 2
//把obj对象替换fn对象,this的女朋友(对象)就换成了这个叫obj的白富美.

如果我们传递第一个值为简单值，那么后台会自动转换为对应的封装对象。如果传递为null，那么结果就是在绑定默认全局变量，如：

function fn() {
     console.log( this.a );
 }
 var obj = {
     a: 2
 };
var a = 10;
fn.call( null); // 10

4.new新对象绑定

如果是一个构造函数，那么用new来调用，那么绑定的将是新创建的对象。如：

function fn(a) {
     this.a = a;
 }
 var bar = new fn( 2 );
 console.log( bar.a );// 2

注意，一般构造函数名首字母大写，这里没有大写的原因是想提醒读者，构造函数也是一般的函数而已。

上面介绍的四种关于this绑定的4中情况和规则，现实写代码的过程中肯定比这要多和复杂，但是无论多复杂多乱，它们都是混合应用上面的几个规则和情况而已。只要你的思路和理解是清晰的，那肯定没问题的。