为了转生而点技能-JavaScript，day13(this上篇：简易呼叫及物件的方法呼叫

this：
存在全域的执行环境，也存在函式所开启的执行环境

        var myname = 'Tom';
        function callname() {

        }
        callname();

影响函式this的调用方式：
1.简易呼叫
2.作为物件方法
3.bind、apply、call方法
4.new (建构式)
5.DOM事件处理器
6.箭头函式

简易呼叫 Simple Call：this 会指向全域物件

1.直接呼叫函式的情况下。

        var myname = 'Tom';
        function callname() {
            console.log(this.myname);
        }
        callname();            //Tom

2.放到立即函式 IIFE ，直接在函式内直接在呼叫另一个函式：。

        var name = 'GlobalName';
        (function () {
            function foo() {
                let name = 'Chupai';
                console.log(this.name);
            }
            foo(); // "GlobalName"
        })();

        var name = 'GlobalName';
        function foo() {
            let name = 'Chupai';
            console.log(this.name);
        }

        (function () {
            foo(); // "GlobalName"
        })();

3.放到闭包 Closure。

var name = 'GlobalName';
function foo() {
  let name = 'Chupai';
  return function() {
    console.log(this.name);
  };
}

let myFoo = foo();

myFoo(); // "GlobalName"

4.放到Callback function。

备注：所谓Callback function把函式当作另一个函式的参数，透过另一个函式来呼叫它。
详细可以参考重新认识 JavaScript: Day 18 Callback Function 与 IIFE

        var name = 'GlobalName';

        function foo() {
            let name = 'Chupai';

            function boo() {
                console.log(this.name);
            }

            boo();
        }

        foo();  // "GlobalName"

作为物件方法呼叫

this与函式如何宣告没有关联，仅与呼叫方法有关
物件的方法调用时，仅需要关注是在哪一个物件下呼叫
，this 的值为被呼叫函式的所属物件

例1：

        var myname = 'Tom';
        function callname() {
            console.log(this.myname);
        }
        var family = {
            myname: '小名家',
            whosName: callname
        };
        family.whosName();    //小名家

解family.whosName()：

找family里面的whosName属性
whosName属性的值是函式callname
函式callname里面的this会指向family，并寻找属性myname。
属性myname的值是小名家。

例2：

        var myname = 'Tom';
        function callname() {
            console.log(this.myname);
        }
        var family = {
            myName: '小明家',
            callName: callName,
            Ming: {
                myName: '小明',
                callName: callName
            }
        }
        family.callName();         //小明家
        family.Ming.callName();    //小明

解：

family.callName()：this范围为family的myname属性。
family.Ming.callName()：this范围为Ming的myname属性。

例3：

        var myName = 'TOM';
        var family = {
            myName: '小明家',
            whoName: function () {
                console.log(this.myName);
            }
        }
        var herName = family.whoName;
        herName();

解：
family.callName被赋予全域变数herName，而且并在全域环境呼叫，this从物件的范围变更到全域的范围，this.myName指向全域的var myName = 'TOM'。

对比例3：

        var myName = 'TOM';
        var family = {
            myName: '小明家',
            whoName: function () {
                console.log(this.myName);
            }
        }
        var herName = family.whoName;
        herName;

解：
此时的this，是在物件下的属性whoName呼叫，所以此时会指向this所属物件的myName，就会出现小明家。
参考文章：