TIL 94 l this part3

最後のまとめをする

この値が確定した場合

せいち

1.グローバル空間でthisを呼び出す場合:グローバル空間ではthisが最初から呼び出されるため、その値は固定されます.

ブラウザ>未亡人(windowというグローバルオブジェクト)

node.js>global(globalと呼ばれるグローバルオブジェクト)

2.call()、apply()、bind()メソッド:明示的this binding

call()メソッド:メソッド呼び出しの主体である関数を直ちに実行するコマンド.

関数を直接実行すると、グローバルオブジェクトが参照されますが、呼び出しメソッドでは、任意のオブジェクトを->明示的バインド

として指定できます.

let func = function(a, b, c) {
   console.log(this, a, b, c);
}


func(1, 2, 3); // window{..} 1 2 3

func.call({ x :  1 }, 4, 5, 6 ); // {x: 1} 4 5 6

func.call({ x: 1, y:2}, 6, 7, 8); 

apply()メソッド:apply()メソッドはcallメソッドと機能的に全く同じです.しかし、applyメソッドの違いは、配列内の要素として2番目のパラメータを受信し、その配列内の要素の関数を呼び出すパラメータ

として指定することである.

let func = function(a, b, c) {
   console.log(this, a, b, c);
}

func.apply({x:1}, [4, 5, 6]); // {x: 1} 4 5 6

bind()メソッド:callメソッドと同様ですが、すぐに呼び出すのではなく、受信したthisとパラメータに基づいて、新しい関数のみを返すメソッドです.すなわちbindメソッドには,この機能を関数に予め適用することと,一部の応用関数を実現することの2つの目的がある.

let func = function (a, b, c, d) {
  console.log(this, a, b, c, d);
};

func(1, 2, 3, 4); // Window {…} 1 2 3 4

let bindFunc1 = func.bind({ x: 1 });

bindFunc1(5, 6, 7, 8); // {x: 1} 5 6 7 8

let bindFunc2 = func.bind({ x: 1 }, 4, 5);

bindFunc2(9, 10); // {x: 1} 4 5 9 10

へんどうち

1.関数を呼び出すとき:関数を呼び出すとき、関数の内部でどのようなことが起こりますか.
(1)ES 5:関数のthisは常にグローバルオブジェクトを指します(覚えておいてください)

グローバル関数ではなくネストされた関数が呼び出された場合、関数のこの項目はグローバルオブジェクトにバインドされます->エラーとの見方もあり、ES 6に矢印関数を追加することで

を改善した.

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

a(); // window

>> 함수 a()을 호출하는 순간에 전역공간에서 호출한 것이다. 
   누가 호출한 것? 호출한 대상이 전역객체가 되는 것.

 function b () {
    console.log(this);
     function c () {
       console.log(this);
     }
   c(); >> 호출한 주체가 b()일 것 같은데, c()도 값이 전역 객체로 출력된다.
  }

b(); // window, window

let d = {
  e : function() {
    function f() {
      console.log(this);
    }
    f(); // window (함수로써 호출했기 때문에 전역객체)
  }
}
d.e();

>>> 

(2) ES6 : arrow funcion

矢印関数:ES 5の異議を収集することによって矢印関数を追加し、ES 6が関数の宣言を開始すると、この関数にバインドするオブジェクトが静的に決定されます.
矢印関数のthisは、関数呼び出しによって決定される動的関数ではなく、常に親のthisを指します.これをLexicalthisといいます.

2.メソッドの呼び出し時:メソッド名の前に、呼び出しメソッドのマスターを表示します.メソッド名の「点」の前の子がthisです.

let a = {
  
  b : function() {
    console.log(this);
  }
}
a.b();

> a : this
  b() : 메서드

b:あるオブジェクトに関連付けられた関数であるため、「メソッド」

となる

let a = { 
  b : {
    c : function() {
    console.log(this);
   }
  }
}

a.b.c();

> a.b : this
  c() : 메서드
  
  

点は、

を括弧で表すこともできる.

obj.func();
obj['func']();

person.info.getName();
person.info['getName']();
person['info'].getName();
person['info']['getName']();

3.コンストラクション関数を呼び出す場合(new演算子を使用する場合)

ジェネレータ関数に基づくコンテンツ作成インスタンスオブジェクト=>この場合、新しく作成されたインスタンスオブジェクト自体がそうである:

function Person(n, a) {
   this.name = n;
   this.age = a;
}

let roy = Person('재남', 30);
console.log(window.name, window.age); // 재남 30
-> new 연산자 없이 함수로 Person을 출력하면 전역객체.name, 전역객체.age

let roy = new Person('재남', 30);
console.log(roy);

-> new를 넣은 채로 호출하면 생성자 함수로서 호출한 거니까 roy라고 하는 이 변수 새로 생성될 person의 인스턴스 객체자신이 this가 되니까 this.name에 재남,  this.age 30