自學日記

學習程式相關知識及學習法

0%

JS-this

發表於 更新於

初談this

this的指向相當複雜，大部分情境只需要了解其中一種即可(95%)

1
2
3
4
5
6
7
var A = 'Hello world';

function callName() {
    console.log(this.A);
}

callName();//印出Hello world
1
2
3
4
5
var A = {
    Name : Shawn,
    callName: callName
}
A.callName();

this本身與函式無關與呼叫的方式有關
(simple call)簡易呼叫:

1
2
3
4
5
6
var someone = '全域';
function callSomeone() {
    console.log(this.someone);
}

callSome();//simple call，這種呼叫方式this指向全域
1
2
3
4
5
6
7
var obj = {
    someone: '物件',
    callSomeone(){
      console.log(this.someone);
        }
    }
obj.callSomeone();//這種呼叫方式this指向obj
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var someone = '全域';
function callSomeone() {
    console.log(this.someone);
}

var wrapObj = {
    someone: '外層物件',
    callSomeone,
    innerObj: {
        someone: '內層物件',
        callSomeone,
    }
}

wrapObj.callSomeone();//印出外層物件
wrapObj.innerObj.callSomeone()//印出內層物件

this與他的定義是沒有關係的，與調用方式有關的範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
var someone = '全域';
function callSomeone() {
    console.log(this.someone);
}

var obj3 = {
    someone: '物件3',
    fn() {
        callSomeone();//通常不會如此使用
        //印出全域
    }
}
obj3.fn();

當此範例中的callSomeone前面沒有指向任何位置，那麼它屬於全域範圍

遇上callback function

當是callback function時，this 指向全域:

1
2
3
4
5
6
7
8
9
10
11
12
var name = '全域'
const person = {
    name: '小明',
    callName: function (){
        console.log('1', this.name);//印出小明
        setTimeout(function () {
            console.log('2', this.name);//印出全域
            console.log('3', this);
        },10);//印出全域
    },
}
person.callName();

箭頭函式沒有自己的this

內部作用域依外層this指向為主:

或者

1
2
3
4
5
6
7
8
9
10
11
var name = '全域'
const person = {
    name: '小明',
    callMe() {
        const callName = () => {
            console.log(this.name);//印出小明
        };
        callName();
    }
}
person.callMe();

此處this指向外層callMe function，而function呼叫指向person物件，因此印出小明

嚴謹模式

如果在嚴謹模式下，透過簡單呼叫，函數裡 this 會是 undefined，無法執行 this.name，會發生錯誤。
https://book-js-something.onejar99.com/articles/day18.html