蛋疼的JavaScript(二)this

### 烦人的this

JavaScript的表现与之前学的任何传统的语言都不一样，这个就很烦人，这几天把这个坑扫除了

### this到底指向什么

总的来说，总结下，this其实取决于调用者的上下文环境，好比直接调用函数，是在全局作用域下的，就是直接this就是Window

```javascript

function fn(){

console.log(this)

}

fn()//Window

```

而如果将作为对象中的属性，objA.objB.fun（）这个时候this就是objB

```javascript

function fn(){

console.log(this)

}

objA={

a:123,

myfun:fun

}

objA.fun()//objA

```

同样的道理可以延伸到对象的事件，注册事件其实就是将对应对象的上下文环境中的某个属性例如click绑定一个函数，这样的话，函数内部的this就是调用者本身

```javascript

document.querySelector("#btn").onclick = function(){

console.log(this)

}//<input type="button"/>

```

需要注意的是，理解什么是上下文环境，千万不要把上下文环境错认为就是所谓的作用域

```javascript

function fnChain_1() {

console.log(this)

fnChain_2()

}

function fnChain_2() {

console.log(this)

fnChain_3()

}

function fnChain_3() {

console.log(this)

}

fnChain_1()

//三个都是Window

```

上面实例代码是错误理解上下问环境的典范

### ES6的this

ES6引入了箭头函数，这时this的表现与我们之前接触的又不一样了，具体不同点如下:

+ 普通的函数的this取决于调用上下文

+ 而ES6里面的this是继承父执行上下文的this

实例代码如下：

```javascript

//代码来自于https://blog.csdn.net/qq_38563845/article/details/78145814

var name = "window";

var obj = {

name: 'obj',

//普通函数

one: function(){

    console.log(this.name)

},

//箭头函数

two: ()=> {

     console.log(this.name)

},

//普通函数中的箭头函数

three: function(){

    (()=>{

        console.log(this.name)

     })()

},

//多层箭头函数

four: ()=> {

    (()=>{

        console.log(this.name)

     })()

}

}

obj.one(); //obj

obj.two();   //window

obj.three(); //obj

obj.four() //window

```

下面分析我们的想法来个例子：

```javascript

function foo() {

return () => {

return () => {

return () => {

console.log(this);

};

};

};

}

foo()()()()//Window

```

如果将上面的代码改为：

```javascript

foo().call({a:"HelloWorld"})()()()

//{a:"HelloWorld"}

```

至于call是干什么的，接下来来解释