JS面向對象之三【this】 (對象和函數之間的關係)

JS面向對象之三【this】 (對象和函數之間的關係)

上一篇,談了對象和對象的關係,如今咱們談談對象和函數的關係

先說結論,也就是觀點1

觀點1: JS裏函數和對象沒有關係,JS之父經過this將他們強行關聯起來

首先咱們根據場景,去理解this的出現能夠解決什麼問題。

var obj = {
        name : 'ziwei',
        sayName: function(x){
            return console.log('hello,' + x.name)
        }
    }

如今咱們不用this,咱們就只能這樣調方法
obj.sayName(obj)

可是通常而言,咱們用obj調用sayName,確定就是但願讓這個對象說本身的名字

爲了可以obj.sayName(),讓這個obj本身的傳遞進去,JS之父發明了this.

this的出現,就能夠解決obj.sayName(obj)時,不用本身傳遞obj進去,而是直接obj,sayName(),讓JS會幫你傳遞obj參數進去

你能夠理解爲JS作了一件事情,就是你每次調用函數時,都偷偷給你傳遞了一個參數,你用this就能夠拿到這個參數。

var obj = {
        name : 'ziwei',
        sayName: function(){
            return console.log('hello,' + this.name)
        }
    }
    obj.sayName()

可是這樣,其實對於新手很不友好。我obj.sayName(),根本沒傳遞參數,那他是怎麼輸出obj的name的呢?

因此JS偷偷的傳遞this參數這件事情,咱們將它顯式的展出來就好理解了。

實際上,JS就是作了這樣一件事情,顯式的指定this是obj. obj.sayName.call(obj)

回顧一下:

隱式模式: obj.sayName()
顯示模式: obj.sayName.call(obj)

觀點2: JS裏全部函數都接受2個參數,第一個this,第二個是arguments

JS函數被調用時,必定會有這2個參數

若是你用call()調用函數,就是顯式的傳遞this和arguments
若是你用()語法直接調用函數,那JS就去幫你偷偷的傳遞this。它怎麼幫你傳遞呢? 這個問題暫時無論,下面會說。

JS其實爲了用this,想了不少折中方案。
包括(1)函數調用有兩種語法 , 把函數的參數劃分爲this和arguments

一個三段論

• 論點1: JS函數的參數的值,只有在傳參時才肯定的
• 論點2: this是函數的參數
• 推論: this的值,只有在函數調用時才肯定

JS偷偷幫你傳遞參數的規則 (也就是你使用()語法調用時)

• 在全局做用域下調用函數,默認是window (這個是歷史遺留bug),或者你也能夠理解爲window對象調用的函數
• 哪一個對象調用的,這個this就指向誰
• 構造函數裏this指向構造函數的實例
• call、apply、bind都是顯式的傳遞this了,不用多說
• 箭頭函數裏沒有this,若是你非要寫一個this,那這個this跟外面的this一致

作幾個題目

這個this是誰?
function a(){
    console.log(this)
}

答案: 不肯定,this是參數,函數沒有調用,怎麼肯定參數的?

function a(){
    'use strict'
    console.log(this)
}

a()

答案: undefined, 嚴格模式下, 全局做用域下this再也不是window,而是undefiend

新手不會this的主要緣由,是不清楚函數的另外一個調用方式call(),

由於用call()就是本身傳遞this, 用()就是JS偷偷幫你傳遞this,既然是JS按照他本身的規則,偷偷給你傳遞的,你確定要懵逼搞不清的

就像手動檔和自動擋開車同樣