JS this DAY64

this
看到这个是不是很头痛???
但别怕 接着往下看

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();

那今天的介绍就到这里
若有任何问题 或 内容有误
都可以跟我说唷