JavaScript 2.8 this的使用

一、this的使用

a、无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象。
示例
/ 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true
console.log(this === globalThis)// true

console.log(this === global) //在node中

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

b、在严格模式下，如果进入执行环境时没有设置 this 的值，this 会保持为 undefined
function f2(){
  "use strict"; // 这里是严格模式
  return this;
}

f2() === undefined; // true

this 应是 undefined，因为 f2 是被直接调用的，而不是作为对象的属性或方法调用的
（如 window.f2()）。有一些浏览器最初在支持严格模式时没有正确实现这个功能，
于是它们错误地返回了window对象。

c、在类的构造函数中，this 是一个常规对象。类中所有非静态的方法都会被添加
到 this 的原型中,静态方法不是 this 的属性，它们只是类自身的属性,
这里和Java语言有很大的不同，静态方法只能通过Example.third() 这样来访问，
不能通过实例化对象来访问，而Java是可以的
class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']

d、不像基类的构造函数，派生类的构造函数没有初始的 this 绑定。
在构造函数中调用 super() 会生成一个 this 绑定，并相当于执行如下代码，
Base为基类,派生类不能在调用 super() 之前返回，除非其构造函数返回的是一个对象，
或者根本没有构造函数。

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return {a: 5};
  }
}
class Bad extends Base {
  constructor() {}//构造函数改为constructor(){super();} ，则就不会抛错了
}

new Good();
new AlsoGood();
new Bad(); // ReferenceError

e、对象转换
function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 第一个参数是用作“this”的对象
// 其余参数用作函数的参数
add.call(o, 5, 7); // 16

// 第一个参数是用作“this”的对象
// 第二个参数是一个数组，数组中的两个成员用作函数参数
add.apply(o, [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]\

bind()方法
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

f、当函数作为对象里的方法被调用时，this 被设置为调用该函数的对象。
var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // 37

我们也可以先定义函数，然后再将其附属到o.f。这样做的结果是一样的：

var o = {prop: 37};

function independent() {
  return this.prop;
}

o.f = independent;

console.log(o.f()); // 37


通过下面的例子，可以看出this和对象o的成员变量也没有太大的关系，最近引用才是最重要的
var o = {
    prop: 37,
    b:{
        g:function(){return this.prop},
        prop:42
}
};
console.log(o.b.g());//42

g、原型链中的this
对象 p 没有属于它自己的 f 属性，它的 f 属性继承自它的原型。
虽然最终是在 o 中找到 f 属性的，这并没有关系；查找过程首先从 p.f 的引用开始，
所以函数中的 this 指向p。也就是说，因为f是作为p的方法调用的，
所以它的this指向了p。这是 JavaScript 的原型继承中的一个有趣的特性。
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

h、当函数被用作事件处理函数时，它的 this 指向触发事件的元素
// 被调用时，将关联的元素变成蓝色
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);
}

i、当代码被内联 on-event 处理函数 调用时，它的this指向监听器所在的DOM元素：
<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>

但是如果this存在与多层嵌套的内层代码中，就会指向window或global对象，如下
<button onclick="alert((function(){return this})());">
  Show inner this
</button>

j、和其他普通函数一样，方法中的 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

 参考链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this