JavaScript函數調用及this參數

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}，就是第一個參數。