this

メソッド内のオブジェクトにアクセスするには、thisキーを使用します.通常、javascriptのthisの値は、関数呼び出しの方法に依存します.したがって、同じ関数であっても、別のオブジェクトから呼び出されると、thisで参照される値が異なる場合があります.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

user.f = sayHi;
admin.f = sayHi;

user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

ES 5は、thisが関数呼び出し方式に関係なく一定の値を有するように、bind()の方法を導入する.ES 6に導入された矢印関数では、thisの値が語彙コンテキストに分類される.
LexicalScopeは、宣言変数の空間決定に基づくスキャンである.

// Define a variable in the global scope:
const myName = "Oluwatobi";

// Call myName variable from a function:
function getName() {
return myName;
}

上記のコードでは、myNameの語彙scopeはglobal scopeである.

function getName() {
const myName = "Oluwatobi";
return myName;
}

上記のコードでは、myNameの語彙scopeはgetName()関数の内部に位置する.

Bind()メソッド

bind()メソッドは、呼び出し時に一緒に渡された値をthisに固定する新しい関数を生成する.

const module = {
  x: 42,
  getX: function() {
    return this.x;
  }
};

const unboundGetX = module.getX;
console.log(unboundGetX()); // The function gets invoked at the global scope
// expected output: undefined

const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());
// expected output: 42

call()メソッド

func.call(thisArg[, arg1[, arg2[, ...]]])1つのオブジェクトの関数またはメソッドを別のオブジェクトに割り当てまたは呼び出す場合は、call()メソッドを使用します.call()メソッドは、作成したメソッドを他のオブジェクトから継承することができ、容易に再使用できる新しいthis値を関数またはメソッドに渡します.呼び出し時、最初の買収はthisで、残りの買収はfuncの買収です.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

function sayHi() {
  alert(this.name);
}

let user = { name: "John" };
let admin = { name: "Admin" };

sayHi.call( user ); // this = John
sayHi.call( admin ); // this = Admin

apply()メソッド

func.apply(thisArg, [argsArray])call()法は複数のパラメータを伝達することができるが、apply()法が類似した配列形態のパラメータの違いを伝達できることを除いて、apply()法はcall()法と非常に類似している.したがって、パラメータが壊れやすい場合はcall()の方法、類似の配列の場合はapply()の方法が使用される.

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min);
// expected output: 2

矢印関数

矢印関数にはthisはありません.したがって、thisが呼び出されると、矢印関数を囲む語彙scopreのthisが使用される.なお、bind()、call()、apply()の方法は使用できない.

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this|는 Person 객체를 참조
  }, 1000);
}

var p = new Person();

Reference

this, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Function.prototype.bind(), https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Lexical Scope in JavaScript – What Exactly Is Scope in JS?, https://www.freecodecamp.org/news/javascript-lexical-scope-tutorial/

メソッドwith,https://ko.javascript.info/object-methods2

矢印関数、https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions2