对于常年使用C++,C#,Java等这些面向对象语言的程序员来说,几乎天天都和this打交道。在这些语言里,this含义非常明确,就是指向当前的对象实例,我们用起来也是相当的放心。然而,到了JavaScript这个动态语言里,this的写法没变,但是其含义却大大地不同了,下面用实例说明,使用浏览器为Firefox14.0.1.
首先,Hello World o(^▽^)o
本人从刚开始自学javascript这门灵活的编程语言到现在,也有一年多的时间了。
在这一年多的时间里,这门语言所带给我的不仅是高额的工作回报,还有很多意想不到的惊喜,让我这样一个艺术生领略编程的魅力。
从今天开始,准备每周一更我的博客,不止是分享,更是勉励自己。
OK,我们进入今天的主题,今天我们来谈谈javascript里面一个比较特殊的对象:this
接触过其他面向对象的编程语言(如:java,C,C++等)的小伙伴们可能对this非常熟悉。
不过它在javascript当中为什么会经常性的给我们造成很多麻烦呢?
我们先来说说他与其他编程语言的不同
在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例。
而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混的原因。
下面我们来看下,它在不同情况下分别是怎样一种形态
1.在全局作用域时:
这个是最好理解的,即在全局作用域下this指向window,也就是在全局作用域下,this与window是等价的:
console.log(this === window); //true
另外,由于在此时,this等价于window,所以我们在全局作用域声明的变量也会指向this:
var x = 1; console.log(this.x);//1 console.log(window.x);//1
当然,我们还有另一种声明变量的方法:
x = 0; function setNum(){ x = 1; }; console.log(this.x);//0 setNum(); console.log(this.x);//1
当声明变量时不使用 var 或者 let的话 此时相当于给全局的this添加或者改变属性值
看起来还是很简单的,不就是个等价于window的对象么。
当然,如果仅仅是这样,this或许根本就没有存在的必要了。
而this最让人头疼的部分就是它在不同的作用域下,它的形态也是截然不同的
2.当在函数中时:
到这里时,this的陷阱已经渐渐显露出来了
这里为什么说是当在函数中而不是局部作用域时,要讲这个,首先我们要清楚function是什么
在javascript中,function作为js中的一个特殊对象:函数,是有着不同的形态的
我们通常看到的:
function set(){ var x = 0; };
在这一形态下,其内部的this是与全局作用域时一样,直接指向window,所以其形态 依然等价于window。
var x = 0; function num(){ this.x = 1; } console.log(this.x);//0 num(); console.log(this.x);//1
这里就是经常容易犯得错误,很多人觉得,当this已经在一个function之中时,其目前所处位置为当前的局部作用域,所以目前指向的应该是此函数
但是,如果你将这个函数实例化(new)之后,此函数将生成一个全新的环境,此时在此实例中的this也会随之发生变化,它将指向所在实例。
num = "0"; function setThis(){ this.num = "1"; } console.log(this.num);//"0" new setThis(); console.log(this.num);//"0" console.log(new setThis().num);//1
这是因为,当实例化之后,此函数变成了一个实例对象,而其内部的this也自然而然的指向了此实例对象,如同一开始的this是指向window的对象一样指向了它所在的实例
另外,在我们写javascript的时候,我们通常还会有一种调用函数的方法,即为元素绑定事件,比如button.addEventListener(‘click', fn, false)等,如果在fn里面需要使用到this的话,那么此时this指向事件处理元素,也就是button
注意:this作为关键字,你是无法复写它的。
不知不觉,写的也好多了,其实this还有更多的形态,比如prototype,比如在html中,比如在dom事件处理程序里,由于篇幅过长,这里就不再继续进行敖述,下回我会讲到在prototype中的this
this在我的理解中作为一个指针,相应的它在prototype原型链中会有更重要的地位,不过不在我们今天的范围之内,暂不做过多的解释
以后基本会每周一更吧,作为javascript的新手,也希望写的东西可以跟更多人分享,更希望从大家的思想中总结更多的经验!
关于JavaScript中的this到底是什么(一),每周一都会给大家更新的,作为javascript的新手,希望写的东西可以和身边的朋友分享,更希望互相交流学习经验。谢谢!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 金元萱.1996-迷迷糊糊【宝丽金】【WAV+CUE】
- 齐秦《燃烧爱情》马来西亚版[WAV+CUE][1G]
- 动力火车《结伴》2024最新 [FLAC分轨][1G]
- 郑源《擦肩而过》[WAV+CUE][1.2G]
- 黑鸭子2008-江南四月天[首版][WAV+CUE]
- 黑鸭子2008-再醉一次·精选[首版][WAV+CUE]
- Elgar-Motdamour-UlfWallin,RolandPontinen(2024)[24bit-96kHz]FLAC
- 苏永康《 笑下去》 新曲+精选[WAV+CUE][1G]
- 周传雄《发觉》[WAV+CUE][1.1G]
- 证声音乐图书馆《真夏派对 x 浩室》[320K/MP3][67.19MB]
- 张镐哲.1994-无助【波丽佳音】【WAV+CUE】
- Relic.2024-浮在虛无的诗意【SEEAHOLE】【FLAC分轨】
- 群星.2001-台语(原主唱)排行总冠军黄金典藏版6CD【柯达唱片】【WAV+CUE】
- 证声音乐图书馆《真夏派对 x 浩室》[FLAC/分轨][379.1MB]
- 徐良《东西世界》[WAV+CUE][1.1G]