Lee Jun Hyeok

안녕하세요~😸

2 분 소요

JS의 문법총정리(상)🍍

🏳️ for, if 등등 기초를 제외한 고급 문법들을 배워보자.


index.html


  console.log(this);     // window

  function a() {
    console.log(this);
  }

  a();    // window

  const b = {
      c() {
          console.log(this);
      },
      d: () => {
          console.log(this);
        }
  }

  b.c(); // 객체b를 가리킨다.
  b.d(); // window를 가리킨다.

‘this의 뜻(1)’

일반적으로 this란 window를 가리킨다. 일반적인 함수에서도 window를 뜻하지만 ‘use strict’를 사용하면 undefined를 뱉어낸다. 함수가 객체에 포함되어 있다면 함수내의 ‘this’는 객체를 가리킨다. (즉 메소드의 this는 객체) 🚩주의) 신문법 arrow function을 사용하면 함수바깥의 값을 그대로씀


index.html


      function abc() {
        this.name = "Lee";
      }

      let a = new abc();

      console.log(a);  // abc {name: 'Lee'}

      document.getElementById("button").addEventListener("click", function (e) {

        console.log(this);               //<button id="button">a</button>

        console.log(e.currentTarget);   // <button id="button">a</button>

      });

‘this의 뜻(2)’

생성자 사용시 객체를 의미한다. addEventListener안에서의 this란 ‘현재 이벤트가 동작하고 있는 장소’를 뜻한다. 그 이외의 콜백함수에서의 this는 일반적이라면 window의 값을 갖는다.


index.html


let 객체1 = {
    메소드() {
        console.log(this.name + ' 입니다')
    }
}

var 객체2 = {
    name : '이준혁'
}


객체1.메소드.apply(객체2);   // 이준혁 입니다  (객체2, [arr]) 인자로 배열을
객체1.메소드.call(객체2);   // 이준혁 입니다   (객체2, 1,2,3) 인자로 값을

‘apply와 call 사용해보기’

‘객체1의 메소드를 객체2에서 사용하고 싶다~’ 할때 사용하는 내장함수들 이다.


index.html


      function Abcd(name, age) {

        this.name = name;   // 새로생성될 객체의 이름

        this.age = age;      //  ''

      }

      let people = new Abcd('lee',28);

      console.log(people);  // Abcd {name: 'lee', age: 28}

‘constructor’

오브젝트의 복사를 도와주며 보통 찍어낼 오브젝트를 만드는 함수는 대문자로 시작한다.


index.html


      function Abcd(name, price) {

        this.name = name;

        this.price = price;

      }

      Abcd.prototype.sale = "10%";              // Abcd에 sale = '10%'라는 것을 추가하겠다. 하지만 Abcd를 출력하면 보이진않는다

      let item = new Abcd("shoes", 50000);

      console.log(item.sale); // '10%'

‘prototype’

prototype의 동작원리 ➡️ ‘객체[키]’라고 치면 우선 객체가 키를 갖고 있는지 확인 ➡️ 만약 없다면 부모의 prototype에 키값이 있는지 확인 ➡️ 만약 없다면 부모의..부모의.. prototype에 키값이 있는지 확인

‘var arr = [1,2,3] ➡️ var arr = new Array(1,2,3)’ 즉, Array라는 부모를 가진 arr는 부모의 키,prototype을 사용할 수 있게된다.

  1. prototype은 함수에만 생성됨
  2. '자식.__proto__' 부모의 prototype을 알고 싶을때 사용
  3. __proto__를 사용하여 강제로 부모,자식 관계를 만들수 있음


index.html


   let 부모 = { name: "lee" };

   let 자식 = Object.create(부모);  // 부모의 키를 사용가능

   console.log(자식.name); // 'lee'

‘prototype의 신문법(es5)’

간편하게 쓸 수 있지만 잘 안쓸거같다.


index.html


      class 부모 {

        constructor(name) {

          this.name = name;

          this.hi = function() { console.log('hi') };  // 자식이 직접 함수를 가짐

        }

        hi() { console.log('hi') };    // 부모.prototype 에 추가됨, 모든자식이 다 사용하고 관리편함

      }

      let 자식 = new 부모("lee");

      console.log(자식.name);

‘prototype의 신문법(es6)’

가장 세련되었다. 함수를 선언하는 방법이 2가지 있는데 각각의 장단점이있다.

‘부모.prototype’ === ‘자식.__proto__’ === ‘Object.getPrototypeOf(자식)’


index.html


class 할아버지{
  constructor(name){
    this.성 = 'Kim';
    this.이름 = name;
  }

  sayHi(){                              // 할아버지.prototype에 함수 생성
    console.log('안녕 나는 할아버지')
  }

}

class 아버지 extends 할아버지{          // 할아버지라는 class를 그대로 상속받겠다.= extends
  constructor(name){
    super(name);                      // this.성 = 'Kim'; this.이름 = name; super란 이것을 의미하고 이것을 써야 this를 사용할 수 있음.
    this.나이 = 50;
  }
  sayHi2(){
    console.log('안녕 나는 아버지');
    super.sayHi();                    //console.log('안녕 나는 할아버지')
  }
}

var a = new 아버지('만수');

‘class 사용법’

할아버지라는 class를 그대로 사용하고 싶다면 extends를 사용하고 super를 사용하여 매개변수를 그대로 써줌


index.html


class 사람 {
  constructor(){
    this.name = 'Park';
    this.age = 20;
  }
  get nextAge(){              // 가져오는 함수
    return this.age + 1
  }
  set setAge(나이){           // 수정하는 함수
    this.age = 나이;
  }
}

var 사람1 = new 사람();

사람1.nextAge;      // 21

사람1.setAge = 30;  // 30이 들어감

‘getter, setter의 사용법’

게터, 세터는 직관성과 안전을 위해 사용한다. getter는 사용시 무조건 return이 있어야하고 setter는 매개변수가 1개 이상 있어야 사용가능하다.

업데이트: