JavaScript中this使用总结

拼搏现实的明天。 2022-07-15 11:19 175阅读 0赞

this是在函数执行的过程中自动创建的一个指向一个对象的内部指针。确切的说，this并不是一个对象，而是指向一个已经存在的对象的指针，也可以认为是this就是存储了某个对象的地址。

this的指向不是固定的，会根据调用的不同，而指向不同的地方。

可以从两个大的方方向来分析：

# 一、一些认知的澄清 #

## 1.1 对在全局作用域中定义的变量和函数的进一步认识 ##

永远记住：只要是在全局作用域声明的任何变量和函数默认都是作为window对象的属性而存在的.

> 看下面的代码：

<script type="text/javascript"> var num = 10; function sum () { alert("我是一个函数"); } alert(window.num); // 10 window.sum(); // 我是一个函数 // 在调用的时候window对象是可以省略的。 </script>

## 1.2 构造函数和非构造函数的澄清 ##

在JavaScript中构造函数和非构造函数没有本质的区别。**唯一的区别只是调用方式的区别。**

*  使用new 就是构造函数
 *  直接调用就是非构造函数

> 看下面的代码：

<script type="text/javascript"> function Person () { this.age = 20; this.sex = "男"; } //作为构造函数调用,创建一个对象。 这个时候其实是给p添加了两个属性 var p = new Person(); alert(p.age + " " + p.sex); //作为普通函数传递，其实是给 window对象添加了两个属性 Person(); alert(window.age + " " + window.sex); </script>

# 二、在全局作用域中使用this #

> 全局作用域中使用this，也就是说不在任何的函数内部使用this，那么这个时候this就是指的 **window**
> 
> 看下面的代码：

<script type="text/javascript"> //向this对象指代的对象中添加一个属性 num， 并让属性的值为100 this.num = 100; // 因为this就是window，所以这时是在修改属性num的值为200 window.num = 200; alert(this === window); // true this就是指向的window对象，所以是恒等 alert(this.num); //200 alert(window.num); //200 </script>

# 三、在函数中this的指向 #

## 3.1 非构造函数中的this指向 ##

> 非构造函数中this指向的就是 **调用这个方法的那个对象**

<script type="text/javascript"> function test() { alert(this == window); this.age = 20; } test(); //其实是 window.test(); 所以这个时候test中的this指向window </script>

> 看下面的代码：

<script type="text/javascript"> var p = { age : 20, sex : "女", sayAge: function (argument) { alert(this.age); } } p.sayAge(); //调用对象p的方法sayAge() 所以这个时候this指的是 p 这个对象 </script>

> 再看下面的代码：

<script type="text/javascript"> var p = { age : 20, sex : "女", sayAge: function (argument) { alert(this.age); alert(this === p); //true } } var again = p.sayAge; //声明一个变量(方法)，把p的方法复制给新的变量 //调用新的方法： 其实是window.again(). 所以 方法中的this指代的是window对象，这个时候age属性是undefined // this和p也是不相等的。 again(); </script>

> **综上：this的指代和代码出现的位置无关，只和调用这个方法的对象有关。**

## 3.2 构造方法中的this指向 ##

> 构造方法中的this指代的要未来要创建的那个对象。

<script type="text/javascript"> function Person () { this.age = 20; return this; //作为构造函数的时候，这个行代码默认会添加 } var p1 = new Person(); //这个时候 Person中的this就是指的p1 var p2 = new Person(); //这是时候 Person中的this就是知道p2 </script>

> 多了解一点：其实用new调用构造函数的时候，构造函数内部其实有个默认的 return this; 这就是为什么this指代那个要创建的对象了。

# 四、改变this的指向 #

> 在JavaScript中，允许更改this的指向。
> 
> 通过call方法或apply方法

<script type="text/javascript"> var age = 20; function showPropertyValue (propertyName) { alert(this[propertyName]); } //使用call的时候，第一个参数表示showPropertyValue中的this的执行，后面的参数为向这个函数传的值。 //注意一点：如果第一个参数是null，则this仍然是默认的指向。 showPropertyValue.call(null, "age"); showPropertyValue.call(this, "age"); showPropertyValue.call({age:50}, "age") </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript学习总结——this对象

> 在JavaScript中，this关键字是动态绑定的，或称为运行期绑定，这极大地增强的我们程序的灵活性，同时也给初学者带来了很多困惑。本文总结了this的几个使用场景和常见

r囧r小猫/ 2022年09月23日 15:56/ 0 赞/ 148 阅读

相关 javascript中this

下面都是个人理解以及查找的网上的资料,如有不对的地方请指正 This this 始终指向调用它的对象 ,都没有对象调用时就指向window 另外就是this一般都

た入场券/ 2022年08月22日 06:26/ 0 赞/ 278 阅读

相关 JavaScript中this使用总结

this是在函数执行的过程中自动创建的一个指向一个对象的内部指针。确切的说，this并不是一个对象，而是指向一个已经存在的对象的指针，也可以认为是this就是存储了某个对象

拼搏现实的明天。/ 2022年07月15日 11:19/ 0 赞/ 176 阅读

相关 javascript中的this的学习总结

this 学习的总结 1、普通的function函数里面的this指向的是函数外的全局变量 var name = "tom"; function getN

桃扇骨/ 2022年06月03日 06:55/ 0 赞/ 207 阅读

相关 JavaScript中的this

this（上下文对象） \- 我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。使用this来引用上下文对象，根据函数的调用形式不同，this的

短命女/ 2022年05月18日 04:24/ 0 赞/ 295 阅读

相关 javascript中this的总结

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。 1、纯粹函数调用。 funct

柔情只为你懂/ 2022年05月16日 04:54/ 0 赞/ 264 阅读

相关【前端面试】对JavaScript中this的理解总结

setTimeout、setInterval中的this，严格模式和非严格模式下的this，箭头函数中的this，函数独立调用中的this 1.setTimeout、set

àì夳堔傛蜴生んèń/ 2022年04月13日 14:23/ 0 赞/ 256 阅读

相关 JavaScript中this的使用方法总结

JavaScript中this的使用方法总结在JavaScript中，this的使用分为四种场景，具体请参考[阮一峰老师关于this的讲解][this] 第一种情况

叁歲伎倆/ 2022年02月24日 06:14/ 0 赞/ 539 阅读

相关 JavaScript中 this 关键字

同步时的情况一，单独使用 this，它指向全局(Global)对象，即window对象。 ![20200403211400856.png][]![2020040

墨蓝/ 2021年07月25日 15:51/ 0 赞/ 520 阅读

相关总结JavaScript中this绑定方式

this在默认的绑定非严格模式下指向window，严格模式下指向undefined，比如下面的函数foo在非严格模式下

小灰灰/ 2020年04月21日 05:56/ 0 赞/ 922 阅读