本文为大家带来了JavaScript中有关this偏向的基本知识,this关键词又是一个非常重要的句型结构,希望能够帮到大家。
1.前后文与this之间的关系
根据了解前后文,我们能更加清晰的搞清楚this
的偏向难题
this
的偏向能够当做便是现阶段的前后文
2.一般函数公式
让我们可以通过一个案例一起来看看什么是函数里的this
:
let colors = {
green : "翠绿色",
blue : "深蓝色",
showColors : function() {
console.log("green: " this.green " blue: " this.blue);
}}colors.showColors();let show = colors.showColors;show();
第一个导出是指绿色和蓝色,这时函数的前后文是 colors,因此this
偏向 colors
第二个导出是指 undefined 和 undefined,这时直接使用圆括号调用函数,前后文便是 window,这时this
偏向是指 window
因此,我们不难发现函数的前后文其实就是this
是由调用函数的形式确定。
比较常见的函数公式前后文状况:
- 目标打理启用它方式函数公式,则函数公式前后文就是这个打理的对象,
this
偏向这一目标obj.fun();
前后文便是 obj - 直接使用圆括号调用函数,前后文便是 window 目标,
this
偏向 window 目标
举例说明:
function fun() {
return this.a this.b;}var a = 1;var b = 2;let obj = {
a : 5,
b : fun(),
fun : fun}let res = obj.fun();console.log(res);
在 obj 里边的 b 这儿的 fun() 是直接使用圆括号调用的,因此这时的 fun() 前后文便是 window 目标,所以在这里的this
偏向 window,b = 1 2 = 3;
obj.fun() 的 fun() 是通过 obj 打理调用的,而且它的前后文便是 obj,所以在这里的this
偏向 obj,因此 res = 5 3 = 8
3.二维数组 / 类数组对象
二维数组 / 类数组对象枚举类型出函数公式开展启用,前后文就是这个二维数组 / 类数组对象
既能当做:
二维数组[字符](); 启用这一函数的前后文目标就是这样的二维数组
使我们根据事例来理解一下:
let arr = [1, 2, 3, function() {
console.log(this[0]);}];arr[3]();
这儿字符为 3 是一个函数公式,根据二维数组枚举类型出去字符为 3 的对象,随后再执行,而且它的前后文就是这样的二维数组 arr
类数组对象:
- 哪些是类数组对象 ?
全部键名为整数编码序列(从 0 逐渐),并有length
属性目标
比如:arguments
目标便是一个类数组对象,这是函数的实参目录
function fun() {
arguments[3]();}fun(1, 2, 3, function() {
console.log(this[0]);})
这儿 fun 这一函数公式被启用了,但被启用的同时还实施了传到到他自己身上的一个函数,即arguments[3]()
这一句子,于是就会导出this[0]
,这是个类数组对象枚举类型出函数公式开展启用,而且它的前后文便是arguments
,this
偏向它。
4.马上执行函数
马上执行函数(IIFE),它前后文便是 window 目标,而且它的this
偏向是指 window
使我们通过一个事例理解一下:
var a = 1;let obj = {
a : 2,
fun : (function() {
let a = this.a;
return function() {
console.log(a this.a);
}
})()};obj.fun();
obj.fun()
由上文所说,fun() 由 obj 启用,所以在这里的this
偏向 obj;
obj 里的 fun 相当于一个立即执行函数的返回值,
就等于是
obj = function() {
console.log(a this.a);}
这儿的this
偏向是指 obj,因此 this.a = 2;
在这样一个马上执行函数里边它前后文目标是 window,而且它的this
偏向 window,因此这其中的let a = this.a 的this
偏向的将会是 window 目标,因此 a = 1,而且它的传参那个地方的 a = 1;
所以最后导出 1 2 = 3
5.计时器、延时继电器调用函数
在计时器、延时继电器调用函数中,前后文目标是 window 目标,里边的this
偏向 window 目标
下面我们就来通过一个事例来理解一下:
let obj = {
a : 1,
b : 2,
fun : function() {
console.log(this.a this.b);
}}var a = 3;var b = 4;setTimeout(obj.fun, 2000);
这儿setTimeout
的调用函数是obj.fun
,是由延时继电器调用的,它将于 2s 后运作,而且它的this
偏向 window 目标,导出 7
假如我们这么写,那将导出什么 ?
let obj = {
a : 1,
b : 2,
fun : function() {
console.log(this.a this.b);
}}var a = 3;var b = 4;setTimeout(function() {
obj.fun();}, 2000);
这时,setTimeout
的第一个主要参数变成一个匿名函数,这时匿名函数的this
偏向是指 window 目标;
在匿名函数中obj.fun()
,这一fun()
是通过 obj 调用的,因此这时fun
里边的this
偏向是指 obj,因此导出 3
6.事件处理函数
事件处理函数的语义是绑定事件的DOM 原素
,this
偏向是指DOM 原素
即:
DOM原素.onclick = function() {
这儿的前后文便是 DOM原素,this偏向DOM原素};
下面我们就来通过一个事例来理解一下:
<!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>事件处理函数</title>
<style>
p {
width: 200px;
height: 200px;
float: left;
border: 1px solid #000;
margin-right: 10px;
}
</style></head><body>
<p id="box1"></p>
<p id="box2"></p>
<p id="box3"></p>
<script>
function show() {
alert("You click " this.id);
}
let box1 = document.getElementById('box1');
let box2 = document.getElementById('box2');
let box3 = document.getElementById('box3');
box1.onclick = show;
box2.onclick = show;
box3.onclick = show;
</script></body></html>
在我们点一下搭建出的三个盒子时,弹出的提示框时会导出相对应的小盒子 id
由于事件处理函数中,this
偏向的便是相对应的DOM 原素
【相关信息:javascript学习教程】
以上就是关于完全弄懂JavaScript中this偏向问题具体内容,大量欢迎关注AdminJS其他类似文章!