𝐓𝐨𝐝𝐚𝐲 𝐈 𝐋𝐞𝐚𝐫𝐧 2022.04.28.목

Today I Learn 220428

<setAttribute()와 classList.add()의 차이>

setAttribute()는 거의 사용하지 않음

• setAttribute는 너무 강력해서 거의 사용하지 않음.
• 이는 inline으로 스타일을 적용하는 것이라 CSS 파일에서 적용한 설정보다 우선으로 적용됩니다. 때문에 잘 사용하지 않는다!!

따라서,

1. 정확히는 setAttribute()와 classList가 다루고 있는 대상의 범위가 다름

#setAttribute()는 HTML 요소에 inline 스타일로 어떠한 속성을 추가하는 것
-class 속성
-style 속성
-href 속성
-....등등
#classList()는 요소의 여러 속성 중 하나인 클래스 속성만을 다루는 것

1. 요소에 클래스를 추가/변경/제거 하는식으로 요소를 동적으로 다루고 싶다면, classList를 추천!

사실 실무에서는 둘 다 사용하지 않는다!

 

this - "자기참조변수"

정의

• 내가 어떻게 불리느냐에 따라 바인딩 되는 것.

목적

• "객체"에서 "내"가 프로퍼티나 메서드를 참조하기 위해

---

"어디서" "어떻게" 부르느냐에 따라 this는 달라진다!

• 일반 함수로 호출 되었을 때 -> 전역 객체
  • 함수() -> window

  function test(){
      console.log(this)
  }
  test()

  Window {0: global, window: Window, self: Window, document: document, name: '', location: Location, …}

• 메서드로 호출 되었을 때 -> **"그" 메서드를 보유한 객체 **
  • 객체.메서드() ->객체

  const obj = {}
  
  const obj = {
      test : function(){
          console.log(this)
      }
  }
  
  obj.test()

{test: ƒ}
	test: ƒ ()
		arguments: null
		caller: null
		length: 0
		name: "test"
		prototype: {constructor: ƒ}
		[[FunctionLocation]]: VM4936:2
		[[Prototype]]: ƒ ()
		[[Scopes]]: Scopes[2]
	[[Prototype]]: Object

• 생성자 함수로 호출 되었을 때 -> "미래"에 생성될 "인스턴스" -> 객체

  Teacher {name: 'iseo'}
  	name: "iseo"
  	[[Prototype]]: Object
  		constructor: ƒ Teacher(name)
  		[[Prototype]]: Object

  //cf.
  const person2 = Teacher('iseo')
  //이렇게 넣으면(new키워드 빼먹으면) 일반 함수 호출과 같아져 전역인 window에 Teacher : 'iseo'가 들어가버림....
  //결론 : 이 경우의 this는 window에 바인딩 되어버린다!!

• function Teacher(name){
      this.name = name
      //"미래"에 생성될 "인스턴스"
  }
  
  const person = new Teacher('iseo')
  
  person

• apply/call/bind로 "간접"호출 되었을 때

참고하기 좋은 블로그 글 링크

• https://hanamon.kr/javascript-this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C/
• https://nykim.work/71