var sayNode = function(){
console.log('Node');
};
var es = 'ES';
준비
const oldObject = {
sayJS: function() {
console.log('JS');
},
sayNode:sayNode
};
oldObject[es + 6]= 'Fantastic'구버전문법
const newObject = {
sayJS() {
console.log('JS');
},
sayNode,
[es + 6]: 'Fantastic'
};ES6에서의 간결해진 문법
(키와 값이 같은 항목은 한번만 타이핑 해도 된다.
동적할당을 리터럴 작성시 동시에 함께 작성가능해졌다.)
oldObject.sayNode();
newObject.sayNode();
oldObject.sayJS();
newObject.sayJS();잘되는지 확인
var add2 = function(x,y) {
return x+y;
};구버전의 함수 표현식 문법
const add3 = (x,y) => {
return x+y;
};신버전의 함수 표현식 문법(function이란 불필요한 타이핑을 피하게 되었다. 아래와 같이 return도 생략가능)
const add3 = (x,y) => x+y;return 생략시 기존 return 자리에 소괄호를 사용하서나 차라리 괄호를 사용하지 않아도 됨.
중괄호를 사용하려면 return까지 적어줘야 리턴가능하다. return을 생략을 하면 안된다.
function add1(x,y){
return x+y;
}함수선언문은 함수표현식(변수에 넣은 것)과 다르게 간략해지지 않았고 살아남았다.
그 이유가 있다. 바로 함수선언문의 내부와 화살표함수의 내부 this의 사용법이 다르기 때문이다.
두 함수 형태의 가장큰 차이점도 this라고 생각하면 된다.
var relationship1 = {
name: 'zero',
friends: ['nero', 'hero', 'xero'],
logFriends: function(){
var that = this;
this.friends.forEach(function(friend){
console.log(that.name, friend);
});
},
};
relationship1.logFriends();객체의 function 내부의 this는 내부처리로 인해 그 function 외부의 this와 달라지기 때문에 this를
that에 저장해서 써야 했다.
이해가 안되면 글의 아랫부분을 보자.
const relationship2 = {
name: 'zero',
friends: ['nero', 'hero', 'xero'],
logFriends() {
this.friends.forEach(friend=>{
console.log(this.name, friend);
});
},
};
relationship2.logFriends();화살표 함수는 함수 내부의 this를 내부처리하여, 상위함수의 this와 같게 만들어 준다.
this에 관해서 잘모른다면
자바스크립트에서 this는 기본적으로 window를 가리킨다.
따라서 this가 window를 가리키지 않는 경우만 몇가지 알고 있으면 된다.
1.
var obj = {
a: function() { console.log(this); },
};
obj.a(); // obj객체 메서드 a 안의 this는 객체를 가리킨다.
이것은 객체의 메서드를 호출할 때 this를 내부적으로 바꿔주기 때문에 그렇다.
호출할 때, this의 내부 처리는 호출하는 함수가 객체의 메서드인지 그냥 함수인지를 중요하게 여긴다.
var a2 = obj.a;
a2(); // window여기서 a2는 obj.a를 꺼내온 것이기 때문에 더 이상 obj의 메서드가 아니다.
this를 내부적으로 변경하지 않는다. 여전히 window를 가리킨다.
2.
var obj2 = { c: 'd' };
function b() {
console.log(this);
}
b(); // Window
b.bind(obj2).call(); // obj2
b.call(obj2); // obj2
b.apply(obj2); // obj2객체내 메서드 호출이 아니더라도
사용하면 명시적으로 this를 바꾸는 메서드가 존재한다.
삼총사 bind, call, apply를 사용하면 this가 내부 처리된다.
this가 객체를 가리킨다.
3.
document.body.onclick = function() {
console.log(this); // <body>
}이벤트가 발생했을때도 this를 내부처리한다.
this가 객체를 가리킨다.
4.
$('div').on('click', function() {
console.log(this);
});기타 라이브러리에서도 this를 내부 처리 할 수도 있다.
(제이쿼리 코드에서는 내부처리하여 객체를 가리키고 있다.)
따라서 특정 라이브러리 마다 확인이 필요하다.
$('div').on('click', function() {
console.log(this); // <div>
function inner() {
console.log('inner', this); // inner Window
}
inner();
});위에서 언급한 대로 제이쿼리를 사용하므로 this를 내부처리하여 <div>객체를 가리키고 있다.
그러나 독특하게도 제이쿼리의 내부함수에서는 this를 내부처리를 하지않는다. window를 가리킨다.
특이사항.
화살표 함수 사용시에는 this를 내부처리 하여 항상 상위함수의 객체를 가리키도록 되어있다.
상위 함수의 this가 아니라 다른 this를 원할때는 화살표 함수 대신에 function을 사용하면된다.
출처, 참조: https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb
'Node.js' 카테고리의 다른 글
| ES8(2017)에서의 변화 (0) | 2019.09.30 |
|---|---|
| ES6(2015)에서의 변화 3 (0) | 2019.09.30 |
| ES6(2015)에서의 변화 2 (0) | 2019.09.29 |
| Ant Design (0) | 2019.09.28 |
| React 적용하기 (0) | 2019.09.28 |
댓글