JavaScript基礎(chǔ) this

this

函數(shù)里面都能this, this指向是由函數(shù)執(zhí)行的方式來決定的

一命爬、函數(shù)自執(zhí)行this指向window;

function a(){
      alert( this ); //彈出window
}
a();

二土匀、無論哪種形式的事件函數(shù)锦爵,函數(shù)內(nèi)部this指向都是觸發(fā)事件的對(duì)象舱殿;

document.onclick = a; ===>彈出document

冒泡里的this

<div id='box'></div>
var oBox = document.getElementById ( 'box' );
oBox.onclick = a;      //這里點(diǎn)擊box的時(shí)候也會(huì)點(diǎn)擊document  所以會(huì)彈出2次;
document.onclick = a;    div    document

特殊情況:

一险掀、
var a = function (){
    console.log( this ); ====>指向window;
};
a();

二沪袭、
var a = function (){
    console.log( this ); ====>指向window;
};
function b(){
  a();
}
b();  

自執(zhí)行的this都是指向window

三、對(duì)象.屬性(有函數(shù)) 函數(shù)內(nèi)部this指向該函數(shù)

var oBox = document.getElementById ( 'box' );
oBox.a = function (){ //給對(duì)象屬性加函數(shù)
    console.log(this); //指向?qū)ο蟊旧恚?}
oBox.a(); <===>  (oBox.a)();

document.onclick = oBox.a; 指向document

改變this指向

call方法
1樟氢、在函數(shù)執(zhí)行階段使用冈绊,可以改變this指向;
2埠啃、.call(第一參數(shù)死宣,實(shí)參,實(shí)參霸妹,....) 第一個(gè)參數(shù)是改變this十电,后面的要傳的實(shí)參
3、都用 叹螟, 隔開

1、沒有傳參的時(shí)候

var oBox = document.getElementById( 'box' );
function a(){
    console.log( this );
}
a(); //這里指向window;
現(xiàn)在要把this改為document
a.call(document); //打印document
a.call( oBox );//打印出box台盯;

2罢绽、有傳參的時(shí)候

function a( x , y ){
    console.log( x );
    console.log( y );
    console.log( this );
}
a( 200 , 200 ) //這里this指向window
a.call( document , 200 , 200 ) //這里this指向document

3、有多個(gè)形參的時(shí)候

.call(改變this 静盅, x , y , z , i,......);// x y z i ...對(duì)應(yīng)的上面形參

4良价、其他數(shù)據(jù)類型this指向

function x( x ){
    console.log( this );
}
x( 0 ); //這里指向Number;
x( 10 ); //這里指向Number;

x( '你好' ); //這里指向String;
x( true );//這里指向Boolean;
x( [] );//這里指向數(shù)組;

x( null )//這里指向window
x( undefined )//這里指向window

null和undefined里都是指向window

apply方法
1、在函數(shù)執(zhí)行階段使用蒿叠,可以改變this指向
2明垢、apply的第一個(gè)參數(shù)代表函數(shù) this 指向
3、apply的第二個(gè)參數(shù)是一個(gè)數(shù)組市咽,數(shù)組的第一位對(duì)應(yīng)原函數(shù)的第一個(gè)形參痊银,以此類推;

1沒有傳參的時(shí)候

function a(){
      console.log( this );
}
a(); //指向window
a.apply( document )//指向document
a.apply( oBox )//指向oBox

有傳參的時(shí)候

function a( x , y ){
      console.log( this );
}
a.apply( document , [ 10 , 20 ])//第一個(gè)改變this  第二是數(shù)組    數(shù)組里的第一位是對(duì)應(yīng)的第一個(gè)形參   第二位對(duì)應(yīng)第二形參   以此類推施绎;
  這里this = document  x = 10 ; y = 20 ;

4溯革、其他數(shù)據(jù)類型this指向
apply和call一樣,第一個(gè)參數(shù)unll 谷醉、undefined時(shí)致稀,this都是指向window

對(duì)象屬性函數(shù)里的this

var oBox = document.getElementById( 'box' );
oBox.a = function (){
    console.log( this );
}
oBox.a(); ==>這里指向oBox

改變this的指向

oBox.a.call( document ) ==>指向document
oBox.a.call( Math ) ==>指向Math  數(shù)學(xué)對(duì)象

案例

<style>
    div{
        width: 200px;
        height: 200px;
        background: #000;
        transition: all 0.5s;
    }
    div#wrap{
        background: red;
    }
