this 6

[Javascript] bind 메서드

ES5에서 추가된 기능으로 call과 비슷하지만 즉시 호출하지않고 넘겨받은 this 및 인수들을 바탕으로 새로운 함수를 반환하기만 하는 메서드이다. 다시 새로운 함수를 호출할 때 인수를 넘기면 그 인수들은 기존 bind 메서드를 호출할 때 전달했던 인수들의 뒤에 이어서 등록된다. bind 메서드는 두가지 목적을 지닌다. 1. 함수에 this를 미리 적용하는 것 2. 부분 적용 함수를 구현 var func = function(a,b,c,d){ console.log(this, a, b, c, d); } func(1,2,3,4); //Window{...} 1 2 3 4 var bindFunc1 = func.bind({x:1}); bindFunc1(5,6,7,8) // {x:1} 5 6 7 8 var bindF..

[Javascript] call, apply 메서드, Array.from

Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) call / apply 메서드 call 메서드와, apply 메서드는 기능적으로 완전히 동일하다. call 메서드와 apply 메서드는 메서드의 호출 주체인 함수를 즉시 실행하도록 하는 명령이다. 이때 첫번째 인자를 this로 바인딩하고, 그 이후 인자들을 호출할 함수의 매개변수로 한다. 명시적 this 바인딩 지정 함수를 그냥 실행하면 this는 전역객체를 참조하지만 call, apply 메서드를 사용하면 임의의 객체를 this로 지정할 수 있다. 차이점은 call 경우 첫번째 인자 이후의 모든 인자들을 호출할 함수의 매개변수로 순서대로 지정하는 반면, apply는 두번째에 배열로 인자를 받아 호출할 함..

[Javascript] 콜백함수의 this

콜백함수는 함수A의 제어권을 다른함수(또는 메서드) B에게 넘겨주는 경우, 함수A를 콜백함수라고 한다. 이때 this는 함수B 내부로직에서 정한 규칙에 따라 값이 결정된다 -> 추후에 나오겠지만 전역객체 일수도, 메서드의 객체의 this일수도 있다. 콜백함수 내부에서의 this setTimeout(function(){ console.log(this); }, 300); [1, 2, 3, 4, 5].forEach(function(x){ console.log(this, x); }); document.body.innerHTML += '클릭'; document,body.querySelector('#a').addEventListener('click', function(e){ console.log(this, e); ..

[Javascript] 화살표함수(arrow function)의 this

ES6에 도입된 화살표함수(arrow function)는 실행 컨텍스트를 생성할때 this바인딩 과정 자체가 빠지게된다고 한다. 따라서 상위 스코프의 this를 그대로 활용할수있다. var obj = { outer: function(){ console.log(this); var innerFunc = () =>{ console.log(this); } innerFunc(); } }; obj.outer(); 결과 {outer: ƒ} {outer: ƒ} 이렇게 InnerFunc()를 함수로서 호출하였을때도 화살표함수로 innerFunc가 실행컨텍스트가 실행되므로 this바인딩 과정이 없다. 따라서 상위 스코프 this인 outer를 활용하는 것이다. 한가지 따로 테스트 한건 만약 outer프로퍼티도 화살표함수로..

[Javascript] this 함수, 메서드 차이 (1)

함수와 메서드는 미리 정의한 동작을 수행하는 코드 뭉치 함수와 메서드의 차이는 어떤 함수를 함수로서 호출하는지 메서드로서 호출하는지에 차이가 있고 그때에 this값이 다르다. 따라서 둘을 차이는 독립성에 나타난다. 함수는 그 자체로 독립적인 기능을 수행, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행 메서드는 객체의 프로퍼티에 할당된 함수라고 말하고 (50%) + 객체의 메서드로서 호출할 경우에만 메서드로 동작(50%) = 객체의 프로퍼티로 할당된 함수가 객체의 메서드로서 호출할경우를 메서드라고 한다 (100%) 예시코드 var func = function(x){ console.log(this, x); }; func(1); // window{...} 1 var obj = { method: func..

[Javascript] this, 전역변수, 전역객체 feat . configurable, defineProperty()

this this는 실행 컨텍스트가 생성될때 함께 결정된다. 즉 this는 함수를 호출할 때 결정된다. 상황마다 this값이 달라진다. 전역공간에서 this는 전역 객체이고 브라우저환경에서 전역객체는 window, node.js 환경에서는 global 이다. 브라우저환경 console.log(this); console.log(window); console.log(this===window); //true Node.js환경 console.log(this); console.log(global); console.log(this===global); //true 전역변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당한다. var a = 1; console.log(a); // 1 console.lo..