JavaScript中this指向方法实例分析

这篇文章主要讲解了“JavaScript中this指向方法实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中this指向方法实例分析”吧！

创新互联是一家专业提供中牟企业网站建设,专注与成都网站设计、成都做网站、H5响应式网站、小程序制作等业务。10年已为中牟众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

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.&ensp;数组 / 类数组对象

数组 / 类数组对象枚举出函数进行调用，上下文是这个数组 / 类数组对象

即可以看成：

数组[下标](); 调用这个函数的上下文对象就是这个数组

让我们通过例子来理解一下：

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.&ensp;立即执行函数

立即执行函数（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.&ensp;定时器、延时器调用函数

在定时器、延时器调用函数中，上下文对象是 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.&ensp;事件处理函数

事件处理函数的上下文是绑定事件的DOM 元素，this指向的是DOM 元素

即：

DOM元素.onclick = function() {

这里的上下文就是 DOM元素，this指向DOM元素

};

让我们来通过一个例子来理解一下：

<!DOCTYPE html>

<head>

<title>事件处理函数</title>

<style>

div {

width: 200px;

height: 200px;

float: left;

border: 1px solid #000;

margin-right: 10px;

}

</style>

</head>

<body>

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中this指向方法实例分析”的内容了，经过本文的学习后，相信大家对JavaScript中this指向方法实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

网页标题：JavaScript中this指向方法实例分析
链接分享：https://www.cdcxhl.com/article46/gcjdeg.html

成都网站建设公司_创新互联，为您提供网站导航、企业建站、、网站营销、网站内链、全网营销推广

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容