</style>
<body>
    <div id='box'></div>
    <div id="wrap"></div>
    <script>
        var oBox = document.getElementById( 'box' );
        var oWrap = document.getElementById( 'wrap' );

        oBox.onclick = function (){
            this.style.width = '400px';
            this.style.height = '400px';
        }
        oWrap.onclick = function (){
            this.style.width = '400px';
            this.style.height = '400px';
        }

====可以寫成
      oBox.onclick = fn;
      oWrap.onclick = fn;

      function fn(){
          this.style.width = '400px';
          this.style.height = '400px';
      }
====我們要利用傳參來改變寬高 這樣擴(kuò)展性好
      function fn( x , y ){
          console.log( this );
          this.style.width = x + 'px';
          this.style.height = y + 'px';
      }
      oBox.onclick = fn( 400 , 400 );  //這里不能這寫俱尼,加上括號(hào)函數(shù)馬上會(huì)自執(zhí)行===>這里this指向window
      oWrap.onclick = fn;

====改寫成
      function fn( x , y ){
          console.log( this );
          this.style.width = x + 'px';
          this.style.height = y + 'px';
      }
      oBox.onclick = function (){ //放在函數(shù)里面點(diǎn)擊的時(shí)候才能執(zhí)行
        fn( 400 , 400 ) //這里點(diǎn)擊后會(huì)自執(zhí)行  自執(zhí)行this都是window所以要改變this的指向
      }
      oWrap.onclick = function (){ //放在函數(shù)里面點(diǎn)擊的時(shí)候才能執(zhí)行
        fn( 400 , 400 ) //這里點(diǎn)擊后會(huì)自執(zhí)行  自執(zhí)行this都是window所以要改變this的指向
      }

====改變this的指向
      function fn( x , y ){
          console.log( this );
          this.style.width = x + 'px';
          this.style.height = y + 'px';
      }
      oBox.onclick = function (){ 
        var a = this;//這里this指向觸發(fā)函數(shù)本身
        fn.call( a , 400 , 400 ) 
      }
      oWrap.onclick = function (){ 
        var a = this; //這里this指向觸發(fā)函數(shù)本身
        fn.call( a , 500 , 800)  //改寫成這樣就可以隨便改值
      }
    </script>
</body>

注意事項(xiàng):

 function fn( x , y ){
          console.log( this );
          this.style.width = x + 'px';
          this.style.height = y + 'px';
      }
      oBox.onclick = function (){ 
        fn.call(oBox , 400 , 400 ) //這里也可以抖单,閉包問題oBox不會(huì)被回收,占用內(nèi)存,用oBox不好
      }
      oWrap.onclick = function (){ 
        fn.call( oWrap , 500 , 800) /這里也可以矛绘,閉包問題oBox不會(huì)被回收耍休,占用內(nèi)存,用oBox不好
      }


用 apply 也可以

bind方法
1蔑歌、在函數(shù)定義的時(shí)候改變this的指向
2羹应、不會(huì)幫函數(shù)執(zhí)行,call apply會(huì)幫函數(shù)執(zhí)行
3次屠、不支持IE8及以下

call和apply 
function a(){
  console.log( this );
}
document.onclick = a.call( window );//===>還沒點(diǎn)擊就執(zhí)行了  call會(huì)幫函數(shù)執(zhí)行园匹;


bind
function a(){
  console.log( this );
}
document.onclick = a.bind( window );//===>點(diǎn)擊的時(shí)候才會(huì)執(zhí)行  bind不會(huì)幫函數(shù)執(zhí)行

bind注意事項(xiàng)

1、定義一個(gè)函數(shù)的時(shí)候

function a(){
  console.log( this );
}.bind( window ) //不能直接在這里設(shè)置bind,這里是在直接定義一個(gè)a的函數(shù)劫灶;
document.onclick = a;

要在這里寫
function a(){
  console.log( this );
}
document.onclick = a.bind( window );

2裸违、匿名函數(shù)的時(shí)候

oBox.onclick = function (){
    console.log( this );
}.bind( window );
匿名函數(shù)可以直接再后面定義

function fn( a ){
    a();
}
fn(
      function (){
         console.log( this ); //彈出 數(shù)學(xué)對(duì)象 
      }.bind( Math )
)
這里把一個(gè)函數(shù)當(dāng)參數(shù)傳進(jìn)去,fn()執(zhí)行函數(shù)

不能在定義的時(shí)候改this本昏,當(dāng)函數(shù)執(zhí)行的時(shí)候才能改this指向

之前的案例可以寫成:

<body>
    <div id='box'></div>
    <div id="wrap"></div>
    <script>
        var oBox = document.getElementById( 'box' );
        var oWrap = document.getElementById( 'wrap' );
        oBox.onclick = fn.bind( oBox , 500 , 500);//這里不會(huì)產(chǎn)生閉包供汛,沒有函數(shù)套函數(shù)
        oWrap.onclick = fn.bind( oWrap , 400 , 300);//這里不會(huì)產(chǎn)生閉包,沒有函數(shù)套函數(shù)
        function fn( x , y ){
            console.log(this);
            this.style.width = x + 'px';
            this.style.height = y + 'px';
        }
    </script>

兼容寫法

if( !Function.prototype.bind ){
            Function.prototype.bind = function ( This ) {
                var bindThid = this;  //這里的this是指向調(diào)用它的
                
                //第一個(gè)arguments[0] 是this 現(xiàn)在要把參數(shù)切出來
                var arg = [].slice.call( arguments , 1);  //[].slice()利用數(shù)組來調(diào)用slice  
                                                            // slice()里面有this 利用call改變要切割的對(duì)象
                return function (  ) {
                    bindThid.apply( This , arg )
                }
            }
        }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末涌穆,一起剝皮案震驚了整個(gè)濱河市怔昨,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宿稀,老刑警劉巖趁舀,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異祝沸,居然都是意外死亡矮烹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門罩锐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奉狈,“玉大人,你說我怎么就攤上這事涩惑∪势冢” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵境氢,是天一觀的道長(zhǎng)蟀拷。 經(jīng)常有香客問我,道長(zhǎng)萍聊,這世上最難降的妖魔是什么问芬? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮寿桨,結(jié)果婚禮上此衅,老公的妹妹穿的比我還像新娘强戴。我一直安慰自己,他們只是感情好挡鞍,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布骑歹。 她就那樣靜靜地躺著,像睡著了一般墨微。 火紅的嫁衣襯著肌膚如雪道媚。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天翘县,我揣著相機(jī)與錄音最域,去河邊找鬼。 笑死锈麸,一個(gè)胖子當(dāng)著我的面吹牛镀脂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播忘伞,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼薄翅,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了氓奈?” 一聲冷哼從身側(cè)響起翘魄,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎舀奶,沒想到半個(gè)月后熟丸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡伪节,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了绩鸣。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片怀大。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖呀闻,靈堂內(nèi)的尸體忽然破棺而出化借,到底是詐尸還是另有隱情,我是刑警寧澤捡多,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布蓖康,位于F島的核電站,受9級(jí)特大地震影響垒手,放射性物質(zhì)發(fā)生泄漏蒜焊。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一科贬、第九天 我趴在偏房一處隱蔽的房頂上張望泳梆。 院中可真熱鬧鳖悠,春花似錦、人聲如沸优妙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)套硼。三九已至卡辰,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間邪意,已是汗流浹背九妈。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留抄罕,地道東北人允蚣。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像呆贿,于是被迫代替她去往敵國(guó)和親嚷兔。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • JavaScript的組成 JavaScript 由以下三部分組成:ECMAScript(核心):JavaScri...
    紋小艾閱讀 3,237評(píng)論 0 3
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line)做入,也就是一...
    悟名先生閱讀 4,153評(píng)論 0 13
  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined冒晰、Nul...
    極樂君閱讀 5,527評(píng)論 0 106
  • 去年,我來到了這個(gè)大學(xué)竟块。我看見她慈悲壶运,安靜的看著我,而我浪秘,心中滿是沸騰的火蒋情。期待,到無奈耸携,有話要講棵癣,卻又講不出來...
    貓橙閱讀 80評(píng)論 0 1
  • 總覺得男人之間的情誼是爽朗厚重帶著義氣的味道,因?yàn)樽銐虼蠖葘捜荻嵫堋D腥酥g打完架又勾肩搭背一起喝酒海吹的多的是狈谊,女人...
    萌芽叮當(dāng)閱讀 5,059評(píng)論 56 55