JavaScript中this初识

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014465934/article/details/84898886

本文就是综合网上的文章对this有个初步的认识。

推荐文章，另一个角度理解this：https://www.imooc.com/article/1758#comment

上面文章总结：通过我这篇文章，我希望学会通过把一个函数调用替换成funcName.call的形式，从而理解运行时上下文中this到底指向谁。总结来说就是下面两个等价变形：

• foo() —> foo.call(window)
• obj.foo() --> obj.foo.call(obj)

1.前言

Javascript 是一个文本作用域的语言, 就是说, 一个变量的作用域, 在写这个变量的时候确定. this 关键字是为了在 JS 中加入动态作用域而做的努力. 所谓动态作用域, 就是说变量的作用范围, 是根据函数调用的位置而定的.从这个角度来理解 this, 就简单的多.

this 是 JS 中的动态作用域机制, 具体来说有四种, 优先级有低到高分别如下:
1.默认的 this 绑定, 就是说 在一个函数中使用了 this, 但是没有为 this 绑定对象. 这种情况下, 非严格默认, this 就是全局变量 Node 环境中的 global, 浏览器环境中的 window.
2. 隐式绑定: 使用 obj.foo() 这样的语法来调用函数的时候, 函数 foo 中的 this 绑定到 obj 对象.
3. 显示绑定: foo.call(obj, …), foo.apply(obj,[…]), foo.bind(obj,…)
4. 构造绑定: new foo() , 这种情况, 无论 foo 是否做了绑定, 都要创建一个新的对象, 然后 foo 中的 this 引用这个对象.

一句话：this 总是指向调用它所在的函数的那个对象。

「this 是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。」

当一个函数被调用时，会创建一个「执行上下文」，这个上下文会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this 就是这个记录的一个属性，会在函数执行的过程中用到。

2.从JavaScript内存结构理解this

参考文章：http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

扫描二维码关注公众号，回复： 4663620 查看本文章

本文主要讲述了为什么要有this：

引擎会将函数单独保存在内存中，然后再将函数的地址赋值给对象的属性，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

一、问题来源：

var obj = {
  foo: function () { console.log(this.bar) },
  bar: 1
};

var foo = obj.foo;
var bar = 2;

obj.foo() // 1
foo() // 2

虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。

这种差异的原因，就在于函数体内部使用了this关键字。this指的是函数运行时所在的环境。对于obj.foo()来说，foo运行在obj环境，所以this指向obj；对于foo()来说，foo运行在全局环境，所以this指向全局环境。所以，两者的运行结果不一样。

为什么会这样？也就是说，函数的运行环境到底是怎么决定的？举例来说，为什么obj.foo()就是在obj环境执行，而一旦var foo = obj.foo，foo()就变成在全局环境执行？

二、内存的数据结构

var obj = { foo:  5 };

上面的代码将一个对象赋值给变量obj。JavaScript 引擎会先在内存里面，生成一个对象{ foo: 5 }，然后把这个对象的内存地址赋值给变量obj。

也就是说，变量obj是一个地址（reference）。后面如果要读取obj.foo，引擎先从obj拿到内存地址，然后再从该地址读出原始的对象，返回它的foo属性。

原始的对象以字典结构保存，每一个属性名都对应一个属性描述对象。举例来说，上面例子的foo属性，实际上是以下面的形式保存的。

{
  foo: {
    [[value]]: 5
    [[writable]]: true
    [[enumerable]]: true
    [[configurable]]: true
  }
}

注意，foo属性的值保存在属性描述对象的value属性里面。

三、函数

这样的结构是很清晰的，问题在于属性的值可能是一个函数。

var obj = { foo: function () {} };

这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。

{
  foo: {
    [[value]]: 函数的地址
    ...
  }
}

由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。

四、环境变量

现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

var f = function () {
  console.log(this.x);
}

