this指向

参考文章： https://segmentfault.com/a/1190000011194676

口号1. 普通function函数：谁调用this就是谁 == 可以受call、apply、bind改变this指向2. 箭头函数=>：箭头函数最外层爹是谁，箭头函数里面的this就是谁 == 不受call、apply、bind改变this指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="G:\VsCode\开源\jquery-3.5.1\jquery-3.5.1.min.js"></script>
</head>
<body>
</body>
<script>
    var meal = "window对象的meal"
    const dinner = {
        meal: 'dinner对象的meal',
        test: function (a, b) {
            console.log(this, '==', this.meal, '==', a, '==', b);
        },
        test2: (a, b) => {
            //此箭头函数最外层即dinner，dinner的爹是谁即是window
            console.log(this, '==', this.meal, '==', a, '==', b);
        },
        test3: function (a, b) {
            return (a,b) => {
                //此箭头函数最外层即是test3，由test3被谁调用确定这里面的this是谁
                console.log(this, '==', this.meal, '==', a, '==', b);
            }
        }
    }
    console.log("===========================================================")
    console.log("===========普通函数 谁调用this就指向谁============")
    console.log("===========隐式指定this指向============")
    dinner.test(1, 2);
    var fun = dinner.test;
    fun(1, 2);
    console.log("===========call显示指定this指向（函数调用）============")
    fun.call(window, 1, 2)
    fun.call(dinner, 1, 2)
    console.log("===========apply显示指定this指向（函数调用）============")
    fun.apply(window, [1, 2])
    fun.apply(dinner, [1, 2])
    console.log("===========bind强制指定this指向且返回新的函数对象============")
    var fun3 = fun.bind(dinner)
    fun3(1, 2);
    var fun2 = fun.bind(window)
    fun2(1, 2);
    console.log("===========================================================")
    console.log("===========箭头函数 this仅指向最外层的作用域，不受call、bind、apply影响 == obj的爹是window============")
    console.log("===========隐式指定this指向============")
    dinner.test2(1, 2);
    var fun = dinner.test2;
    fun(1, 2);
    console.log("===========call显示指定this指向（函数调用）============")
    fun.call(window, 1, 2)
    fun.call(dinner, 1, 2)
    console.log("===========apply显示指定this指向（函数调用）============")
    fun.apply(window, [1, 2])
    fun.apply(dinner, [1, 2])
    console.log("===========bind强制指定this指向且返回新的函数对象============")
    var fun3 = fun.bind(dinner)
    fun3(1, 2);
    var fun2 = fun.bind(window)
    fun2(1, 2); 
    
    
    console.log("===========================================================")
    console.log("===========普通函数里面的箭头函数 this仅指向最外层的作用域，不受call、bind、apply影响============")
    console.log("===========隐式指定this指向============")
    dinner.test3(1, 2)();
    var fun = dinner.test3(); //由于dinner调用，故dinner.test3里面的箭头函数的爹是dinner  【这句等价于下面】
    // var fun = dinner.test3.call(dinner)
    fun(1, 2);
    var funWindow = dinner.test3;
    funWindow = funWindow(); //由于window调用，故dinner.test3里面的箭头函数的爹是window  【这句等价于下面】
    // funWindow = dinner.test3.call(window)
    funWindow(1, 2);
    console.log("===========call显示指定this指向（函数调用）============")
    fun.call(window, 1, 2)
    fun.call(dinner, 1, 2)
    funWindow.call(dinner,1,2)
    funWindow.call(window,1,2)
    console.log("===========apply显示指定this指向（函数调用）============")
    fun.apply(window, [1, 2])
    fun.apply(dinner, [1, 2])
    funWindow.apply(dinner,[1,2])
    funWindow.apply(window,[1,2])
    console.log("===========bind强制指定this指向且返回新的函数对象============")
    var fun3 = fun.bind(dinner)
    fun3(1, 2);
    var fun2 = fun.bind(window)
    fun2(1, 2);    
    var fun4 = funWindow.bind(dinner)
    fun4(1, 2);
    var fun5 = funWindow.bind(window)
    fun5(1, 2);       
</script>
</html>

JavaScript：this指向问题 - 普通函数、箭头函数、普通函数里面的箭头函数 - 附带案例

this指向

相关文章

热门标签

最新文章