TIL : this / 브라우저 저장소

hihyeon_cho·2023년 3월 31일

TIL

목록 보기

96/101

this 가 동작하는 원리와 용법을 아는대로 설명해주세요. 평소 코드 중에서는 어떤 부분에서 가장 큰 차이가 생기나요?

this ?

: 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조변수.

함수가 호출되는 방식에 따라 결정

일반 함수 호출 ⇒ 전역객체

메서드 호출 ⇒ 메서드를 호출한 객체

생성자 함수 호출 ⇒ 생성자 함수가 생성할 인스턴스

Function.prototype.apply/call/bind 메서드에 의한 간접 호출
⇒ Function.prototype.apply/call/bind 메서드에 첫번째 인수로 전달한 객체

this용법

객체 지향 프로그래밍
'this'는 현재 객체 인스턴스를 참조하기 위해 객체 지향 프로그래밍에서 자주 사용되며 속성과 메서드에 액세스하고 수정할 수 있습니다.
이벤트 처리
JavaScript에서 이벤트를 처리할 때 this는 이벤트를 트리거한 요소를 참조하는 데 사용할 수 있으므로 이벤트 또는 해당 속성을 조작할 수 있습니다.
함수 연결
'this'는 함수 연결에서 현재 개체를 참조하는 데 사용할 수도 있으므로 여러 메서드를 함께 연결하고 동일한 개체에서 간결하고 읽기 쉬운 방식으로 작동할 수 있습니다.
생성자 함수
생성자 함수를 정의할 때 this는 생성되는 새 개체를 참조하는 데 사용되며 속성과 메서드를 설정할 수 있습니다.
콜백 함수
경우에 따라 'this'는 호출 함수의 컨텍스트를 유지하기 위해 콜백 함수에 사용됩니다.

평소 코드 중에서는 일반 함수 호출에서 차이를 많이 느끼는 것 같습니다.

브라우저에서 이용할 수 있는 스토리지는 로컬스토리지와 세션스토리지가 있습니다.

web storage

웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소

저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송되지는 않기 때문에이는 네트워크 트래픽 비용을 줄여준다.
용량의 제한이 없다.

local storage
- 데이터를 영구적으로 보관할 수 있음
- 도메인별로 생성되기 때문에 도메인이 같으면 공유가 가능
- Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 가능
- ex) 자동로그인
session storage
- 브라우저가 열려있는 동안에는 페이지를 새로고침 하여도 유지가 되지만 브라우저가 종료되면 데이터가 삭제됨
- 도메인이 같아도 브라우저나 탭이 다르면 다른 저장소가 되어 서로 공유가 불가능
- Windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장과 조회가 가능
- ex ) 입력폼 정보 저장, 비로그인 장바구니, 글쓰기 도중 내용 복구하기