【Web前端】Js 中的 this 和 jQuery 中的 this

前言

在学到 jQuery 这一块的时候，出现了 jQuery 的 this，在这里记录一下与 Js 中的 this 的区别。

Js 中的 this

这里指的是当前的上下文对象，简单的说就是方法/属性的所有者。

下面例子中，imooc 是一个对象，拥有 name 属性与 getName 方法,在 getName 中 this 指向了所属的对象 imooc：

var imooc = {
name:"慕课网",
getName:function(){
//this,就是imooc对象
return this.name;
}
}
imooc.getName(); //慕课网

当然在 JavaScript 中 this 是动态的，也就是说这个上下文对象都是可以被动态改变的(可以通过 call,apply 等方法)，具体的大家可以查阅相关资料。

同样的在 DOM 中 this 就是指向了这个 html 元素对象，因为 this 就是 DOM 元素本身的一个引用。

假如给页面一个 P 元素绑定一个事件:

p.addEventListener('click',function(){
//this === p
//以下两者的修改都是等价的
this.style.color = "red";
p.style.color = "red";
},false);

通过 addEventListener 绑定的事件回调中，this 指向的是当前的 dom 对象，所以再次修改这样对象的样式，只需要通过 this 获取到引用即可。

this.style.color = "red"

但是这样的操作其实还是很不方便的，这里面就要涉及一大堆的样式兼容，如果通过 jQuery 处理就会简单多了，我们只需要把 this 加工成 jQuery 对象。

jQuery 中的 this

$('p').click(function(){
//把p元素转化成jQuery的对象
var $this= $(this)
$this.css('color','red')
})

通过把 $() 方法传入当前的元素对象的引用this，把这个 this 加工成 jQuery 对象，我们就可以用 jQuery 提供的快捷方法直接处理样式了。

总结

this，表示当前的上下文对象是一个 html 对象，可以调用 html 对象所拥有的属性和方法。

$(this),代表的上下文对象是一个 jquery 的上下文对象，可以调用 jQuery 的方法和属性值。

感谢慕课网