call, apply

call , apply 立刻執行
bind 不會立刻執行

var nickname = '小雞公主';
var family = {
    nickname: '皮傑先生',
}
function fn(a,b){
    console.log(this , a ,b);
}
fn(1,2); // window 1 2
// call apply 立刻執行
fn.call(family , 1 ,2); // this 指向變成 family 
// apply 是以 陣列帶入
fn.apply(family, [3,4]); // this 指向變成 family 
// bind 不會立刻執行
var fn2 = fn.bind(family,5,6); // this 指向變成 family 
fn2();
var fn2 = fn.bind(family,5,6); 
fn2(1,2); // 不會呈現
var fn2 = fn.bind(family,5);  // 5 1
fn2(1,2);

進階觀念

var name = '小雞公主';
var family = {
    name: '皮傑先生',
}
function fn(a,b){
    console.log(this , typeof this , a ,b);
}
// 這裡的 1 會以建構式呈現
fn.call(1 , 1 ,2); // Number{1} object 1 2
// 這裡的 '你好' 會以建構式呈現
fn.call('你好' , 1 ,2); // String{"你好"} object 1 2
// 非嚴格模式下 若傳入 undefined 或 null 會指向 window
fn.call(undefined , 1 ,2); // window object 1 2
fn.call(null , 1 ,2); // window object 1 2

那什麼是嚴格模式呢??

嚴格模式 (strict mode)
MDN: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Strict_mode

• 加入 'use strict' 即可運作
• 並不會影響不支援嚴格模式的瀏覽器
• 可依據執行環境設定'use strict'
• 透過拋出錯誤的方式消除一些安靜的錯誤
• 禁止使用一些有可能未來版本 ECMAScript 定義的語法

function fn(a,b){
    'use strict'
    console.log(this , typeof this , a ,b);
}
fn.call(1,1,2); // 1 number 1 2
fn.call(undefined,1,2); // undefined undefined 1 2
fn(1,2); // undefined undefined 1 2
// 簡易呼叫的 this 盡可能不要調用，它的本質其實是 undefined

那今天的介紹就到這裡
若有任何問題 或 內容有誤
都可以跟我說唷