JS有4種方式呼叫函式

• 作為一個函式(function)——fn()直接被呼叫
• 作為一個方法(methods)——obj.fn()，關聯在物件上呼叫，實現面向物件程式設計
• 作為一個建構函式(constructor)——new Fn()，例項化一個新的物件
• 通過apply或call方法呼叫

對應的this的指向：

• 函式呼叫：window或undefined
• 方法呼叫：obj物件
• 建構函式呼叫：例項化的物件
• aplly或call：第一個引數

詳解：

函式呼叫

function fn(){
    console.log(this);
}
fn(); // window

嚴格模式下：

function fn(){
    "use strict"
    console.log(this);
}
fn(); // undefined
 

方法呼叫

var obj = {
    fn : function(){
        console.log(this);
    }
};
obj.fn() // 返回obj物件：{fn: ƒ}

建構函式呼叫

function Cat(x,y){
    this.x = x;
    this.y = y;
    console.log(this);
}
var c = new Cat(1,2);

c // Cat{x:1,y:2} 指向c物件

es6寫法

class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
        console.log(this);
    }
}
var p = new Point(1,2)

p // Point{x:1,y:2} 指向p物件
 

aplly或call

var name = '張三';
var age = '24';
var obj = {
    name: this.name, // 此處的this指向window
    objAge: this.age, // 此處的this指向window
    fun: function(fm,t){
        console.log(this)
        console.log(this.name+'年齡 '+this.age + ' 來自'+fm+' 去往'+t); // 此處的fm和t就是要傳入的引數
    }
}
var pd = {
    name: '彭丹',
    age:18
}
obj.fun.call(pd,'長沙','上海'); // 彭丹 年齡18 來自長沙 去往上海
obj.fun.apply(pd,['長沙','上海']); // 彭丹 年齡18 來自長沙 去往上海
obj.fun.bind(pd,'長沙','上海')(); // 彭丹 年齡18 來自長沙 去往上海
obj.fun.bind(pd,['長沙','上海'])(); // 彭丹 年齡18 來自長沙上海 去往undefined
 

this打印出來全都是{name: "彭丹", age: 18}，就是第一個引數。