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

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

// 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']

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

// 案例一
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

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不知道已经结束了 就会将几行代码连接到一起，导致报错
*/

/* 
    编写箭头函数：
    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)

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

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()