你害怕javascript的this吗？

作者: 想做个文人 | 来源:发表于2019-06-21 17:27 被阅读0次

你害怕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。