JavaScript中this四种绑定规则优先级比较与箭头函数中的this获取

想吃透JavaScript中this的指向问题的可以看一下上一篇文章：《5000字“水文”带你彻彻底底的看清楚JS中this的指向问题》

this绑定规则优先级

1.默认绑定的优先级最低

毫无疑问，默认规则的优先级是最低的，因为存在其他规则时，就会通过其他规则的方式来绑定this

2.显示绑定优先级高于隐式绑定

// 1.显示绑定call和apply 与 隐式绑定的比较
var obj = {
    name: 'obj',
    foo () {
        console.log(this)
    }
}

// obj.foo 表示隐式绑定，call和apply表示显示绑定，既有隐式又有显示的情况下this会指向谁呢？会指向显示绑定的对象
obj.foo.call('abc') // [String: 'abc']
obj.foo.apply('abc') // [String: 'abc']

// 2.显示绑定 bind 与 隐式绑定的比较

function foo2 () {
    console.log(this)
}
var obj2 = {
    name: 'obj2',
    bar: foo2.bind('abc') // 使用显示绑定bind
}

obj2.bar() // [String: 'abc']

3.new绑定优先级高于隐式绑定

//  new 绑定与隐式绑定比较
var obj = {
    name: 'obj',
    foo: function () {
        console.log(this)
    }
}
//  new 绑定  obj.foo()表示隐式绑定，二者谁的优先级会更高呢？
var fn = new obj.foo() // foo {}  
// 很明显 new绑定的优先级更高

4.new绑定优先级高于显示绑定（bind）

• new 绑定和call、apply是不允许同时使用的，所以不存在谁的优先级更高
• new绑定可以和 bind 一起使用，new绑定优先级更高
  举个例子进行演示，示例代码如下：

//  new 绑定与显示绑定比较
function foo () {
    console.log(this)
}

// 显示绑定bind
var fn = foo.bind('abc')

var bar = new fn() // foo {}  输出结果并没有指向abc 而是指向了foo  所以new绑定的优先级高

// 需要注意的是new绑定不能与call和apply一起使用，所以只和bind进行了比较

5.优先级小结

new绑定 > 显示绑定(apply/call/bind) > 隐式绑定> 默认绑定(独立函数调用)

6.两种特殊绑定

(1).特殊绑定——忽略显示绑定

如果把null或者undefined作为this的绑定对象传入call、apply或者bind，这些值在被调用时会被忽略，实际应用的是默认绑定规则。
示例代码如下：

// 案例一
function foo () {
  console.log(this)
}


foo.call('123') // [String: '123']
foo.call(undefined)// Window 
foo.call(null) // Window  

var bar = foo.bind(null)
bar() // Window 
// apply/call/bind 显示绑定传入的this值为null或者undefined时，this将自动绑定成为全局对象

// 案例二：内置函数使用call传入null
var result = Math.max.call(null, 1, 1, 5.8, 23)
console.log(result);//判断最大值输出结果为：23

(2).特殊绑定——间接引用

有可能（有意或无意地）创建一个函数的“间接引用”，在这种情况下，调用这个函数会应用默认绑定规则。

间接引用最容易在赋值时发生，如下示例代码所示：

var obj1 = {
    name: 'obj1',
    foo: function () {
        console.log(this)
    }
}

var obj2 = {
    name: 'obj2'
}

// 写法一：
    obj2.fn = obj1.foo  // 将obj1中的foo函数绑定到obj2的fn上
    obj2.fn() //输出结果为： { name: 'obj2', fn: [Function: foo] }

// 写法二：
    (obj2.fn = obj1.foo)() //输出结果为： Window

/* 
解释一下：
    
*/

/* 
    如果执行的时候报错了：Cannot set property 'fn' of undefined
    是因为在上一个var obj2 的时候结尾没有加分号，js不知道已经结束了 就会将几行代码连接到一起，导致报错

*/

这里对上述代码进行解释说明：
(obj2.fn = obj1.foo)的结果是一个值，并没有和一个对象有联系，所以后面加一个（）进行调用的时候，还是属于默认绑定（直接调用），this指向全局对象

7.箭头函数

箭头函数是ES6之后增加的一种编写函数的方法，并且它比函数表达式更加简洁：

• 箭头函数不会绑定 this、arguments属性；
• 箭头函数不能作为构造函数来使用（不能和new一起使用，会抛出错误异常）；

长话短说直接上代码,如下示例代码展示了 简单的箭头函数、高阶函数中箭头函数的使用、箭头函数的三种简写方式：

/* 
    编写箭头函数：
    1、():参数
    2、=>:箭头
    3、{}：大括号包含函数的执行体
*/

// 1.简单的编写箭头函数
var foo = (num1, num2) => {
    return num1 + num2
}
console.log(foo(2, 3))  // 5

// 2.高阶函数在使用时，也可以传入箭头函数
var nums = [1, 4, 6, 9]
nums.map((item, index, arr) => {
    console.log(item, index, arr)
})


// 3.一些常见的简写方式
// 简写一：如果参数只有一个的时候，() 可以省略
nums.map(item => {
    console.log(item)
})

// 简写二：如果函数执行体只有一行代码的话，大括号{}可以省略,省略后js会默认将这行代码的执行结果作为返回值
var newNums = nums.filter(item => item % 2 === 0)
console.log(newNums) // [ 4, 6 ]

/* 
    小案例：
    要求：将nums中的偶数找到，并每个值乘以10，最后求和
    做法：使用filter、map、reduce
*/
var result = nums.filter(item => item % 2 === 0)
    .map(item => item * 10)
    .reduce((previousValue, item) => previousValue + item)
console.log(result) // 100  

// 简写三：如果一个箭头函数，只有一行代码，并且返回一个对象，可以如下所示的写法：省略大括号之后需要在执行体后加上一个小括号，否则js不知道这是一个对象会抛出错误异常
var person = () => ({ name: '张三', age: 18 })
console.log(person)

8.箭头函数与this的恩恩怨怨(箭头函数中this的获取)

(1).首先测试一下箭头函数中的this指向

箭头函数不会绑定 this、arguments属性，那如果在它里面访问this会的到什么值呢？
示例代码如下：

// 1.测试箭头函数中this的指向
var foo = () => {
    console.log(this)
}

/* 
以下三种函数调用的结果都一样：
    * node 环境下，this指向都是：{}
    * 浏览器环境下，指向全局作用域Window
*/
foo()
var obj = { fn: foo }
obj.fn()
foo.call('abc')

(2).超级实用的应用场景

要求：发送网络清求，将请求的结果存储到obj对象的Data数组中。

• 解决方案一：

var obj = {
    Data: [],
    getData () {
        // 发送网络清求，将结果放入上面的Data数组中。这里使用setTimeout模拟
        /* 学习箭头函数之前的解决方案 */
        var _this = this
        setTimeout(function () {
            var result = [1, 2, 3, 4]
            //this.Data = result  // 此句是行不通的 因为setTimeout中的this指向的是Window

            _this.Data = result  // 通过闭包引用上面的_this 
        }, 2000)
    }
}

// 隐式绑定
obj.getData()

• 解决方案二：

var obj = {
    Data: [],
    getData () {
        // 发送网络清求，将结果放入上面的Data数组中。这里使用setTimeout模拟

        /* 使用箭头函数的解决方案 */
        setTimeout(() => {
            var result = [1, 3, 5, 7]
            this.Data = result // 函数作用域中没有this会指向上一层作用域getData中的this，下文obj.getData()通过隐式绑定this指向obj
            console.log(this)
        }, 2000);
    }
}

// 隐式绑定
obj.getData()