2020-12-28 TIL

자바스크립트

객체

• 자바 스크립트는 자바와 달리 설계를 가지고 ㅈ객체를 생성하는 것이 아니라 기본 객체를 만든 다음에 프로퍼티를 추가하는 것이다. 기본객체를 바탕으로 만든다고 해서 프로토타이핑 방식의 객체 생성이라 부른다.

프로퍼티 추가

• 생성자를 이용하여 기본 객체를 준비한 후에 필요한 프로퍼티를 추가할 수 있다.

arrow function

• arrow function에서 this 는 윈도우를 말한다.

• 객체의 멤버로 함수를 등록할 때는 애로우 펑션을 쓰지 않는다.

객체 생성과 초기화

• 자바 스크립트는 생성자 문법이 따로 없다.
  • 일반 용도의 함수와 생성자 용도의 함수가 있다.
    • 생성자로 사용되는 함수는 이름의 첫글자를 대문자로 쓴다.

인스턴스 함수를 공유

• 내부에서 생성된 공유 메모리(closure 공유 메모리)에 사용하는 변수를 둘 수 있다.
  • 함수가 매번 만들어져야 하면 비추천한다.
• 객체를 초기화시킨 생성자 constructor를 통해 알아낸다.
• 어떤 생성자를 통해 초기화가 되었는지 검사하는 연산자 instanceof

DOM API

• 도큐먼트 객체

  • 자바 스크립트에서 기본으로 제공하는 객체
  • 태그를 찾고 생성하는 것과 관련된 함수를 갖고있다.

• https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLHeadingElement

• 태그를 자바 스크립트 객체로 만든다.

  • 객체를 만들때는 생성자 함수를 이용한다.
    • 생성자 함수에는 상속 관계가 있다.
      • HTMLHeadingElement() —> HTMLElements() —> Element() —> Node() —> EventTarget() —> Object()

• html에서 태그의 아이디는 중복되지 않도록 해야한다.

  • getElementById
    • 아이디로 태그를 찾는다.
      • 여러개의 중복된 아이디가 있을 경우 getElementById로 찾았을 때 맨 처음 것만 출력된다.

• getElementsByTagName 으로 리턴되는 것은 HTMLCollection 객체

  • HTML 객체는 배열은 아니지만 배열처럼 length 프로퍼티가 있고 인덱스 번호를 사용하여 찾은 태그를 꺼낼 수 있다.
    • 반복문이 가능하다.
  • 배열이 아니기 때문에 for in 문법을 사용하면 필요한 값 외의 것들도 같이 출력될 수 있다.
  • for of 반복문은 사용 가능하다.

• class로도 태그를 찾을 수 있다.

• Css selector 문법으로도 찾을 수 있다.