JS this DAY64

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

this 基本观念

每个执行环境都有属于自己 this的关键字this 与 函式如何宣告没有关连性，仅与呼叫方法有关严格模式下，简易呼叫会有很大的改变

影响函式 this 的调用方式

作为物件方法(最常运用this的方法)简易呼叫(绝大多数的呼叫方式)bind,apply,call方法newDOM 事件处理器箭头函式(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

// IIFEvar 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 functionvar 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 functiona.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();

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