this,this,再次討論javascript中的this,超全面(經(jīng)典)
JavaScript 是一種腳本語言,因此被很多人認為是簡單易學的。然而情況恰恰相反,JavaScript 支持函數(shù)式編程、閉包、基于原型的繼承等高級功能。本文僅采擷其中的一例:JavaScript 中的 this 關鍵字,深入淺出的分析其在不同情況下的含義,形成這種情況的原因以及 Dojo 等 JavaScript 工具中提供的綁定 this 的方法??梢赃@樣說,正確掌握了 JavaScript 中的 this 關鍵字,才算邁入了 JavaScript 這門語言的門檻。
至于js中this這個東西,好多淫解釋過了,看起來好高端的樣子,不曉得你看懂了木有?
先引用比較高端的,腳本之家里 的, yes this
好了,下面加上鄙人比較挫的解釋
論點: this 不是變量,不是屬性,不能為其賦值,它始終指向調(diào)用它的對象
感覺還TM太虛了,只要記住最重要的一條即可 ”它始終指向調(diào)用它的對象“ ,所以找到調(diào)用this的對象,就知道this到底指向誰了
1、
alert(this);
瞅瞅,彈出來的是么子,要么是”object window“ ,要么 "object" 總之就對象了,是那個對象呢?
alert(this === window);
結果為'true' 所以了,現(xiàn)在調(diào)用它的對象是window了
2、
var test = function(){
alert(this);
}
test();
猜猜上面彈出什么,是不是和"alert(this)" 這句一樣的
var test = function(){
alert(this === window);
}
test();
運行上面的代碼,是不是彈出了'true' ?
事情就這樣完了?
要這么簡單的話,何必那么多人都去論述這個鳥了?
3、
再來
var test = function(){
alert(this === window);
}
new test();
哎哎,這次咋成'false'呢?
記住”this 始終指向調(diào)用它的對象“,第”1、“處調(diào)用該段代碼的直接對象是全局對象,即"window" ;第”2、“處雖然是函數(shù),但是調(diào)用其的仍然是”window“(不要弄混了,函數(shù)雖然是對象,但是調(diào)用它的是另一個對象);第”3、“處,使用了”new“ 這時其實已經(jīng)發(fā)生變化了,這是一個構造函數(shù),構造函數(shù)創(chuàng)建時創(chuàng)建了一個新的空的對象,即”new test()“創(chuàng)建了一個新的對象,然后再由這個對象指向函數(shù)"test"中的代碼,因此此時this不在是window對象,而是該構造函數(shù)創(chuàng)建的新對象。
4、
var test ={
'a':1,
'b':function(){
alert(this === test)
}
}
test.b();
有了上面的論點,這下一下子清楚了吧!
5、
var test ={
'a':1,
'b':function(){
alert(this === test)
}
}
var test1 = test;
test1.b();
so, 你不會認為結果為"false"吧,錯了,雖然'test1'的值為'test' 但是'test1'不還是'test'對象么,它有新產(chǎn)生對象,你暫且理解為引用的了,兩個都指向一個對象,奉上下面一段代碼為證
var test ={
'a':1,
'b':function(){
alert(this === test)
}
}
var test1 = test;
test.a = 2;
alert(test1.a);
如果彈出了”1“,你來罵我
6、再整個復雜的
var test ={
'a':1,
'b':{
'b1':function(){
alert(this === test);
}
}
}
test.b.b1();
這是"true"還是"false"呢?
按照上面的理論,這時"this"不再直接被'test'調(diào)用了,而是被'test.b' 調(diào)用, 奉上下面一段代碼為證
var test ={
'a':1,
'b':{
'b1':function(){
alert(this === test.b);
}
}
}
test.b.b1();
7、好再整個復雜點的
var test = function(){
var innerTest = function(){
alert(this === test);
}
innerTest();
}
test();
你不會認為彈出"true"吧,不是按照上面的理論'innerTest'是被'test'調(diào)用的,然后'this'就指向'test'嗎?
額,錯就錯在是誰調(diào)用的'innerTest', 其實這種函數(shù)都是'window'對象調(diào)用的,及時你嵌套一千層,調(diào)用各個函數(shù)的都是'window'對象,奉上下面這段代碼為證
var test = function(){
var innerTest = function(){
alert(this === window);
var innerTest1 = function(){
alert(this === window);
}
innerTest1();
}
innerTest();
}
test();
8、再來一段特殊的
var test = function(){
alert(this === window);
}
var test1 = {
}
test.apply(test1);
這個我覺得大家都不會猜錯,該函數(shù)的作用就是”調(diào)用一個對象的一個方法,以另一個對象替換當前對象“ 所以了'window' 對象已經(jīng)被替代為'test1',自然為'false'了,奉上如下代碼以為證明
var test = function(){
alert(this === test1);
}
var test1 = {
}
test.apply(test1);
那么諸如'call'之類的也就相似了
9、再來一個原型的繼承,區(qū)別于字面量的繼承
var test = function(){
}
var my = function(){
this.a = function(){
alert(this === mytest2);
}
}
var mytest = new my();
test.prototype = mytest;
var mytest2 = new test();
mytest2.a();
10、還剩下些什么了,可能就是'dom'對象了
<script>
var mytest = function(context){
alert(context.getAttribute('id'));
alert(this === window);
}
</script>
<div id="test" onclick="mytest(this)">aaaa</div>
看了上面的應該了解了吧,里面的'this'分別代表神馬
相關文章
利用JavaScript中的高階函數(shù)和閉包實現(xiàn)命令模式
命令模式提供了一種優(yōu)雅的解決方案,使得我們能夠靈活地封裝和管理代碼操作,所以本文將為大家介紹命令模式的概念、應用場景以及在JavaScript中的實現(xiàn)方式,需要的可以參考一下2023-06-06
JS實現(xiàn)環(huán)形進度條(從0到100%)效果
這篇文章主要介紹了JS實現(xiàn)環(huán)形進度條(從0到100%)效果的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-07-07

