你害怕javascript的this吗？

this在javascript中一直像是一个恶魔般的存在，导致很多的前端开发者对它都抱有一定的恐惧感，毕竟它看起来是那么的变幻无常。

克服对它的恐惧，就得需要正面面对它，了解它熟悉它。对于this的解释我觉得在《你不知道的javascript》中解释的已经很清楚的，这里我就不在照搬概念了。

了解this
在函数内部this既不是指函数本身也不指函数的词法作用域。在函数没有调用之前，this是不确定的，只有在调用函数的时候才会确定this的指向。在函数调用时，除了传入参数外，js还会默认传递隐形的this和arguments参数。this指的是当前的执行主体。
那么我们怎么找到当前的执行主体呢？
在js中有这么5种情况：
先看看下面几个例子
1, 默认绑定

function func(){
  console.log(this.a)
}
var a = 'a'
func(); // a

这种情况就是默认绑定，为啥是默认绑定呢？因为在调用函数的时候，没有用到任何的修饰，所以只可能是默认绑定。那么this就指向全局变量。所以，不管在什么地方调用func，this == window。需要注意的是在严格模式下，this不会指向全局变量，会变成undefined。
2, 隐式绑定

var name = 'global'
function fn(){
  console.log(this.name)
}
let obj = {
  name: 'obj',
  fn: fn
}
obj.fn(); // obj

这种隐式绑定，在函数调用的时候，会把this绑定到当前执行者的上下文对象。也就是说obj对象在调用函数fn的时候是拥有了function fn(){},所以this就会绑定到obj对象上。隐式绑定我们只需要记住，是谁调用函数，this就指向谁。
需要注意的是，在隐式绑定中this也有可能会丢失！

var name = 'global'
function fn(){
  console.log(this.name)
}
let obj = {
  name: 'obj',
  fn: fn
}
var newFn = obj.fn;
newFn(); // global

因为此时调用newFn是不带任何修饰的，所以已经变成了默认绑定，这个就相当于
var newFn = fn
3, 在构造函数中的this

function Obj(name){
  this.name = name
}
var o = new Obj('小明');
o.name // 小明

在使用new操作函数的时候，函数返回的对象就是函数内部的this指向。
4，显示绑定
这个就比较明显了，一般都是会有call，apply，bind这样的修饰符，调用这些修饰函数的函数的第一个参数就是this的指向

function func(){
    console.log(this.name)
}
var name = 'global'
var newO = {
  name: 'newO'
}
func.call(newO) // newO

5，箭头函数
箭头函数是没有this的，那么箭头函数内部的this会是谁呢？它的指向是包裹该函数的外面作用域，也就是说外层是否有函数包裹，那么this就是外层函数的this；外层没有函数，那么this就是window。

var name = 'global'
function func(){
    var name = 'func'
    var inner = () => {
        console.log(this.name)
    }
    return inner
}
func()() // global

function func2(){
    var name = 'func2'
    var inner = () => {
        console.log(this.name)
    }
    inner()
}
func2(); // global

function func3(name) {
    this.name = name;
    var inner = () => {
          console.log(this.name)
    }
    inner()
}

var obj = new func3('func3'); // func3

前两种情况都是global，是因为函数都是默认绑定，this就是window。最后的一种情况打印func3,包含inner函数的外层函数func3的this在用new操作之后指向的是obj，所以inner箭头函数的this，就是obj。

function func3(name) {
    this.name = name;
    function inner() {
          console.log(this.name)
    }
    inner()
}

var obj = new func3('func3'); // global

如果不是箭头函数的话，就会打印全局global。

说了一大堆，可能有同学已经头晕目眩了，那么最后我们用一张图总结一下。

image.png

如果上面说的那么多可以帮助到你，可以帮我点个小小的爱心支持鼓励下。如果有讲的不清楚或者不对的地方也望大佬在评论区多多指点共同进步，康桑密达！

你害怕javascript的this吗？

说了一大堆，可能有同学已经头晕目眩了，那么最后我们用一张图总结一下。

推荐阅读更多精彩内容