深入理解Js中的this

var obj = {
    name: 1,
    say: function() {
        return this.name;
    }
};

window.name = 2;
window.say = obj.say;

console.log(obj.say()); // 1
console.log(window.say()); // 2

产生这样的结果的原因就是因为使用了this关键字，前文已经提到了this必须要在运行时才能确定，在这里，对于obj.say()来说，say()运行的环境是obj对象，对于window.say()来说，say()运行的环境是window对象，所以两者运行的结果不同。
此时我们就来了解一下，为什么JavaScript会有this这样一个设计，我们首先来了解一下JavaScript的内存结构中的堆栈，堆heap是动态分配的内存，大小不定也不会自动释放，栈stack为自动分配的内存空间，在代码执行过程中自动释放。JavaScript在栈内存中提供一个供Js代码执行的环境，关于作用域以及函数的调用都是栈内存中执行的。Js中基本数据类型String、Number、Boolean、Null、Undefined、Symbol，占用空间小且大小固定，值直接保存在栈内存中，是按值访问，对于Object引用类型，其指针放置于栈内存中，指向堆内存的实际地址，是通过引用访问。
那么此时我们来看一下上边的示例，在内存中对于obj对象是存放在堆内存的，如果在对象中的属性值是个基本数据类型，那么其会跟这个对象存储在同一块内存区域，但是这个属性值同样可能是一个引用类型，那么对于say这个函数也是存在于堆内存中的，实际上在此处我们可以将其理解为这个函数的实际定义在一个内存区域(以一个匿名函数的形式存在)，而obj这个对象同样在其他的一个内存区域，obj通过say这个属性指向了这个匿名函数的内存地址，obj --say--> funtion，那么此时问题来了，由于这种内存结构，我们可以使任何变量对象等指向这个函数，所以在JavaScript的函数中是需要允许我们取得运行环境的值以供使用的，我们必须要有一种机制，能够在函数体内部获得当前的运行环境context，所以this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

使用

我们需要记住，this是在运行时进行绑定的，并不是在定义时绑定，它的context取决于函数调用时的各种条件，简单来说this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式，再简单来说this永远指向调用者，但箭头函数除外，接下来我们介绍一下五种this的使用情况。

默认绑定

最常用的函数调用类型即独立函数调用，这个也是优先级最低的一个，此时this指向全局对象，注意如果使用严格模式strict mode，那么全局对象将无法使用默认绑定，因此this会变为undefined。

var a = 1; //  变量声明到全局对象中
function f1() {
    return this.a;
}

function f2() {
    "use strict";
    return  this;
}

console.log(f1()); // 1 // 实际上是调用window.f1()而this永远指向调用者即window
console.log(f2()); // undefined // 实际上是调用 window.f2() 此时由于严格模式use strict所以在函数内部this为undefined

function f() {
    console.log(this.a);
}
var obj1 = {
    a: 1,
    f: f
};
var obj2 = {
    a: 11,
    obj1: obj1
};
obj2.obj1.f(); // 1 // 最后一层调用者即obj1

function f() {
    console.log(this.a);
}
var obj1 = {
    a: 1,
    f: f
};
var obj2 = {
    a: 11,
};
obj2.f = obj1.f; // 间接引用
obj2.f(); // 11 // 调用者即为obj2

window.name = "A"; // 挂载到window对象的name
document.name = "B"; // 挂载到document对象的name
var s = { // 自定义一个对象s
    name: "C"
}

var rollCall = {
    name: "Teacher",
    sayName: function(){
        console.log(this.name);
    }
}
rollCall.sayName(); // Teacher

// apply
rollCall.sayName.apply(); // A // 不传参默认绑定window
rollCall.sayName.apply(window); // A // 绑定window对象
rollCall.sayName.apply(document); // B // 绑定document对象
rollCall.sayName.apply(s); // C // 绑定自定义对象

// call
rollCall.sayName.call(); // A // 不传参默认绑定window
rollCall.sayName.call(window); // A // 绑定window对象
rollCall.sayName.call(document); // B // 绑定document对象
rollCall.sayName.call(s); // C // 绑定自定义对象

// bind // 最后一个()是为让其执行
rollCall.sayName.bind()(); //A // 不传参默认绑定window
rollCall.sayName.bind(window)(); //A // 绑定window对象
rollCall.sayName.bind(document)(); //B // 绑定document对象
rollCall.sayName.bind(s)(); // C // 绑定自定义对象

function _new(base,...args){
    var obj = {};
    obj.__proto__ = base.prototype;
    base.apply(obj, args);
    return obj;
}

function Funct(a) {
    this.a = a;
}
var f1 = new Funct(1);
console.log(f1.a); // 1

var f2 = _new(Funct, 1);
console.log(f2.a); // 1

window.name = 1;
var obj = {
    name: 11,
    say: function(){
        const f1 = () => {
            return this.name;
        }
        console.log(f1()); // 11 // 直接调用者为window 但是由于箭头函数不绑定this所以取得context中的this即obj对象
        const f2 = function(){
            return this.name;
        }
        console.log(f2()); // 1 // 直接调用者为window 普通函数所以
        return this.name;
    }
}

console.log(obj.say()); // 11 // 直接调用者为obj 执行过程中的函数内context的this为obj对象

function s(){
    console.log(this);
}

// window中直接调用 // 非 use strict
s(); // Window // 等同于window.s()，调用者为window
// window是Window的一个实例 // window instanceof Window //true

// 新建对象s1
var s1 = {
    t1: function(){ // 测试this指向调用者
        console.log(this); // s1
        s(); // Window // 此次调用仍然相当 window.s()，调用者为window
    },
    t2: () => { // 测试箭头函数，this并未指向调用者
        console.log(this);
    },
    t3: { // 测试对象中的对象
      tt1: function() {
           console.log(this);
      }  
    },
    t4: { // 测试箭头函数以及非函数调用this并未指向调用者
      tt1: () => {
           console.log(this);
      }  
    },
    t5: function(){ // 测试函数调用时箭头函数的this的指向，其指向了上一层对象的调用者
        return {
            tt1: () => {
                console.log(this);
            }
        }
    }
}
s1.t1(); // s1对象 // 此处的调用者为 s1 所以打印对象为 s1
s1.t2(); // Window
s1.t3.tt1(); // s1.t3对象
s1.t4.tt1(); // Window
s1.t5().tt1(); // s1对象

https://github.com/WindrunnerMax/EveryDay

https://juejin.cn/post/6882527259584888845
https://www.cnblogs.com/raind/p/10767622.html
http://www.ruanyifeng.com/blog/2018/06/javascript-this.html