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這個對象。