sizzF의 프로그래밍 공부

함수가 만들어졌을때 생성되는 this

this는 함수가 동작하고 있는곳에 오브젝트와 연결됨(어디서 동작중인지에 따라 바뀜)

let getThis = function() {
	console.log(this);
    }
    
let testObject = {
    name: 'seungmin',
	getThis: getThis,
    }
    
getThis();
testObject.getThis();

위와같은걸 묵시적 바인딩

명시적바인딩(this를 어디에 연결할지 정하기)을 하기위해서 call(), apply()를 사용

명시적바인딩이 묵시적바인딩보다 우선순위가 높음

하드바인딩

하드바인딩은 this를 지정한 새로운 함수를 반환해줌

myMethod = myMethod.bind(myObject);

myMethod(); // this === myObject

우선순위 : 하드바인딩 > 명시적바인딩 > 묵시적바인딩

let getThis = function () {
  console.log(this);
};

let obj1 = {
  a: 2
};

let obj2 = {
  a: 3
};

getThis = getThis.bind(obj1); // 2
getThis.call( obj2 ); // 2 명시적 바인딩은 obj2이나, obj1로 하드바인딩 되어있음

화살표함수는 함수를 짧게쓰는 용도로만 사용하는것이 아니다.

화살표함수는 자체 컨텍스트가 없는 짧은 코드를 담는 용도로 만들어짐

자바스크립트에서는 함수를 생성하고 그함수를 어딘가에 전달하는 경우가 많은데

이경우 함수의 컨텍스트를 잃을 수 있는데 이때 화살표 함수를 사용하면 컨텍스트를 유지하는것이 가능.

화살표 함수에는 this가 없다.

자기자신의 this가 없기때문에 외부에서 값을 가져올수있음

 요약

this가 없음

arguments가 없음

new와 함께 호출 불가

클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수다

클로저는 외부변수를 기억하고 외부변수에 접근할 수 있는 함수를 의미

자바스크립트에서는 모든함수가 자연스럽게 클로저가 된다

자바스크립트의 함수는 숨김프로터티인 [[Enviroment]]를 이용해서 자기가 어디에서 만들어졌는지를 기억한다.

이걸 이용해서 외부의 변수에 접근할수 있다

poiemaweb.com/js-closure

tbody.addEventListener('click', function(e){
	console.log('커런트타겟', e.currentTarget); //커런트타겟 <tbody></tbody>
	console.log('타겟', e.target); //타겟 <td></td>
});

e.currentTarget : 실제 이벤트리스너를 단 대상이 표시됨

e.target : 실제로 이벤트리스너가 발생한 부분이 표시됨

자바스크립트에는 파이썬처럼 공식 스타일 가이드가 존재하지 않는다

여러가지 스타일 예시

pragmatic.js : http://markdaggett.com/blog/2013/02/15/pragmatic-javascript-style/

에어비앤비 스타일 : https://github.com/airbnb/javascript

idiomatic.js : https://github.com/rwaldron/idiomatic.js/

Node.js : https://github.com/felixge/node-style-guide