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

文章目录

- this指向
this指向

参考文章： segmentfault.com/a/119000001…
<!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>
请添加图片描述