JavaScript中this的全面解析及常见实例

前言

this 关键字在 Javascript 中非常常见,但是很多开发者很难说清它到底指向什么。大部分人会从字面意思上去理解 this,认为 this 指向函数自身,实际上this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调
用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

总结: 函数被调用时发生 this 绑定，this 指向什么完全取决于函数在哪里被调用。

一、this 的绑定规则

this 一共有 4 中绑定规则，接下来一一介绍每种规则的解释和规则直接的优先级

1.1 默认绑定（严格/非严格模式）

独立函数调用

function foo() { console.log(this.a);}var a = 2;foo(); // 2

严格模式下：

function foo() { "use strict"; console.log(this); //undefined console.log(this.a); //Uncaught TypeError: Cannot read property 'a' of undefined}var a = 2;foo();

注意下边两种情况

var age = "18";var obj = { name: "heyushuo", age: 25, fn: function() { function sayName() {  console.log(this); //window  console.log(this.age); //undefined } sayName(); }};obj.fn();

函数 sayName 虽然是在 obj.fn 内部定义的，但是它仍然是一个独立函数调用，this 仍然指向 window。

var a = "global";var obj = { a: 2, foo: function() { console.log(this.a); //global }};var bar = obj.foo; // 函数别名！bar();

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是函数本身，因此此时的
bar() 其实是一个不带任何修饰的独立函数调用，因此应用了默认绑定。

1.2 隐式绑定

当函数引用有上下文对象时(例如:obj.foo 这个时候使用 obj 上下文来引用函数 foo)，隐式绑定规则会把函数中的 this 绑定到这个上下文对象。

var obj = { name: "heyushuo, foo: function() { console.log(this.name); //heyushuo }};obj.foo();

对象属性引用链中只有上一层或者说最后一层在调用中起作用。

var obj = { name: "heyushuo", obj1: { name: "kebi", foo: function() {  console.log(this.name); // kebi } }};obj.obj1.foo();

隐式丢失

被隐式绑定的函数会丢失绑定对象，而应用默认绑定，把 this 绑定到全局对象或者 undefined(严格模式) 上。

第一种