this

在函数中this到底取何值，是 ** 在函数真正被调用执行的时候确定下来的 ** ，函数定义的时候确定不了。

因为this的取值是执行上下文环境的一部分，每次调用函数偶会产生一个新的执行上下文环境，当你在代码中使用了this，这个this的值就直接从执行的上下文中获取了，而不会从作用域链中搜寻。

1. 全局&调用普通函数

在全局环境中，this永远指向window

console.log(this === window);   // true

普通函数在调用的时候（注意不是构造函数，前面不加new），其中的this也是指向window：

var x = 10;
function foo() {
  console.log(this);
  console.log(this.x);
}
foo();
//  window
//  10

2. 构造函数

所谓构造函数就是由一个函数new出来的对象，一般构造函数的函数名首字母大写，例如像Object，Function，Array这些都属于构造函数。

function Foo() {
  this.x = 10;
  console.log(this);
}
var foo = new Foo();
console.log(foo.x);
// 10

上述代码，吐过函数作为构造函数使用，那么其中的this就代表它即将new出来的对象。
但是如果直接调用Foo函数，而不是new Foo()，那就变成情况一，这时候Foo()就变成普通函数：

function Foo() {
  this.x = 10;
  console.log(this);
}
var foo = Foo();
console.log(foo.x);
// window
// undefined

3. 对象方法

如果函数作为对象的方法时，方法中的this指向该对象。

var obj = {
  x : 10,
  foo : function() {
          console.log(this);
          console.log(this.x);
        }
  }
};
obj.foo();
//  object
// 10

• 注意：若是在对象方法中定义函数，那么情况就不同了

var obj = {
  x : 10,
  foo : function () {
            function f() {
              console.log (this);
              console.log(this.x);
            }
            f();
          }
}
obj.foo()
//  window
//  undefined

函数f虽然是在 obj.foo 内部定义的，但它仍然属于一个普通函数，this 仍指向 window；
在这里，如果想要调用上层作用域中的变量 obj.x，可以使用 self 缓存外部 this 变量
如果函数不作为对象方法被调用：

var obj = {
  x : 10,
  foo : function() {
            console.log(this);
            console.log(this.x);
          }
};
var fn = obj.foo;
fn();

obj.foo 被赋值给一个全局变量，并没有作为 obj 的一个属性被调用，那么此时 this 的值是 window

4. 构造函数 prototype 属性

functionFoo（） {
  this.x = 10;
}
Foo.prototype.getX = function() {
  console.log(this);
  console.log(this.x);
}
var foo = new Foo();
foo.getX ()
//  Foo { x: 10, getX : function}
//  10

在 Foo.prototype.getX 函数中，this指向foo对象，不仅如此，即使是在整个原型链中，this 代表的也是当前对象的值。

5. 函数用call，apply 或者 bind 调用

var obj = {
  x : 10
}
function foo() {
  console.log(this);
  console.log(this.x);
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();
// {x:10}
// 10

当一个函数被call，apply或者bind调用是，this的值就是传入对象的值。

6. DOM event this

在一个HTML DOM事件处理程序里，this始终指向这个处理程序所绑定的 HTML DOM节点：

function Listener() {
  document.getElementById('foo').addEventListener ('click', this.handleClick);
}
Listener.prototype.handleClick = function (event) {
  console.log(this);
}
var listener = new Listener();
document.getElementById('foo').click();
//  <div id="foo"></div>

前六种情况总结一句话为：this指向调用该方法的对象。

7. 箭头函数中的this

当使用箭头函数的时候，情况就有所不同了：箭头函数内部的this是词法作用域，由上下文确定

var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);      //Object {x: 10}
                    console.log(this.x);    //10
                }
            }
        }
        fn()()();
    }
}
obj.foo();
// Object { x: 10 }
// 10

 

作者：王康_Wang
链接：https://www.jianshu.com/p/9f0c549b51e2
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。