随着对js的深入学习和使用，你会发现它里面包含了很多令人困惑的机制，比如对象、闭包、原型链继承等等

1、this是啥？

简言之，this是JavaScript语言中定义的众多关键字之一，它的特殊在于它自动定义于每一个函数域内，但是this倒地指引啥东西却让很多人张二摸不着头脑。这里我们留个小悬念，希望看完这篇文章了你能回答出来this到底指引个甚。

2、this有啥用？

那边观众又该为了，既然this这么难以理解，那么为个甚还要用它呢？在for循环中，什么时候使用This.指向和不使用this呢？

通俗来讲：this就是谁调用，this的指向就是谁。 在JS中万物皆对象。

举个例子：踢足球的时候，球进对方的门，看谁最后碰到球，我方球员射门的那一脚踢到了门柱，反弹给对方球员进门，就是乌龙球。

- 在obj对象中定义一个函数，叫fun，这个是obj的属性：

1 var a = 888;

2 var obj = {

3 a: 100,

4 fun: function() {

5 //如直接对象打点调用函数：此时弹出100，说明函数上下文是obj对象本身。

6 alert(this.a); //100

7 }

8 }

9 obj.fun();

10 但如果这个函数被一个变量接收（ 让变量直接指向这个对象的方法）

11 var fn = obj.fun;

12 fn(); //这个叫()直接运行（他的this指向就是window了）

- 在IIFE中直接调用，里面的this指向都是window。

IIFE模式 (function(){})() 就是所谓的自执行体。1 var a = 888;

2 var obj = {

3 a : 100,

4 b : (function(){

5 alert(this.a);

6 })()

7 }

8 obj.b; //888//这里的this指向都是window 因为var 申明变量是挂靠在window对象下的。

- 在定时器中直接调用，里面的this指向也是window。

1 var a = 100;

2 function fn(){

3 console.log(this.a++);

4 }

5 setInterval(fn,1000) //这里的this指向都是window 因为定时器是挂靠在window对象下的。

- 注意临门一脚谁踢的，是谁最终调用那个函数，比如：

1 var a = 100;

2 var obj = {

3 a : 200,

4 fn : function(){

5 console.log(this.a++);

6 }

7 }

8 setInterval(obj.fn, 1000); //obj.fn没有()执行，是定时器调用的

9

10 var a = 100;

11 var obj = {

12 a : 200,

13 fn : function(){

14 console.log(this.a++);

15 }

16 }

17 setInterval(function(){

18 obj.fn(); //obj.fn()直接调用，上下文的this是obj

19 }, 1000);

- call()和apply()设置函数的上下文并确定this指向。

call和apply作用都一样，有两个作用：

相同：1、执行fun函数2、改变fun函数的this指向

区别：

1、区别在于函数传递参数的语法不同

call需要用逗号隔开罗列所有参数。

apply是把所有参数写在数组里面，即使只有一个参数，也必须写在数组中。

举例：

比如有一个函数叫变性函数（bianxing），它能够将自己上下文的sex属性改变。此时小明对象（xiaoming），迫切要变性，xiaoming就成为bianxing的上下文：

1 function bianxing(){

2 if(this.sex == '男'){

3 this.sex = '女'

4 }else{

5 this.sex = '男'

6 }

7 }

8 var xiaoming = {

9 name : "小明",

10 sex : "男",

11 // bianxing : bianxing

12 } //对象内加上属性变性//bianxing:bianxing 我们可以下面直接打点调用。

13 // xiaoming.bianxing() //也可以用call或者apply改变this指向。

14 bianxing.call(xiaoming);

15 bianxing.apply(xiaoming);

16 console.log(xiaoming)

17

18 //call和apply方法帮我们做了两件事：

20 // 调用bianxing函数

21 //改变bianxing函数的this指向为xiaoming

//图片

1

2

• 

3

• 

4

• 

5

• 

6

• 

7

8

9 //获取按钮 图片

10

11 var ul_lis = document.getElementsByTagName("ul")[0].getElementsByTagName("li");

12 for(var i=0;i

13 //给每一个li定义一个自定义属性名为index

14 ul_lis[i].index = i;

15

16 //点击事件

17 ol_lis[i].onclick = function(){

18 for(var j=0;j

19

20 //清空原来的图片

21 ul_lis[j].className = "";

22 }

23 //点击哪个获得哪张图片

24 this.className = "active";

25 }

因为i的值在每次循环的时候并不会被锁定，而当我们点击的时候(这动作是在循环完成后进行的，此时的i代表的是元素的总个数的值）。

我们还可以使用IIFE来执行。

总结：

综上所述：1.var、 setInterval、IIFE等都是挂靠在window对象下的 所以 this指向都是window(包括Math)。

2. 要明确this指向，执行时必须要打点 调用 （obj.fn()）。

3.要直接在对象外使用this，必须要在对象里面添加对应的属性与属性值（键值对）。

4.改变this指向可以使用call和 apply。

以上就是关于JS this指向的内容介绍，希望对大家的学习有所帮助。