0215 React 개념설명 및 this

ES5

 

ES6 (2015)- 기존보다엄청난 변화가있음 , 현대 모던한 언어가 많이 추가됨 

페이지방식 ---------> 모듈방식으로 

-페이지방식은 순서에 따라서 결과값이 달라짐 아주문제가 많음

(ex. src="~~.js")

-모듈은? 순서가 상관없이 걍 가져옴

(ex. import )

 

---

변수선언시 const 와let 이 추가됨

var는 함수스코프를  따르고 const와 let을 블록 스코프를따름 따라서 기존 자바스크립트의  호이스팅이일어나지 않는다.

-const는 값이변경되면 안되는 상수 역할하는 것에 사용, 초기화 하면 다시 재할당 할 수 없다.

-let은 변경이 가능

또한 브라우저에서 실행 시

 var 선언한 변수는 window 객체의 속성으로 추가가 되지만, 

const나 혹은 let으로 선언한 변수는 window객체의 속성으로 추가되지 않는다 

 

2

Template Literals  : 가독석이나 간결하고 연결된 문자열을 작성 할 수 있다.

`(백틱 기호)를 사용하여 연결할 문자열을 감싼후 ${}안에 변수를 사용하여 문자열을 연결 할 수 있다.

const var1 = 100;
const var2 = '첫번째 문자열';
const var3 = '두번째 문자열';
const var4 = `var1:${var1},var2:${var2},var3:${var3}`;

 

3. this 키워드 의미

 : this는 호.출.하는 주.체.다 !!!

    console.log(this === window) // true. 호출자는 window
		var obj = {name:'kosmo', func: function() { 
		console.log(this === window);false
		console.log(this===obj);//true
		console.log(this.name);//kosmo
		}
	};

 

콜백함수에서의 this에도

이벤트 핸들러(콜백함수) 안의 this는 이벤트가 발생한 객체(역시 호출하는 주체!!)

 +++ es5에서 this를 설정할 수 있는 bind함수가 추가됨

 

var 함수=원래함수명.bind(객체) 는 바인딩된 함수를 반환 즉 원래함수명안의 this는 객체로 바인딩 된다.

function print(){
			console.log(this);//이때 this는 window인데 이를 다른 객체로 바인딩하자
		}
		//1. 바인딩할 객체 정의
		let person ={
			name:"코스모",
			
		}
		//2.bind함수로 해당 함수의 this를 1에서 정의한 객체로 바인딩
		let print1= print.bind(person)
		print1();//이때 this는 person
		//print1에 다시 바인딩하기
		let person2 ={
			name:"코스모2",
		}
		let print2=print1.bind(person2);
		print2();//이때도 역시 person이다 person2가 아니다

 

---

생성자 함수에서 this  (class랑 비슷함)

 

 

 

---

리터럴 객체의 메소드안에서의 this  

함수안에 또 함수 일때 inner함수의 this 바인딩이 되어있지 않아서 window 객체임!!

밖의 함수에 bind하려면 ??(세가지 방법)

요건 세번째 방법

---

애로우함수에서의 this

 ** 참고로 익명함수에다가 bind는 가능하지만 유명함수일 경우에는 bind를 할 수 없다!!

// 이건안되고
function abc(){
	!!
}.bind(객체)

//이건 됨
let abd = function(){
	~~
}.bind(객체)

화살표함수를 사용하면 this가 가르키는게 달라지니까

조심해야 함!!!

아래는 window객체가 찍힌다.

 

근데 이건반대

화살표함수에서의 this는 기본적으로 상위 객체의 문맥을 따른다.

화살표함수를 감싸고있는(화살표 함수 상위에) 문맥이 있기 때문에 !! 상위 문맥에 있는 this를 물려 받음

그니까 후려치면

함수안에 함수가 정의되어 있는 데  inner함수를 화살표함수로 해야 this가 밖의 함수를 가르킨다

inner함수가 화살표 함수가 아니라면 binding이 되어있지 않아서 이 때는 window객체가 된다는것!

(아까 처음에 했던 개념!! 콜백함수는 호출한 주체가 없으니까 window라는 그 개념!!)