this评甜、call和apply

this

JavaScript里面的this總是指向一個對象撼玄,而具體指向哪個對象是在運行時基于函數(shù)的執(zhí)行環(huán)境動態(tài)綁定的,而非函數(shù)被聲明時的環(huán)境蜈漓。

大致分為下面四種:

  • 作為對象的方法調(diào)用
  • 作為普通函數(shù)調(diào)用
  • 構(gòu)造器調(diào)用
  • Function.prototype.call 或 Function.prototype.apply調(diào)用

1.作為對象的方法調(diào)用

  var obj = {
            name : 'zs',
            getName : function(){
                console.log(this === obj);//true
                console.log(this.name);//zs
            }
        };
        obj.getName();

2.作為普通函數(shù)調(diào)用

  var name = 'zs';
        var getName = function(){
            return this.name;
        }
        console.log(getName());// return zs   這里的調(diào)用等同于window.getName() 所以this指向window對象

  var age = 18;
        var Obj = {
            age : 22,
            getAge : function(){
                return this.age;
            }
        };
        var getAggetAgee = Obj.getAge;
        console.log(getAge());// return 18 這里也是在全局環(huán)境下面調(diào)用getAge,所以this也是指向window

//大致來說穆桂,this指向當(dāng)前函數(shù)被調(diào)用的那個環(huán)境。上面兩個方法都是在window下面被調(diào)用融虽,所以this就指向了window

還有一種情況是享完,我們有時需要在回調(diào)函數(shù)里面使用this,但這個時候this往往不是我們預(yù)期的那個樣子有额。這個時候般又,我們可以使用一個變量先保存this

  var obj = {
            name : 'zs',
            getName : function(){
                return this.name;
            },
            bindEvent : function(){
                var that = this;
                document.getElementById('dom').addEventListener('click',function(){
                    console.log(that.getName());
                })
            }
        }
        obj.bindEvent();//this.getName is not a function  這里的this指向了這個dom元素,所以找不到getName方法
//可以使用下面這種方法解決
      bindEvent : function(){
                var that = this;
                document.getElementById('dom').addEventListener('click',function(){
                    console.log(that.getName());
                })
            }

3.構(gòu)造器調(diào)用
JavaScript中沒有類巍佑,但是可以通過構(gòu)造器創(chuàng)建對象茴迁,同時也提供了new運算符,使的構(gòu)造器看起來更像一個類萤衰。
在JS中堕义,除了瀏覽器提供的一些內(nèi)置函數(shù),大部分JavaScript函數(shù)都可以當(dāng)做構(gòu)造器使用脆栋。構(gòu)造器的外表和普通函數(shù)基本一模一樣胳螟,區(qū)別主要在于被調(diào)用的方式。當(dāng)使用new運算符調(diào)用函數(shù)時筹吐,這個函數(shù)就可以理解為構(gòu)造函數(shù)(其實只是構(gòu)造調(diào)用,和普通的函數(shù)還是一樣的秘遏,只是調(diào)用的方式不一樣)丘薛,該函數(shù)總會返回一個對象,通常情況下邦危,構(gòu)造器里的this就指向返回的這個函數(shù)

  var MyFunc = function(){
            this.name = 'zs';
        }
        var func = new MyFunc();
        console.log(func.name);//return  zs

需要注意:如果使用new調(diào)用構(gòu)造函數(shù)時洋侨,構(gòu)造函數(shù)主動返回了一個object類型的對象舍扰,那么此次的運算結(jié)果最終會返回這個對象,而不是我們之前期待的this

var MyFunc = function(){
            this.name = 'zs';
            return {
                name : 'ls'
            }
        }

        var func = new MyFunc();
        console.log(func.name);//return  ls

如果構(gòu)造器不顯示的返回任何數(shù)據(jù)希坚,或者是返回一個非對象類型的數(shù)據(jù)边苹,就不會造成上面的問題(例如:上面那里如果是 return '123',是不會造成問題的)

4.Function.prototype.call和Function.prototype.apply調(diào)用
和普通的函數(shù)調(diào)用相比,call和apply可以動態(tài)的改變傳入的this,他們的區(qū)別主要在接受的參數(shù)格式上
如果傳入的第一個參數(shù)為null裁僧,函數(shù)體內(nèi)的this會指向默認(rèn)的宿主對象个束,瀏覽器里面是window
call(this,arg1,arg2...)
apply(this,[arg1,arg2])

  var obj = {
            name : 'zs',
            getName : function(){
                return this.name;
            }
        };

        var anotherObj = {
            name : 'ls'
        };

        console.log(obj.getName());//return zs
        console.log(obj.getName.call(anotherObj));// return ls

Math.max.apply(null,[1,2,3,4]);//4
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市聊疲,隨后出現(xiàn)的幾起案子茬底,更是在濱河造成了極大的恐慌,老刑警劉巖获洲,帶你破解...
    沈念sama閱讀 217,657評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件阱表,死亡現(xiàn)場離奇詭異,居然都是意外死亡贡珊,警方通過查閱死者的電腦和手機(jī)最爬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來门岔,“玉大人爱致,你說我怎么就攤上這事」掏幔” “怎么了蒜鸡?”我有些...
    開封第一講書人閱讀 164,057評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長牢裳。 經(jīng)常有香客問我逢防,道長,這世上最難降的妖魔是什么蒲讯? 我笑而不...
    開封第一講書人閱讀 58,509評論 1 293
  • 正文 為了忘掉前任忘朝,我火速辦了婚禮,結(jié)果婚禮上判帮,老公的妹妹穿的比我還像新娘局嘁。我一直安慰自己,他們只是感情好晦墙,可當(dāng)我...
    茶點故事閱讀 67,562評論 6 392
  • 文/花漫 我一把揭開白布悦昵。 她就那樣靜靜地躺著,像睡著了一般晌畅。 火紅的嫁衣襯著肌膚如雪但指。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,443評論 1 302
  • 那天,我揣著相機(jī)與錄音棋凳,去河邊找鬼拦坠。 笑死,一個胖子當(dāng)著我的面吹牛剩岳,可吹牛的內(nèi)容都是我干的贞滨。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼拍棕,長吁一口氣:“原來是場噩夢啊……” “哼晓铆!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起莫湘,我...
    開封第一講書人閱讀 39,129評論 0 276
  • 序言:老撾萬榮一對情侶失蹤尤蒿,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后幅垮,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體腰池,經(jīng)...
    沈念sama閱讀 45,561評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,779評論 3 335
  • 正文 我和宋清朗相戀三年忙芒,在試婚紗的時候發(fā)現(xiàn)自己被綠了示弓。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,902評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡呵萨,死狀恐怖奏属,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情潮峦,我是刑警寧澤囱皿,帶...
    沈念sama閱讀 35,621評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站忱嘹,受9級特大地震影響嘱腥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拘悦,卻給世界環(huán)境...
    茶點故事閱讀 41,220評論 3 328
  • 文/蒙蒙 一齿兔、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧础米,春花似錦分苇、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蘑斧,卻和暖如春糟红,著一層夾襖步出監(jiān)牢的瞬間艾帐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評論 1 269
  • 我被黑心中介騙來泰國打工盆偿, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人准浴。 一個月前我還...
    沈念sama閱讀 48,025評論 2 370
  • 正文 我出身青樓事扭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親乐横。 傳聞我的和親對象是個殘疾皇子求橄,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,843評論 2 354

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