iT邦幫忙

0

JS this DAY64

this
看到這個是不是很頭痛???
但別怕 接著往下看/images/emoticon/emoticon08.gif

this 基本觀念

  • 每個執行環境都有屬於自己 this的關鍵字
  • this 與 函式如何宣告沒有關連性,僅與呼叫方法有關
  • 嚴格模式下,簡易呼叫會有很大的改變

影響函式 this 的調用方式

  • 作為物件方法(最常運用this的方法)
  • 簡易呼叫(絕大多數的呼叫方式)
  • bind,apply,call方法
  • new
  • DOM 事件處理器
  • 箭頭函式(ES6)

這裡只要記住兩個重點

  • this 與 函式如何宣告沒有關連性,僅與呼叫方法有關
  • 物件的方法調用時,只需關注是在哪一個物件呼叫

最常見的 this:物件的方法調用

function call(){
    // 這裡的 this 指向 family此物件
    console.log(this,this.name);
}
var family = {
    name: '皮傑先生',
    call: call,
}
family.call(); // 皮傑先生
function call(){
    console.log(this,this.name);
}
var family = {
    name: '皮傑先生',
    call: call,
    member:{
        name:'小雞公主',
        call:call,
    }
}
family.call(); // 皮傑先生
family.member.call(); // 小雞公主
var name = '全域變數';
var family = {
    name: '皮傑先生',
    call: function(){
        console.log(this.name);
    },  
}
var callName = family.call;
// 在全域呼叫 所以 this 指向全域
callName(); // 全域變數 在全域呼叫 所以 this 指向全域

this:簡易呼叫
simple call 的 this 皆指向 window
但要注意 並非是在全域的物件下去執行函式(window.callName())

var name = '全域變數';
function callName(){
    // this 指向 window
    console.log(this,this.name); // 全域變數
}
callName();
// 盡可能不要使用 simple call 的 this
// IIFE
var name = '全域';
(function(){
    console.log(this.name); // 全域
    function callName(){
        console.log(this.name); // 全域
    }
    callName();
}());
// 這裡執行 simple call 並非 window.callName(); 這樣執行
// 閉包
var name = '321'
function storeMoney(init){
    var money = init || 100;
    var name = '123'
    return function(price){
        money = money + price;
        console.log(this.name , money); // 321 600
    }
}
var myMoney = storeMoney(100);
myMoney(500); // simple call 直接調用
// callback function
var name = '皮傑先生';
function card(fn){
    var money = 100;
    fn(money);
}
card(function(item){
    console.log(this.name, item + 100); // 皮傑先生 200
})
var name = '皮傑先生';
var a = [1,2,3];
// forEach 後面也是 callback function
a.forEach(function(i){
    console.log(this.name , i);
})

最後再看一個例子

var name = '小雞公主';
var family = {
    name : '皮傑先生',
    callName : function(){
        setTimeout(function(){
            console.log(this.name); // 小雞公主
        },1000);
    }
}
family.callName();
// setTimeout 裡的函式為 callback function
// 我們不用管 函式在哪執行,只需注意它是怎麼去執行

若想要取得物件的name
可以宣告一個 var vm = this;

var name = '小雞公主';
var family = {
    name : '皮傑先生',
    callName : function(){
        var vm = this;
        setTimeout(function(){
            console.log(vm.name); // 皮傑先生
        },1000);
    }
}
family.callName();

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


尚未有邦友留言

立即登入留言