你应当要知道的JS中的this

2023年5月20日 135次阅读 来源: stone

媒介

this 是 JavaScript 中不可不谈的一个知识点，它非常重要但又不轻易明白。由于 JavaScript 中的 this 差别于其他言语。差别场景下的 this 指向差别（当函数被挪用实行时会天生变量对象，肯定 this 的指向，因而当前函数的 this 是在函数被挪用实行的时刻才肯定的，所以致使 this 的指向天真不肯定），而且，在严厉情势和非严厉情势下，this 也会有差别的解读。

为何要有 this

先想一想假如 JavaScript 中没有 this 会怎样？比方下面这段代码：

function identity(context) {
    return context.name.toUpperCase();
}
function speak(context) {
    var greeting = 'Hello, I am ' + identity(context)
    console.log(greeting)
}
var you = {
    name: 'Reader'
}
var me = {
    name: 'Stone'
}
identity(you); // READER
speak(me); // Hello, I am Stone

我们给这 identity 和 speak 两个函数显现的传入了一个高低文对象，这好像看不出什么，然则一旦你的运用变得愈来愈庞杂，这类显现通报高低文就会让代码愈来愈杂沓，代码组织愈来愈隐约。而运用 this 就能够防止如许，由于 this 供应了一种更文雅的体式格局来隐式通报对象援用，能够把 API 设想得越发简约易用。

this 的绑定划定规矩

全局对象中的 this

全局对象的变量对象是一个比较特别的存在，在全局对象中，this 指向它本身，比方：

// this 绑定到全局对象
this.a1 = 10;

// 经由过程声明绑定到变量对象，全局环境中，变量对象就是它本身
var a2 = 20;

// 会隐式绑定到全局对象
a3 = 30;

console.log(a1); // 10
console.log(a2); // 20
console.log(a3); // 30

函数中的 this

在一个函数的实行高低文中，this 由该函数的挪用者供应，由函数的挪用体式格局来决议 this 的指向。下面这个例子：

function fn() {
    console.log(this)
}
fn(); // Window {...}

默许全局对象就是挪用者,等价于 window.fn()（只议论浏览器中全局对象）。然则在非严厉情势中，this 是指向 undefined 的，比方：

'use strict';
function fn() {
    console.log(this);
}
fn(); // undefined
window.fn(); // Window {...}

这就说清晰明了，假如不指定函数挪用者，在严厉情势下回默许绑定到全局对象，在非严厉情势下默许指向 undefined 。

函数是自力挪用，照样被某个对象所挪用，是很轻易区分的，比方：

'use strict';
var a = 20;
function fn() {
    var a = 1;
    var obj = {
        a: 10,
        c: this.a + 20
    }
    return obj.c
}
console.log(window.fn()); // 40
console.log(fn()); // TypeError

对象字面量的情势不会发作本身的作用域，所以 obj 中的 this.a 并非指向 obj ，而是与函数内部的 this 一样。因而，当 window.fn() 挪用时，fn 内部的 this 指向 window 对象，此时 this.a 接见全局对象中的 a ；由因而在严厉情势中，在没有指明挪用者的时刻，fn 内部默许指向 undefined，所以在零丁挪用的时刻会报错。

call/apply/bind 显现绑定 this

JavaScript 中供应了一个体式格局能够让我们手动指定函数内部的 this 指向，也就是前面提到的隐式通报对象，它们就是call/apply/bind。这三个要领是 Function 的原型要领，一切函数都能够挪用这三个要领。看下面这个例子：

var a = 20;
var obj = {
    a: 40
}
function fn() {
    console.log(this.a);
}
fn(); // 20
fn.call(obj); // 40
fn.apply(obj); // 40

当函数挪用 apply/bind 时，示意实行该函数，而且这个函数内部的 this 指向 apply/bind 的第一个参数。

两者的区分：

  • call 的第一个参数是函数内部 this 的指向，后续的参数则是函数实行时所须要的参数，一个一个通报
  • apply 的第一个参数与 call 雷同，而实行函数的参数，则以数组的情势传入

bind 要领也能指定函数的 this ，然则它差别于call/apply。bind 要领会返回一个新函数，这个函数与原函数有雷同的函数体，然则函数内部的 this 被绑定成 bind 要领的第一个参数，后续参数也是一个一个传入，而且不会自动实行新函数。

组织函数中的 this

能够把组织函数看成是一般函数，个中的 this 指向是建立的对象实例，之所以称之为组织函数，是由于我们会借助 new 操作符来挪用函数。在用 new 建立对象时，this 指向发作转变是在第二步：

  1. 建立一个对象实例
  2. 将组织函数中的 this 指向这个对象
  3. 实行组织函数中的代码
  4. 返回这个新建立的对象
function Foo() {
    this.a = 20
}
var foo = new Foo()
console.log(foo.a) // 20

箭头函数中的 this

箭头函数内部是不会绑定 this 的，它会捕捉外层作用域中的 this，作为本身的 this 值。比方：

function Person() {
  this.age = 20;
  (() => {
    this.age++
  })()
}
var p = new Person()
console.log(p.age)

DOM事宜中的 this

当函数被当作监听事宜处置惩罚函数时， 其 this 指向触发该事宜的元素 （针对于addEventListener事宜）。比方：

<div class="box">
    click
</div>
document.querySelector('.box').addEventListener('click', function(e) {
  console.log(this) // 这个this指向div.box元素
}, false)

总结

this 的运用场景雄厚多样，能够用来完成继续，完成函数柯里化等，作为开发者应当清晰种种运用体式格局以及其内部道理。

参考

你不知道的JavaScript（上卷）

    原文作者：stone
    原文地址: https://segmentfault.com/a/1190000017912451
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