var x = 1;
var obj = {
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

上面代码中，函数f在全局环境执行，this.x指向全局环境的x。

在obj环境执行，this.x指向obj.x。

回到本文开头提出的问题，obj.foo()是通过obj找到foo，所以就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数本身，所以foo()就变成在全局环境执行。

总结：由于函数是一个单独的值，所以它可以在不同的环境（上下文）执行。JavaScript 允许在函数体内部，引用当前环境的其他变量。而为了获得当前的运行环境，所以this就出现了，因此函数里面的this函数当前的运行环境。开头提出的问题，obj.foo()是通过obj找到foo（这时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性），所以就是在obj环境执行。一旦var foo = obj.foo，变量foo就直接指向函数本身，所以foo()就变成在全局环境执行。

3.不同调用方式this指向详解

参考文章：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this

3.1全局上下文

无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）this 都指代全局对象。

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

3.2函数上下文

• 简单调用
• bind方法
• 箭头函数
• 作为对象的方法
• 作为构造函数
• 作为一个DOM事件处理函数
• 作为一个内联事件处理函数

在函数内部，this的值取决于函数被调用的方式。

3.2.1简单调用

默认的 this 绑定, 就是说 在一个函数中使用了 this, 但是没有为 this 绑定对象. 这种情况下, 非严格默认, this 就是全局变量 Node 环境中的 global, 浏览器环境中的 window.

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

//在Node中：
f1() === global;

在严格模式下，如果 this 没有被执行上下文（execution context）定义，那它将保持为 undefined。

function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

如果要想把 this 的值从一个上下文传到另一个，就要用 call 或者apply 方法。

// 将一个对象作为call和apply的第一个参数，this会被绑定到这个对象。
var obj = {a: 'Custom'};

// 这个属性是在global对象定义的。
var a = 'Global';

function whatsThis(arg) {
  return this.a;  // this的值取决于函数的调用方式
}

whatsThis();          // 'Global'
whatsThis.call(obj);  // 'Custom'
whatsThis.apply(obj); // 'Custom'

当一个函数在其主体中使用 this 关键字时，可以通过使用函数继承自Function.prototype 的 call 或 apply 方法将 this 值绑定到调用中的特定对象。

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 第一个参数是作为‘this’使用的对象
// 后续参数作为参数传递给函数调用
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// 第一个参数也是作为‘this’使用的对象
// 第二个参数是一个数组，数组里的元素用作函数调用中的参数
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

3.2.2bind方法

ECMAScript 5 引入了 Function.prototype.bind。调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
  return this.a;
}

var g = f.bind({a:"azerty"});
console.log(g()); // azerty

var h = g.bind({a:'yoo'}); // bind只生效一次！
console.log(h()); // azerty

