this 的来龙去脉

Zz__
301 阅读4分钟

看了那么多文章还是不理解this,this的原理,this的指向...,试试看完这篇文章吧，希望对你有一点点帮助，如果没有，就当作我自己的温习吧，谢谢你的阅读。

this 是什么

this 是JavaScrip中的一个关键字，这就意味者，this这个单词在原生JS中有特殊的意义，不能够将他当作普通的单词或变量，就像if,else一样，那么 这个关键字是干什么的呢？有什么用呢？

this指向当前执行代码的环境对象 —— MDN

这句话的意思是，this 指向一个对象，该对象就是当前代码的执行环境，为了先不引入更复杂的概念和知识点，你不需要深究执行环境是什么，目前，你只需要知道，this指向一个对象这就够了。 先看两个代码例子：

  1. 直接在控制台，查看 this 值

没错，this指向了一个对象Window。先别管这个对象是什么，重点是this指向了一个对象。

  1. 在函数中输出 this 值

小结：

好了，目前你需要知道的是：

1. this是原生JavaScript的一个关键字。

2. 这个关键字的指向一个对象。

为什么要有this

现在知道的是，this指向一个对象，可是这有什么用呢，这个对象是干什么的呢？为什么要这样设计呢？这和JS语言的特性有关系，如果没有this,那么JS就只有词法作用域了(就此打住，这不是重点，所以不解释词法作用域，不影响理解this)。

每一段代码执行都是在某一个环境里面，或说每一段 代码执行都是在某个作用域下执行的，例如，函数执行的时候，他能够访问到外部的变量，例如：

var a = 1
function f() {
    var a =2
    console.log(this.a)
}
f()

在全局环境下执行这段代码，输出的a是1，这个变量a是由当前运行环境提供的，函数能够运行在不同的环境中，那么函数是如何知道当前的环境的呢？这就是核心，this就是用来保存这个运行环境的。这样不管你函数在什么样的环境中执行，都能够清楚的知道当前运行环境。

好了，再次看图1中的代码：

看，this的值是window对象，为什么呢？因为这代码就是在全局环境下执行的啊。

再看该代码在Node下运行：

看，this指向global,global是Node的全局环境，因为就是在全局环境下执行的。

小结：

this 是用来保存代码当前的执行环境的。

如何确定this值

你或许知道，不同情况下，this的指向是不同的，this的值也各不相同，很难确定是什么。这一切都是因为上一节所说的，this保存的是代码的执行环境对象，不同的函数或代码在不同的环境中运行，this值当然是不尽相同的。我实在是不想去总结那些各种情况下的this值了，因为这实在没什么好写的，随手就能够查到。

小结：

this值是随着代码执行环境不同而变化的，不同情况下this值网上有很多总结，这里直接略过。。如果不想查就点这里吧

如何自己指定this

哎呀。你看看，说了这么多，该理解的也理解了，但一旦到了实际写代码中，你一定会忘记这些理论和概念，以及那些乱七八糟的总结。有没有一种方法，自己去指定这个this呢，让它从此在掌握之中，不再是稀里糊涂。当然有，可以使用 call()方法和apply()方法指定this。

call()方法：

call()方法是函数的一个属性，因为函数也是对象，所以他有自己的属性和方法，具体语法是： fun.call(thisArg, arg1, arg2, ...) 第一个参数就是this，这样你就可以自己定义this。

  • 没有手动指定this情况:

  • 自己指定this后:

注意两点：

  1. 在非严格模式下，如果指定this值是undefined或null，this值会被全局对象所替代，在浏览器里就是 window。
  2. 指定this值是基本类型时：this值会被转换成对应的包装类型。

apply()方法：

和call()方法一样，唯一的区别在于：传参形式不一样，call是逗号分隔，而apply是以数组的形式。

小结

call()和apply()自己绑定this,this由我定，从此不再学this

avatar
文章
阅读
粉丝