正经文章的地方

js——this【这个】到底是【哪个】啦_(:з」∠)_!

写js的时候总是会用到this.xxx=xxx这样的方法,还有$(this)这样的调用方法,然而this究竟是which,稍微差了点资料,但是看得各种晕,果然还是写下来比较容易理清头绪(⊙v⊙)

一、this & $(this)
this和$(this)的属性有本质上的不同,this是DOM对象而$(this)是JQuery对象。

【反正是不断点链接查谷歌的瞎比看看的扩展阅读内容喵——】
JQuery对象具体又是什么?$(“li”)是一个数组还是一个对象?这里参考了jQuery对象里的内容进行确认,用到了console.log的占位符用法将$(“li”)输出↓

console.log的占位符描述

输出结果是:
%o输出结果

可见$(“li”)是一个对象,一个属性为“length”的值为3,以及拥有属性名为“0”、“1”、“2”的三个属性,看起来像是个数组,但是实际上只是object而已,通过对属性名的特别命名来使它看起来像是个数组。

但是在使用过程中完全不觉得JQuery对象和数组有什么不同!因为数组常用的push也能使用,而且push之后输出的长度和对应每个序号属性的值也会相应变化。事实上只是因为在JQuery的源码里把push手动加进去了而已。而pop就并不能使用。

文章里还提到了建立JQuery这种类数组对象的方法,给对象加上lengh属性和splice属性就会输出的时候看起来像是个数组的样子,实际是个对象。就继续查了下这个问题,发现知乎有这个为什么在chrome中给一个对象添加length和splice属性,控制台就显示这是一个数组?

发现这是Chrome浏览器的自动判定,对于类数组对象自动在console里打印成数组的样子。
【扩展阅读部分结束汪——】

二、原生js中this的指代
通常情况下是指代离它最近的调用对象,具体参考Javascript的this用法



function useThis(){ //使用this }
useThis();

输出的是window,因为没有调用对象所以都是window的,而


function useThis(){ //使用this }
var a = useThis();

输出的this指向a


function useThis(){ //使用this }
var a = {};
a.method = useThis;

这里也是指向a

但是!也有例外!!

var Foo = {};
Foo.method = function(){
var test = function(){
console.log(this);
}
test();
};
Foo.method();

在对象的方法里有function并且function里面用到this的时候会直接指向window,所以通常会用var that = this这样的方法来处理这个神奇的问题。