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"

function f1() {
  return this;
}

// ブラウザー上で
f1() === window; // true

// Node 上で
f1() === global; // true

function f2() {
  "use strict"; // strict モードにする
  return this;
}

f2() === undefined; // true

class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first() {}
  second() {}
  static third() {}
}

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

this = new Base();

class Base {}
class Good extends Base {}
class AlsoGood extends Base {
  constructor() {
    return { a: 5 };
  }
}
class Bad extends Base {
  constructor() {}
}

new Good();
new AlsoGood();
new Bad(); // 参照エラー

// オブジェクトを call や apply の最初の引数として渡すと、this がそれに結び付けられます。
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 に設定されています

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

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 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

var globalObject = this;
var foo = () => this;
console.log(foo() === globalObject); // true

// オブジェクトのメソッドとして呼び出す。
var obj = { func: foo };
console.log(obj.func() === globalObject); // true

// call を使用して this の設定を試みる
console.log(foo.call(obj) === globalObject); // true

// bind を使用して this の設定を試みる
foo = foo.bind(obj);
console.log(foo() === globalObject); // true

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

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

var o = { prop: 37 };

function independent() {
  return this.prop;
}

o.f = independent;

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

o.b = { g: independent, prop: 42 };
console.log(o.b.g()); // 42

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

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

/*
 * コンストラクターは下記のように動作します。
 *
 * function MyConstructor(){
 *   // 実際の関数本体のコードはこちらになります。
 *   // プロパティに代入することで、 |this| に必要な
 *   // プロパティを作成します。例えば、
 *   this.fum = "nom";
 *   // など...
 *
 *   // 関数にオブジェクトを返す return 文があれば、
 *   // そのオブジェクトが |new| 式の結果になります。
 *   // そうでなければ、式の結果は現在 |this| に
 *   // バインドされているオブジェクトになります
 *   // (つまり、最もよく見られる一般的なケースです)。
 * }
 */

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

// リスナーとして呼び出された場合は、関連づけられた要素を青にする
function bluify(e) {
  // 常に true
  console.log(this === e.currentTarget);
  // 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);
}

<button onclick="alert(this.tagName.toLowerCase());">Show this</button>

<button onclick="alert((function() { return this; })());">
  Show inner this
</button>

class Car {
  constructor() {
    // 違いを示すために sayHi ではなく sayBye をバインドする
    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();

// メソッドの 'this' の値は呼び出し元に依存します
car.sayHi(); // Hello from Ferrari
bird.sayHi = car.sayHi;
bird.sayHi(); // Hello from Tweety

// バインドされたメソッドの場合、'this' は呼び出し元に依存しません
bird.sayBye = car.sayBye;
bird.sayBye(); // Bye from Ferrari