7.16.2024(화) TIL

🏃🏻‍♀️배운 것 

템플릿 리터럴로 함수 호출

 function html(text, ...val) {
  // x  text = <div class="ℓ"></div><><div>bye</div> 
  // 0  text =['<div class="ℓ">hi</div><><div>bye</div>',raw:['<div class="ℓ">hi</div><><div>bye</div>']]
  //    val = []
  
  
    console.log(text);
    
    return tpl(frag(String.raw({ raw: text }, ...val))).cloneNode(true); // HTML 템플릿을 생성하고 클론을 반환
  },
  
  const z = html`<div class="ℓ"></div><><div>bye</div>`;

템플릿 리터럴로 함수를 호출하면 text 가 아닌 배열형태로 매개변수에 변환되어 들어온다. 

 

HTMLCollection NodeList

HTMLCollection과 NodeList는 DOM API 가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체이다. 둘다 유사 배열 객체이면서 이터러블로 for of 문으로 순회 할 수 있고 스프레드 문법으로 사용하여 배열로 변환할 수 있다. 

단 HTMLCollection 은 언제나 노드 객체의 상태 변화를 실시간으로 반영하는 live 객체라는 점과,

NodeList 는 대부분의 경우 과거 정적 상태를 유지하는 non-live 객체로 동작하지만 경우에 따라 live 객체로 동작한다는 점이다. 

 

- HTMLCollection: live 객체 

- NodeList : 대부분 non-live 객체

 

* NodeList 가 live 객체인 경우 

: childNodes 프로퍼티가 반환하는 NodeList 객체는 HTMLCollection 객체와 같이 실시간으로 노드 객체의 상태 변경을 반영하는 live 객체로 동작함으로 주의가 필요함

 

생성자 함수에 의한 객체 생성

생성자 함수 ?  new 연산자와 같이 호출하여 객체(인스턴스)를 생성하는 함수 

 

객체 리터럴 {} 생성의 단점 

: 단 하나의 객체만 생성 

 

생성자 함수 생성의 장점 

: 프로퍼티 구조가 동일한 객체 다수 생성 

 

this?  객체 자신의 프로퍼티나 메서드 참조를 위한 자기 참조 변수 

 

생성자 함수의 인스턴스 생성과정 

1. 인스턴스 생성, this 바인딩 

: 암묵적으로 빈객체인 인스턴스가 생성되며, 인스턴스는 this에 바인딩된다. 이 과정은 런타임 이전에 실행한다. 

 

2. 인스턴스 초기화

: 생성자 함수 내부에 기술되어 있는 코드가 한줄씩 실행되어 인스턴스를 초기화한다. 

 

3. 인스턴스 반환 

this가 암묵적으로 반환됨

 

명시 반환 
- 다른 객체를 명시적으로 반환하면 명시된 객체가 반환되며 원시값(문자열,숫자,boolean, undefined,null, symbol)을 반환하면 무시된다. 

 

constructor: 함수 선언문, 함수 표현식, 클래스

non - constructor:  es6 축약 표현으로 작성한 메서드, 화살표 함수 

const haz = {
x : function (){} // 일반함수로 정의된 함수 . 메서드로 인정하지 않음
}

const obj = {
x (){}  //메서드로 인정
}