this（法则：谁调用指向谁并指向上一个调用者，没人调用指向window）
与其他语言相比，函数的 this 关键字在 JS 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。
当前执行上下文（global、function 或 eval）的一个属性，
在非严格模式下，总是指向一个对象，
在严格模式下可以是任意值）
在绝大多数情况下，函数的调用方式决定了 `this` 的值（运行时绑定）。
`this` 不能在执行期间被赋值，并且在每次函数被调用时 `this` 的值也可能会不同。
ES5 引入了 bind方法来设置函数的 `this` 值，而不用考虑函数如何被调用的。
ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（`this` 的值将保持为闭合词法上下文的值）。
1. 全局上下文------无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。
// 在浏览器中，window 对象同时也是全局对象：
console.log(this === window); // true
a = 37;
console.log(window.a); // 37
this.b = "MDN";
console.log(window.b) // "MDN"
console.log(b) // "MDN"
2. 函数上下文------在函数内部，this的值取决于函数被调用的方式
不在严格模式下----因为下面的代码不在严格模式下，且 `this` 的值不是由该调用设置的，所以 `this` 的值默认指向全局对象，浏览器中就是window）
在严格模式下----如果进入执行环境时没有设置 `this` 的值，`this` 会保持为 `undefined`
// 对象可以作为 bind 或 apply 的第一个参数传递，并且该参数将绑定到该对象。
var obj = {a: 'Custom'};
// 声明一个变量，并将该变量作为全局对象 window 的属性。
var a = 'Global';
function whatsThis() {
return this.a; // this 的值取决于函数被调用的方式
}
whatsThis(); // 'Global' 因为在这个函数中 this 没有被设定，所以它默认为 全局/ window 对象
whatsThis.call(obj); // 'Custom' 因为函数中的 this 被设置为 obj
whatsThis.apply(obj); // 'Custom' 因为函数中的 this 被设置为 obj
//因为下面的代码不在严格模式下，且 `this` 的值不是由该调用设置的，所以 `this` 的值默认指向全局对象，浏览器中就是 [`window`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window "window")。
function f1(){
return this;
}
//在浏览器中：
f1() === window; //在浏览器中，全局对象是 window
//在 Node 中：
f1() === globalThis;
//然而，在严格模式下，如果进入执行环境时没有设置 `this` 的值，`this` 会保持为 `undefined`，如下：
function f2(){
"use strict"; // 这里是严格模式
return this;
}
f2() === undefined; // true
//备注： 在第个例子中，`this` 应是 undefined，因为 `f2` 是被直接调用的，而不是作为对象的属性或方法调用的（如 `window.f2()`）。有一些浏览器最初在支持严格模式时没有正确实现这个功能，于是它们错误地返回了`window`对象
3. 如果要想把 this 的值从一个环境传到另一个，就要用 call 或者apply 方法，另外还有bind方法
call() 方法使用一个指定的 `this` 值和单独给出的一个或多个参数来调用一个函数，
call() 允许为不同的对象分配和调用属于一个对象的函数/方法。
call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。
call方法的语法和作用与apply()方法类似，(改变this一次且执行其一次)
call和apply只有一个区别：
`call()` 方法接受的是一个参数列表 {}，
`apply()` 方法接受的是一个包含多个参数的数组 []。
另外bind()也有改变this指向的作用，但他不调用，只是改变this指向
4. 类上下文-----this 在 类 中的表现与在函数中类似，
因为类本质上也是函数，但也有一些区别和注意事项：
在类的构造函数中，`this` 是一个常规对象。类中所有非静态的方法都会被添加到 `this` 的原型中
静态方法不是 this 的属性，它们只是类自身的属性，若要访问静态方法等，直接通过类访问（全局的），在其他类中用`类名.静态方法`的形式调用。
类中非静态方法等的this指向---this指向new出来的对象，new出来的对象的属性和方法就是非静态的方法或属性，this只能代表对象，不能代表类本身
类中静态方法等的this指向---类本身，可以通过this调用类本身上面的静态属性和静态方法
class Example {
constructor() {
const proto = Object.getPrototypeOf(this);
console.log(Object.getOwnPropertyNames(proto));
}
first(){}
second(){}
static third(){}
}
new Example(); // ['constructor', 'first', 'second']
5. 派生类----不像基类的构造函数，派生类的构造函数没有初始的 this 绑定。在构造函数中调用 super() 会生成一个 this 绑定。
`基类`是父类，`派生类`就是子类，就是子类可以继承并使用父类的属性和方法，也可以有自己的属性和方法
子类继承父类，使用继承是为了减少代码的冗余增强代码的可扩展性
继承的特性：
传递性：子类可以调用父类以及父类以上所有父类的属性和方法
单根性：一个子类不能同时继承2个或2个以上的父类
在派生类的构造函数体中（使用 `extends`），`super` 关键字可以作为“函数调用”（`super(...args)`）出现，它必须在使用 `this` 关键字之前和构造函数返回之前被调用。它调用父类的构造函数并绑定父类的公共字段，之后派生类的构造函数可以进一步访问和修改 `this`。
class Base {}
class Bad extends Base {
constructor() {
super();
}
}
new Bad();// Bad {[[Prototype]]: Base}
//在调用 `super()` 之前引用 `this` 会抛出错误
//Base 为基类
this = new Base();
//派生类不能在调用 `super()` 之前返回，除非其构造函数返回的是一个对象，或者根本没有构造函数。
class Base {}
class Good extends Base {}
class AlsoGood extends Base {
constructor() {
return {a: 5};
}
}
class Bad extends Base {
constructor() {}
}
new Good();//Good {}
new AlsoGood();//{a: 5}
new Bad(); // ReferenceError
6. 函数上下文中的this(this 的值取决于函数被调用的方式)
// 对象可以作为 bind 或 apply 的第一个参数传递，并且该参数将绑定到该对象。
var obj = {a: 'Custom'};
var a = 'Global';
function whatsThis() {
return this.a; // this 的值取决于函数被调用的方式
}
whatsThis(); // 'Global' 因为在这个函数中 this 没有被设定，所以它默认为 全局/ window 对象
whatsThis.call(obj); // 'Custom' 因为函数中的 this 被设置为 obj
whatsThis.apply(obj); // 'Custom' 因为函数中的 this 被设置为 obj
7. this和对象转换（使用call或apply）
function add(c, d) {
return this.a + this.b + c + d;
}
var odd = {a: 1, b: 3};
// 第一个参数是用作“this”的对象,其余参数用作函数的参数
add.call(odd, 5, 7); // 16
// 第一个参数是用作“this”的对象,第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(odd, [10, 20]); // 34
//在非严格模式下使用 `call` 和 `apply` 时，如果用作 `this` 的值不是对象，则会被尝试转换为对象。
//`null` 和 `undefined` 被转换为全局对象。
// 原始值如 `7` 或 `'foo'` 会使用相应构造函数转换为对象。因此 `7` 会被转换为 `new Number(7)` 生成的对象，字符串 `'foo'` 会转换为 `new String('foo')` 生成的对象。
function bar() {
console.log(Object.prototype.toString.call(this));
}
bar.call(7); // [object Number]
bar.call('foo'); // [object String]
bar.call(undefined); // [object global]
function bar() {
console.log(this);
}
bar.call(7); //Number {7}[[Prototype]]: Number[[PrimitiveValue]]: 7
bar.call('foo'); //String {'foo'}0: "f"1: "o"2: "o"length: 3[[Prototype]]: String[[PrimitiveValue]]: "foo"
bar.call(undefined); // Window {...}
bar.call(null); // Window {...}
8. bind方法（改变this后还要再调用才行）
//ECMAScript 5 引入了 Function.prototype.bind()。
//调用f.bind(someObject)会创建一个与`f`具有相同函数体和作用域的函数，但是在这个新函数中，`this`将永久地被绑定到了`bind`的第一个参数，无论这个函数是如何被调用的。
function f(){
return this.a;
}
var g = f.bind({a:"azerty"});
console.log(g()); // azerty
var h = g.bind({a:'yoo'}); // bind 只生效一次！
console.log(h()); // azerty
var o = {a:37, f:f, g:g, h:h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty
9. 箭头函数(*重点重点重点重点重点重点)----没有作用域，即没有this 。(所以无论如何，箭头函数的this 被设置为他被创建时的环境，该环境被调用则为该环境，如果该环境没有调用就向上)
1. 无论如何，`bar` 的 `this` 被设置为他被创建时的环境obj。
// 创建一个含有 bar 方法的 obj 对象，bar 返回一个函数，这个函数返回 this， 这个返回的函数是以箭头函数创建的，
//所以它的 this 被永久绑定到了它外层函数的 this。bar 的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
bar: function() {//bar的创建在这里
var x = (() => this);
return x;
}
};
// 作为 obj 对象的一个方法来调用 bar，把它的 this 绑定到 obj。将返回的函数的引用赋值给 fn。
var fn = obj.bar();//调用bar
// 直接调用 fn 而不设置 this， 通常 (即不使用箭头函数的情况) 默认为全局对象
// 若在严格模式则为 undefined
console.log(fn() === obj); // true
// 但是注意，如果你只是引用 obj 的方法， 而没有调用它
var fn2 = obj.bar;//引用bar
// 那么调用箭头函数后，this 指向 window，因为它从 bar 继承了 this。
console.log(fn2()() == window); // true
//引用和调用区别外在就是有无括号：如发f(){let x=2;return x},引用为：f;调用为：f();
//函数引用和函数调用的本质区别：
//当引用函数时候，多个变量内存存储的是函数的相同的入口指针，因此对于同一个函数来讲，无论多少个变量引用，他们都是相等的，因为对于引用类型(对象，数组，函数等)都是比较的是内存地址，如果他们内存地址一样的话，说明是相同的；
//对函数调用来讲，
//函数返回函数时，每次调用的时候，都被分配一个新的内存地址，所以他们的内存地址不相同；
//但是对于函数没有返回函数，只是返回数值，他们比较的不是内存地址，而是比较值，所以他们的值相等；
//函数实列化一个对象的列子，他们也被分配到不同的内存地址；
//f()执行f函数，返回子函数,f()()执行子函数，返回孙函数,f()()()执行孙函数，返回重孙函数
var i = 1;
function f() {
i++;
console.log("------------- : " + i)
return k;
function k() {
return "I love you!"
}
}
console.log(f) //[Function: k]
f(); //-------------2
console.log("111111111111");
var ff = f(); //-------------3
console.log("00000000000");
console.log(ff) //[Function: k]
console.log("222222222222222");
f()(); //-------------4
console.log("333333333333333");
var fff = f()() //-------------5
console.log("0100000000000000");
console.log(fff) //I love you
console.log("44444444444444");
console.log(f()()); //-------------6和I love you
结果显示：
[Function: f]
------------- : 2
111111111111
------------- : 3
00000000000
[Function: k]
222222222222222
------------- : 4
333333333333333
------------- : 5
0100000000000000
I love you!
44444444444444
------------- : 6
I love you!
2. 无论如何，`foo` 的 `this` 被设置为他被创建时的环境就是全局对象。这同样适用于在其他函数内创建的箭头函数：这些箭头函数的`this`被设置为封闭的词法环境的。
如果将`this`传递给`call`、`bind`、或者`apply`来调用箭头函数，它将被忽略。不过你仍然可以为调用添加参数，不过第一个参数（`thisArg`）应该设置为`null`。
var foo = (() => this);//foo创建在这里
var obj = {foo: foo};
console.log(obj.foo() ); // window
// 尝试使用 call 来设定 this
console.log(foo.call(obj)); // window
// 尝试使用 bind 来设定 this
foo = foo.bind(obj);
console.log(foo()); // window
10. 作为对象的方法----当函数作为对象里的方法被调用时，this 被设置为调用该函数的对象。(this与最近的引用)
//当 `o.f()` 被调用时，函数内的 `this` 将绑定到 `o` 对象。
var o = {
prop: 37,
f: function() {
return this.prop;
}
};
console.log(o.f()); // 37
//请注意，这样的行为完全不会受函数定义方式或位置的影响。
//在前面的例子中，我们在定义对象`o`的同时，将其中的函数定义为成员 `f` 。
//但是，我们也可以先定义函数，然后再将其附属到`o.f`。这样做的结果是一样的：
var o = {prop: 37};
function independent() {
return this.prop;
}
o.f = independent;
console.log(o.f()); // 37
//这表明函数是从 `o` 的 `f` 成员调用的才是重点。
//同样，`this` 的绑定只受最接近的成员引用的影响。在下面的这个例子中，我们把一个方法`g`当作对象`o.b`的函数调用。
//在这次执行期间，函数中的`this`将指向`o.b`。事实证明，这与他是对象 `o` 的成员没有多大关系，最近的引用才是最重要的。
o.b = {g: independent, prop: 42};
console.log(o.b.g()); // 42
11. 原型链中的this----对于在对象原型链上某处定义的方法，同样的概念也适用。
//如果该方法存在于一个对象的原型链上，那么 `this` 指向的是调用这个方法的对象，就像该方法就在这个对象上一样。
//`a=Object.create(b)`方法用于创建一个新对象a，使用现有的对象b来作为新创建对象的原型（prototype）,新对象a可以直接使用原型上的属性和方法。
var o = {
f: function() {
return this.a + this.b;
}
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); // 5
//对象 `p` 没有属于它自己的 `f` 属性，它的 `f` 属性继承自它的原型。
//虽然最终是在 `o` 中找到 `f` 属性的，这并没有关系；
//查找过程首先从 `p.f` 的引用开始，所以函数中的 `this` 指向`p`。
//也就是说，因为`f`是作为`p`的方法调用的，所以它的`this`指向了`p`。这是 JavaScript 的原型继承中的一个有趣的特性。
12. getter和setter中的this-------相同的概念也适用于当函数在一个 getter 或者 setter 中被调用。用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。
//**`Object.defineProperty()`** 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
//一般通过为对象的属性赋值的情况下，对象的属性可以修改也可以删除，
//但是通过Object.defineProperty()定义属性，通过描述符的设置可以进行更精准的控制对象属性
function sum() {
return this.a + this.b + this.c;
}
var o = {
a: 1,
b: 2,
c: 3,
get average() {
return (this.a + this.b + this.c) / 3;
}
};
Object.defineProperty(o, 'sum', {
get: sum, enumerable: true, configurable: true});
console.log(o.average, o.sum); // 2, 6
13. 作为构造函数----当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象
//虽然构造函数返回的默认值是 `this` 所指的那个对象，
//但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回 `this` 对象）
//构造函数这样工作：
//function MyConstructor(){
// 函数实体写在这里
// 根据需要在 this 上创建属性，然后赋值给它们，比如：
//this.fum = "nom";
// 如果函数具有返回对象的 return 语句，
// 则该对象将是 new 表达式的结果。
// }
function C(){
this.a = 37;
}
var o = new C();
console.log(o.a); // 37
function C2(){
this.a = 37;
return {a:38};
}
o = new C2();
console.log(o.a); // 38
//因为在调用构造函数的过程中，手动的设置了返回对象，与`this`绑定的默认对象被丢弃了。
//（这基本上使得语句“`this.a = 37;`”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。
14. 作为一个DOM事件处理函数-----当函数被用作事件处理函数时，它的 this 指向触发事件的元素（一些浏览器在使用非 addEventListener 的函数动态地添加监听函数时不遵守这个约定）。
//被调用时，将关联的元素变成蓝色
function bluify(e){
console.log(this === e.currentTarget); // 总是 true
//当 currentTarget 和 target 是同一个对象时为 true
console.log(this === e.target);
this.style.backgroundColor = '#A5D9F3';
}
// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');
// 将 bluify 作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
elements[i].addEventListener('click', bluify, false);
}
15. 作为一个内联时间处理函数-----当代码被内联 on-event 处理函数 (en-US) 调用时，它的this指向监听器所在的 DOM 元素
<button onclick="alert(this.tagName.toLowerCase());">
Show this
</button>
//上面的 alert 会显示 `button`。注意只有外层代码中的 `this` 是这样设置的
<button onclick="alert((function(){return this})());">
Show inner this
</button>
//在这种情况下，没有设置内部函数的 `this`，所以它指向 global/window 对象（即非严格模式下调用的函数未设置 `this` 时指向的默认对象）
16. 类中的this-----和其他普通函数一样，方法中的 this 值取决于它们如何被调用。有时，改写这个行为，让类中的 this 值总是指向这个类实例会很有用。为了做到这一点，可在构造函数中绑定类方法
class Car {
constructor() {
// Bind sayBye but not sayHi to show the difference
this.sayBye = this.sayBye.bind(this);
}
sayHi() {
console.log(`Hello from ${this.name}`);
}
sayBye() {
console.log(`Bye from ${this.name}`);
}
get name() {
return 'Ferrari';
}
}
class Bird {
get name() {
return 'Tweety';
}
}
const car = new Car();
const bird = new Bird();
// The value of 'this' in methods depends on their caller
car.sayHi(); // Hello from Ferrari
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety
// For bound methods, 'this' doesn't depend on the caller
bird.sayBye = car.sayBye;
bird.sayBye(); // Bye from Ferrari
//类内部总是严格模式。调用一个 `this` 值为 undefined 的方法会抛出错误。
