iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
Modern Web

JavaScript Note系列 第 17

This

很多初學者,對於this究竟是指向誰,常常搞不清楚。
this會根據所在位置,而指向不同的目標,以下就幾種常見的情況來一一討論:

  • 指向全域物件window
var x = 'Hello World';
function getValue() {
    console.log(this.x);
}
getValue(); //Hello World

這裡的this,指的是全域物件,window,在全域環境宣告變數,也意味著,在全域物件,增加屬性值。
https://ithelp.ithome.com.tw/upload/images/20181101/20112573aTGG7kabBY.png

  • 指向該函式所在的物件
let person = {
    name: 'Mary',
    age: 18,
    info: function () {
        console.log(`person name:${this.name}`);  //person name:Mary
    }
}
person.info();

物件person的屬性info是函式,該函示內部的this所指向的物件,為函式所在的物件(person),不是全域物件window。

設定this的指向:

var age = 20;
var person = {
    name: 'Mary',
    age: 18,
    info: function () {
        console.log(`person name:${this.name}`);

        function getAge() {
            console.log(`person age:${this.age}`);
        }
        getAge();
    }
}
person.info();

如果我們在屬性info裡面再增加一個函式,那這個函式的this會指向哪裡呢?
https://ithelp.ithome.com.tw/upload/images/20181101/20112573eJl7wYw4tV.png
指向全域物件,info( )是被person物件呼叫,所以它指向person物件,但person物件並沒有呼叫getAge( ),所以它指向全域物件。

如果希望他們都能指向person物件的話,可以在info( )增加一個變數,一開始的時候,直接讓this所指向的物件,存到self。

var age = 20;
var person = {
    name: 'Mary',
    age: 18,
    info: function () {
        var self = this;
        console.log(`person name:${self.name}`);

        function getAge() {
            console.log(`person age:${self.age}`);
        }
        getAge();
    }
}
person.info();

https://ithelp.ithome.com.tw/upload/images/20181101/20112573HJSs1rZ1dF.png


上一篇
Hoisting 提升
下一篇
Closure 閉包
系列文
JavaScript Note31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言