【Day26】this - 物件的方法调用

在讲解 this 之前，先来看一段程序码，观察它的执行过程

var myName = 'weiwei';

function callName() {};

callName();

我们可以看见在进入 callName() 这段函式时，

会自动产生 this，此时的 this 是指向全域 window

此时我们在函式中使用 this.myName 来取用全域中的 myName

var myName = 'weiwei';

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

callName();

我们能看见会回传全域中的 myName，

因为此时 this 是指向全域的关系，

所以才会显示全域中的 myName，

而今天要来介绍关於 this 的指向

this

当我们在执行函式时，this 都会自动产生，

它是一个保留字

我们可以在全域或是函式的执行环境中去执行它

this 基本观念

• 每个执行环境都有自己的 this
• this 与函式宣告方式没有关联性，只和呼叫方式有关
• 在严谨模式下，简易呼叫会有很大的改变

影响函式 this 的调用方式

1. 物件的方法调用（最常运用 this 的方法）
2. 简易呼叫（simple call）
3. call, apply, bind 方法
4. 严谨模式
5. DOM 事件处理器
6. 箭头函式

今天针对物件的方法调用进行说明

物件的方法调用

在物件的方法调用中是最常用的，

这边只须记下两个重点就能掌握物件的方法调用

1. this 与函式宣告方式没有关联性，只和呼叫方式有关
2. 物件的方法调用时，只需注意在哪一个物件下呼叫

var myName = 'weiwei';

function callName() {
    console.log(this, this.myName);
};

var family = {
    myName: '小明',
    callName: callName,
}

family.callName();

此时能看见 this 是指向 family 这个物件，

而 myName 的结果为 小明，

因此可以了解 this 会指向前面调用它的物件

我们在看一个范例，当我们使用二阶以上的物件时，this 的指向会如何

var myName = 'weiwei';

function callName() {
    console.log(this, this.myName);
};

var family = {
    myName: '小明',
    callName: callName,
    wei: {
        myName: '威威',
        callName: callName,
    },
};

family.callName();
family.wei.callName();

我们可以看见在呼叫 family 内的函式 callName() 时，

this 是指向 family 这个物件，

而在呼叫 family 的属性 wei 当中的函式 callName() 时，

this 是指向 wei 这个物件

接着我们来看最後一个范例，我们将 family.callName() 赋予到变数中，看结果如何

var myName = 'weiwei';

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

var family = {
    myName: '小明',
    callName: callName,
};

var callName = family.callName;
callName();

会看见结果为 weiwei，

此时的 this 会指向全域，

因为 callName() 是直接在全域中执行，而不是在物件中执行，

因此 this 就会指向全域，而不会指向物件，

以上就是物件的方法调用中 this 的指向，我们明天见！！