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這個物件，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169445.html

標籤：JavaScript

上一篇：JS基礎語法---do-while回圈 + 總結while回圈和do-while回圈

下一篇：vuePress自動部署到Github Page腳本踩坑