浅谈 js 中的 this 指向问题

this 在前端是一个难点，也是一个痛点。首先this在声明的时候是不肯定的，只有在被调用了以后才知道this的指向。主要有一下集中调用方式：
复制代码

1: 函数名（）直接调用 此时的this指向window

```
    function fn() {
    	var name = '我是fn里面的name'
    	console.log(this.name)
    }
    
    var name = '我是window里面的name'
    
    fn()
    window.fn()
    
    //  结果
    我是window里面的name
    我是window里面的name
```
复制代码

2: window下默认的函数如：setTimeout this也指向window

```
    setTimeout(function() {
        var name = '我是setTimeout里面的name'
        console.log(this.name)
    }, 1000)
    
    var name = '我是window里面的name'
    
    //  结果
    我是window里面的name
```
复制代码

3: Object.函数名（）的调用 此时的this指向该Object

```
    var name = '我是window里面的name'
    var obj = {
        name: '我是obj里面的name',
        getName: function() {
            console.log(this.name)
        }
    }
    
    obj.getName()
    
    var temp = obj.getName
    temp()
    
    //  结果
    我是obj里面的name
    我是window里面的name    (声明一个全局变量temp而后将函数赋值给它，最后经过window调用)var name = '我是window里面的name'
    var obj = {
        name: '我是obj里面的name',
        getName: function() {
            console.log(this.name)
        }
    }
    
    obj.getName()
    
    var temp = obj.getName
    temp()
    
    //  结果
    我是obj里面的name
    我是window里面的name    (声明一个全局变量temp而后将函数赋值给它，最后经过window调用)s
```
复制代码

4: new运算符中的this指向该实例

```
    var name = '我是window里面的name'
    function Fn() {
        this.name = '我是Fn函数里面的name'
        this.getName = function() {
            console.log(this.name)
        }
    }
     
    var fn1 = new Fn()
    var temp = fn1.getName
    
    fn1.getName()
    temp()
    
    //  结果
    我是Fn函数里面的name
    我是window里面的name    (声明一个全局变量temp而后将函数赋值给它，最后经过window调用)
```
复制代码

5: 数组元素为函数时，经过数组来调用函数，此时的this为该数组

```
    function yideng(a, b, c) {
        console.log(this.length)
        console.log(this.callee.length)
    }

    function fn(d) {
    	arguments[0](10, 20, 30, 40, 50)
    }

    fn(yideng, 10, 20, 30)
    
    // 结果
    4
    1   （callee是arguments对象的一个属性，指向当前执行的那个函数）
```
复制代码

6: bind,call,apply 对 this 的从新绑定，this都指向第一个参数

```
    function fn() {
    	var name = '我是fn里面的name'
    	console.log(this.name)
    }
    
    var name = '我是window里面的name'
    
    fn()
    fn.bind({name: '我是bind里面的name哦'})()   // 注意bind以后返回的是一个函数哦
    fn.call({name: '我是call里面的name哦'})
    fn.apply({name: '我是apply里面的name哦'})
    
    // 结果
    我是window里面的name
    我是bind里面的name哦
    我是call里面的name哦
    我是apply里面的name哦
```
复制代码

7: 箭头函数中this指向最近一层中的this，不决定于谁调用

```
    function fn() {
    	var name = '我是fn里面的name'
    	console.log(this.name)
		function fn2() {
			console.log(this.name)
		}
		
		fn2()
    }
    
    fn.call({name: '我是call里面的name哦'})
    
    //  结果
    我是call里面的name哦
    我是window里面的name
    
    function fn() {
    	var name = '我是fn里面的name'
    	console.log(this.name)
		var fn2 = () => {
			console.log(this.name)
		}
		
		fn2()
    }
    
    fn.call({name: '我是call里面的name哦'})
    
    //  结果
    我是call里面的name哦
    我是call里面的name哦
```复制代码