js對象中的this

這篇文章主要是講述js中的this是什麼？是怎麼來的？

我們首先創建一個person對象，如下：

var person = {
    name: 'wyh',
    age: 22,
    sayHi: function (name, age) {
        console.log('你好，我是' + name + '，今年' + age + '歲')
    }
}

然後調用person.sayHi()

person.sayHi(person.name, person.age)
//你好，我是wyh，今年22歲

我們得到了想要的結果，但是這個方式非常的麻煩

因為每次調用的時候sayHi方法的時候，都需要用person.xxx這樣的方式傳遞我們需要的參數

而且person對象中的sayHi方法，需要設置相應形參與之對應

我們改進一下上面的傳參方式

把self作為形參（當然也可以用其它變數名,但是self更加形象,表示自身）

然後把person對象作為實參傳入，這樣我們就不需要去管想要傳遞person的哪個屬性，因為self得到了整個person對象

var person = {
    name: 'wyh',
    age: 22,
    sayHi: function (self) {
        // 可以通過列印看到 self就是傳入的person對象
        // console.log(self);
        // Object { name: "wyh", age: 22, sayHi: sayHi() }
        console.log('你好，我是' + self.name + '，今年' + self.age + '歲')
    }
}

然後再次調用person.sayHi()

person.sayHi(person)
//你好，我是wyh，今年22歲

結果還是和我們期望的一致

但是這樣還是有些麻煩，我們最想要的是直接把person也省掉

於是JS的作者加了一個語法糖，這樣我們可以直接使用person.sayHi() 這樣的調用方式了。

但是有一個問題，如果 person.sayHi() 沒有實參，那person.sayHi 函數是如何接收到 person 的呢？

JS的作者選擇了，隱藏形參 self，然後用關鍵字 this 來訪問 self

於是我們的代碼變成了下麵這樣：

var person = {
    name: 'wyh',
    age: 22,
    sayHi: function () {
        // this隱藏了，我們可以通過列印的方式來看一下
        // console.log(this);
        // Object { name: "wyh", age: 22, sayHi: sayHi() }
        console.log('你好，我是' + this.name + '，今年' + this.age + '歲')
    }
}

我們再次調用person.sayHi()

person.sayHi()
//你好，我是wyh，今年22歲

結果依然和原來一樣，而且我們通過列印發現的確有this的存在，而且this就是我們的person對象

那這個this到底從哪裡來呢?

其實在你調用 person.sayHi() 時候，這個this就會指向person這個對象。