JS Day 5 객체복사,this,생성자함수

JS Day 5 객체복사,this,생성자함수

1. 객체 복사

   • 객체는 원시타입과 다르게 참조된 주소값을 저장하고 있다는 것을 알고 있다.
   • 객체 A가 있다치면 동일한 프로퍼티를 갖는 객체 B를 복사해서 만들고 싶다면 Object.assign 메소드를 사용한다.

   /*
   *	Object.assign(dest, src1, src2 ...);
   *	대상이 되는 dest에 src1, src2 객체의 프로퍼티를 복사한다
   *	동명의 프로퍼티가 있을 경우 기존 값에 덮어씌운다
   */
      
   const zoo = {
       rabbit : 9,
       fox : 4,
       mouse : 2
   };
   const clone = Object.assign({}, zoo);
   //clone = {rabbit: 9, fox: 4, mouse: 2}
   

   • 하지만, 목표 객체의 프로퍼티가 원시값이 아닌 객체라면 다시말해, 객체 안에 객체가 있을 경우에는 Object.assign()으로 복사 할 수 없다.
   • 그런 경우에는 lodash 라이브러리의 _.cloneDeep() 메소드를 이용하자.

   
   

2. Arrow Function에서의 ‘this’

   • arrow function의 this는 상위 scope의 this를 가리킨다.
   • 객체 안에 함수를 정의 할 때(scope가 여러 단으로 나뉠때) function()으로 정의하는 것과 arrow function으로 정의하는 것에는 큰 차이가 있다.

   //how 1.
   const nowTime = {
       hour : 12,
       sayHour() {
           let notArrow = function(){
               console.log(this.hour);
           }//.bind(this);
           notArrow();
       }
   };
   nowTime.sayHour(); //undefined 출력
      
   //how 2.
   const nowTime = {
       hour : 12,
       sayHour() {
           let Arrow = () => console.log(this.hour);
           Arrow();
       }
   };
   nowTime.sayHour(); //12 출력
   

   • how2에서 arrow function의 this가 외부의 컨텍스트에서 this값을 가져온 것을 확인 할 수 있다. how1에서 같은 효과를 얻으려면 함수의 뒤에 .bind(this)를 붙여서 바인딩을 해주면 된다.

   
   

3. 생성자 함수

   • 코드를 재사용하기 위해 함수를 생성자처럼 이용 할 수 있다.
   • 함수의 첫 글자는 대문자로 시작하고 new 연산자로 사용한다
   • 모든 함수가 생성자 함수가 될 수 있다.

   function Animal(name, kind) {
       this.name = name;
       this.kind = kind;
   }
   let fox = new Animal("foo", "fox");
      
   console.log(fox.name); //foo 출력
   console.log(fox.kind); //fox 출력
   

   • 생성자 함수 내에 메소드를 정의하여 유연한 코딩을 할 수도 있다.

   function Animal(name) {
       this.name = name;
       this.eat = () => console.log(this.name+"가 먹이를 먹습니다");
   }
   let foo = new Animal("foo");
      
   foo.eat(); //'foo가 먹이를 먹습니다' 출력
   

참고 자료

JAVASCRIPT.INFO