Today I Learn 0318

오늘은 오전에 im-prep스프린트를 페어분과 끝내고 오후부턴
this에 대해 학습하고 자습했다.
git workflow는 add,commit,push,pull,romote 정도만 써봤는데
무진장 많은 명령어가 있어 더 알아봐야 겠다.
stash,checkout 같은 것도 자주 쓰일것 같다.

this 키워드

this(excution context)는 함수가 호출될때 가리키는 객체로
다이나믹 스코프라 작성될때가 아니라 실행될때 스코프가 생성된다.

this를 실행하는 5가지 정도 규칙이 있다.

1.전역 this

this는 기본적으로 전역에서는 window객체를 가리킨다.
node에서는 global을 가리킨다

console.log(this) //브라우저:window, node: global;

하지만 strict mode에서는 undefined이다.
개발자가 window객체를 가리킬려고 this를 쓰진 않을 것

'use strict'

console.log(this) //undefined;

2. regular function invocation

일반적인 방법으로 함수를 호출하게 되면 this는 window객체를 가리킨다.

function foo(){
  console.log(this); //window;
}

foo()

예제

var name = 'daniel';

function foo () {
  let name = 'john';
  bar(name);
}

function bar(name){
  console.log(this.name) //daniel
}

foo()

조금 헷갈리는 문제로 john을 출력할 것 같지만
foo함수를 그냥 호출했기때문에 this는 window가 되어
전역변수인 window.name값 daniel 을 출력한다

3.dot notation(method)

오브젝트의 메소드 형태로 호출하는 dot notation을 사용하면
this는 .앞의 객체가 된다.

function foo (){
  console.log(this.age);
}
var age = 30
//let이 아닌 이유는 let은 전역변수로 선언해도 window 객체로 들어가지 않는다.
//보이지 않는 블록이 생긴다고 생각하면 됨

let john = {
  name: 'john',
  age: 27,
  foo: foo
};

let sarah = {
  name: 'sarah',
  age: 72,
  foo: foo
};

foo() // window.age = 30
john.foo() // 27
sarah.foo() //72

위의 1,2,3 방법은 implicit binding(묵시적인 바인딩)이라 불린다.

4-1.new keyword

new 키워드를 사용하면 this값은 빈객체가 새롭게 생성되고 함수에
그 빈 객체를 this로 할당해준다.

function Person(){
  this.age = 100;
  console.log(this); //{age: 100}
}

4-2.constructor function(생성자 함수)

생성자함수를 실행시킬때마다 this에는 새로운 객체가 할당이 돼서 실행이 된다. 새로 만들어진 객체들은 인스턴스. this는 인스턴스를 가리키게 된다.

function Car(something){
  this.hi = function(){
	console.log(this.name)
  };
  this.name = something;
};

let audi = new Car('audi');
audi.hi() // {'audi'}

5. call(),apply()

마지막 방법은 call,apply,bind 메소드의 첫번째 파라미터 값을 this로
Explicit binding(명시적 바인딩)을 하는것이다 .

function foo(){
  console.log(this.age);
}

let obj1 = {
  age: 17,
  foo: foo
};

let obj2 = {
  age: 27,
  foo: foo
}

obj1.foo.call(obj2) //27
obj2.foo.call(obj1) //17

call, apply 차이점

call,apply는 똑같이 this,arg를 바인딩 하지만
apply의 두번째 매개변수는 배열하나를 받는다.