var o = {a:37, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // 37, azerty, azerty

3.2.3箭头函数

3.2.4作为对象的方法

当函数作为对象里的方法被调用时，它们的 this 是调用该函数的对象。

下面的例子中，当 o.f()被调用时，函数内的this将绑定到o对象。

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // logs 37

请注意，这样的行为，根本不受函数定义方式或位置的影响。在前面的例子中，我们在定义对象o的同时，将函数内联定义为成员 f 。但是，我们也可以先定义函数，然后再将其附属到o.f。这样做会导致相同的行为：

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // logs 37

这表明函数是从o的f成员调用的才是重点。

3.2.4.1原型链中的 this

对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，就像该方法在对象上一样。

var o = {
  f: function() { 
    return this.a + this.b; 
  }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

在这个例子中，对象p没有属于它自己的f属性，它的f属性继承自它的原型。虽然在对 f 的查找过程中，最终是在 o 中找到 f 属性的，这并没有关系；查找过程首先从 p.f 的引用开始，所以函数中的 this 指向p。也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是 JavaScript 的原型继承中的一个有趣的特性。

3.2.4.2getter 与 setter 中的 this

再次，相同的概念也适用于当函数在一个 getter 或者 setter 中被调用。用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

function sum() {
  return this.a + this.b + this.c;
}

var o = {
  a: 1,
  b: 2,
  c: 3,
  get average() {
    return (this.a + this.b + this.c) / 3;
  }
};

Object.defineProperty(o, 'sum', {
    get: sum, enumerable: true, configurable: true});

console.log(o.average, o.sum); // logs 2, 6

3.2.5作为构造函数

当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

虽然构造器返回的默认值是this所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回this对象）。

function C(){
  this.a = 37;
}

var o = new C();
console.log(o.a); // logs 37


function C2(){
  this.a = 37;
  return {a:38};
}

o = new C2();
console.log(o.a); // logs 38

3.2.6作为一个DOM事件处理函数

当函数被用作事件处理函数时，它的this指向触发事件的元素（一些浏览器在使用非addEventListener的函数动态添加监听函数时不遵守这个约定）

// 被调用时，将关联的元素变成蓝色
function bluify(e){
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象时为 true
  console.log(this === e.target);        
  this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}

3.2.7作为一个内联事件处理函数

当代码被内联on-event 处理函数调用时，它的this指向监听器所在的DOM元素：

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

上面的 alert 会显示button。注意只有外层代码中的this是这样设置的：

<button onclick="alert((function(){return this})());">
  Show inner this
</button>

在这种情况下，没有设置内部函数的this，所以它指向 global/window 对象（即非严格模式下调用的函数未设置this时指向的默认对象）。

4.this的四种绑定规则

首先有一句大家都明白的话，我还是要强调一遍：

「this 是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。」

这句话很重要，这是理解 this 原理的基础。
而在讲解 this 之前，先要理解一下作用域的相关概念。

4.1词法作用域

JavaScript 就是采用的词法作用域，也就是在编程阶段，作用域就已经明确下来了。

思考下面代码：

function foo(){
  console.log(a);   // 输出 2
}

function bar(){
  let a = 3;
  foo();
}

let a = 2;

bar()复制代码因为 JavaScript 所用的是词法作用域，自然 foo() 声明的阶段，就已经确定了变量 a 的作用域了。

4.2this的四种绑定规则

参考文章：https://juejin.im/post/596a28f6f265da6c360a2716

在 JavaScript 中，影响 this 指向的绑定规则有四种：

• 默认绑定
• 隐式绑定
• 显式绑定
• new 绑定

默认绑定：

这是最直接的一种方式，就是不加任何的修饰符直接调用函数，如：

function foo() {
  console.log(this.a)   // 输出 a
}

var a = 2;  //  变量声明到全局对象中


foo();

使用 var 声明的变量 a，被绑定到全局对象中，如果是浏览器，则是在 window 对象。foo() 调用时，引用了默认绑定，this 指向了全局对象。

隐式绑定:

这种情况会发生在调用位置存在「上下文对象」的情况，如：

function foo() {
  console.log(this.a);
}

let obj1 = {
  a: 1,
  foo,
};

let obj2 = {
  a: 2,
  foo,
}

obj1.foo();   // 输出 1
obj2.foo();   // 输出 2

当函数调用的时候，拥有上下文对象的时候，this 会被绑定到该上下文对象。正如上面的代码，obj1.foo() 被调用时，this 绑定到了 obj1,而 obj2.foo() 被调用时，this 绑定到了 obj2。

显式绑定：

这种就是使用 Function.prototype 中的三个方法 call(), apply(), bind() 了。这三个函数，都可以改变函数的 this 指向到指定的对象，不同之处在于，call() 和 apply() 是立即执行函数，并且接受的参数的形式不同：

• call(this, arg1, arg2, …)
• apply(this, [arg1, arg2, …])

而 bind() 则是创建一个新的包装函数，并且返回，而不是立刻执行。

• bind(this, arg1, arg2, …)

apply() 接收参数的形式，有助于函数嵌套函数的时候，把 arguments 变量传递到下一层函数中。
思考下面代码：

function foo() {
  console.log(this.a);  // 输出 1
  bar.apply({a: 2}, arguments);
}

function bar(b) {
  console.log(this.a + b);  // 输出 5
}

var a = 1;
foo(3);

上面代码中， foo() 内部的 this 遵循默认绑定规则，绑定到全局变量中。而 bar() 在调用的时候，调用了 apply() 函数，把 this 绑定到了一个新的对象中 {a: 2}，而且原封不动的接收 foo() 接收的函数。

new 绑定:

最后一种，则是使用 new 操作符会产生 this 的绑定。在理解 new 操作符对 this 的影响，首先要理解 new 的原理。在 JavaScript 中，new 操作符并不像其他面向对象的语言一样，而是一种模拟出来的机制。在 JavaScript 中，所有的函数都可以被 new 调用，这时候这个函数一般会被称为「构造函数」，实际上并不存在所谓「构造函数」，更确切的理解应该是对于函数的「构造调用」。
使用 new 来调用函数，会自动执行下面操作：

• 创建一个全新的对象。
• 这个新对象会被执行 [[Prototype]] 连接。
• 这个新对象会绑定到函数调用的 this。
• 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

所以如果 new 是一个函数的话，会是这样子的：

function New(Constructor, ...args){
    let obj = {};   // 创建一个新对象
    Object.setPrototypeOf(obj, Constructor.prototype);  // 连接新对象与函数的原型
    return Constructor.apply(obj, args) || obj;   // 执行函数，改变 this 指向新的对象
}

function Foo(a){
    this.a = a;
}

New(Foo, 1);  // Foo { a: 1 }

所以，在使用 new 来调用函数时候，我们会构造一个新对象并把它绑定到函数调用中的 this 上。

4.3优先级

如果一个位置发生了多条改变 this 的规则，那么优先级是如何的呢？

看几段代码：

// 显式绑定 > 隐式绑定
function foo() {
    console.log(this.a);
}

let obj1 = {
    a: 2,
    foo,
}

obj1.foo();     // 输出 2
obj1.foo.call({a: 1});      // 输出 1

这说明「显式绑定」的优先级大于「隐式绑定」

// new 绑定 > 显式绑定
function foo(a) {
    this.a = a;
}

let obj1 = {};

let bar = foo.bind(obj1);
bar(2);
console.log(obj1); // 输出 {a:2}

let obj2 = new bar(3);
console.log(obj1); // 输出 {a:2}
console.log(obj2); // 输出 foo { a: 3 }

这说明「new 绑定」的优先级大于「显式绑定」而「默认绑定」，毫无疑问是优先级最低的。

所以优先级顺序为：「new 绑定」 > 「显式绑定」 > 「隐式绑定」 > 「默认绑定。」

4.4 所以，this到底是什么？

this 并不是在编写的时候绑定的，而是在运行时绑定的。它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。当一个函数被调用时，会创建一个「执行上下文」，这个上下文会包含函数在哪里被调用（调用栈）、函数的调用方式、传入的参数等信息。this 就是这个记录的一个属性，会在函数执行的过程中用到。

还可以参考文章：
https://www.jianshu.com/p/31aec3ab1bb0
https://www.cnblogs.com/snandy/p/4773184.html
https://blog.csdn.net/buddha_itxiong/article/details/79558316