JavaScript：this指向问题 - 普通函数、箭头函数、普通函数里面的箭头函数 - 附带案例
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>
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_39651356/article/details/123173811
内容来源于网络，如有侵权，请联系作者删除！