this 的指向

最新推荐文章于 2025-06-26 13:07:10 发布

weixin_33725126

最新推荐文章于 2025-06-26 13:07:10 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5bc70eebf265da0ae472b4f1

说到 this，学习 js 的小伙伴应该都不陌生，this 一般都是指向某一个对象。例如，通过构造函数实例化对象时，this 指向的就是实例化的对象。在普通的函数中，this 指向的就是 window。在学习的过程中总结了如下使用的场景。

在函数内部使用 this 这是函数的最常用的方法，此时的 this 就指向全局对象。此时调用 this.x 就是代表 window.x，输出结果为1

var x = 1
var func = function() {
    console.log(this.x)    
}
func()                            //1
复制代码

在构造函数中的 this

在我们创建对象的过程中，this 指向的就是实例化的那个对象。输出的 x 依然是 1，打印出的 this 是一个实例化后的对象。

    var  x = 1
     function Car(name){
        this.name = name;
    	this.run = function(){
    	    this.x  = 2
            console.log(this);
    	}
    }
	var car = new Car();

	car.run()              // Car {name: undefined, run: ƒ}
	console.log(x)         //  1
复制代码

在循环事件中使用

当在一组需要需要绑定事件的标签中，一般分为两步

使用 for 循环遍历元素
每一个元素绑定相应的事件

但是会有这么一个问题，当 for 循环瞬间执行完毕后，相应的元素会立刻绑定事件这没有错，但是在事件处理函数中我们要再次使用索引 i 就不可用了，我们执行事件处理函数的时刻，i 早就跳出循环了，此时我们就可以用 this 获取相应的元素。举个例子：

<button>董小姐</button>
<button>南山南</button>
<button>天空之城</button>

var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
	btns[i].addEventListener('click', function() {
		console.log(i)                       // 3,3,3
	})
}
复制代码

此时无论点谁都只会是 3，所以我们不能根据索引来获取相应的标签。怎么办呢？就可以用 this，此时 this 指向的就是点击的对应的标签。(完)

for (var i = 0; i < btns.length; i++) {
	btns[i].addEventListener('click', function() {
		console.log(this)
	})
}
复制代码

转载于:https://juejin.im/post/5bc70eebf265da0ae472b4f1