자바스크립트 this, bind

 자바스크립트 this, bind




this

상황에 따라 어떠한 객체를 가리키는 키워드이고, this는 함수를 호출한 객체입니다.

보통 함수를 호출 할 때에 aTest()라고 호출을 하지만 전역객체를 쓰지 않아도 가능해서 이렇게 쓸 수 있습니다. 전역객체에서 접근하려면 window.aTest()라고 호출합니다.

하지만 코드 상단에 'use strict'를 입력하면 window.aTest()라고 입력해주어야합니다.


"use strict";
function aTest() {}

window.aTest();

함수를 정의하게 되면 이 함수는 자동으로 window 객체에 등록이 됩니다.

function으로 함수를 정의하면 window객체에 등록이 되지만 화살표함수는 window객체에 등록이 되지 않습니다.


function aTest() {}

const aaTest = () => {};

console.log(window);

그래서 함수를 호출한 객체라고 부릅니다.


function aTest() {
  console.log(this); // window
}

aTest();

aTest 함수안에서 this를 찍어보면 함수를 호출한 객체를 가르키고 있습니다.

객체(Object)에서의 this


const object = {
  name: "kim",
  age: 30,
  main: function () {
    console.log(this); //name: 'kim', age: 30, main: f
  },
};

object.main();


this는 함수를 호출한 객체를 가르키기 때문에 object안에 있는 내용들을 출력합니다.

이 this를 이용해서 객체에 있는 속성에 접근 할 수 있습니다.


const object = {
  name: "kim",
  age: 30,
  main: function () {
    console.log(this.name); // kim
  },
};

object.main();


만약 main 함수를 다른 변수에 넣고 호출한다면 


const object = {
  name: "kim",
  age: 30,
  main: function () {
    console.log(this); // window
  },
};

const main2 = object.main;
main2();

main2는 window를 가리키게 됩니다. main2는 어떠한 객체에도 속하지 않기 때문에 전역객체인 window를 가리킵니다.

함수는 꼭 객체 안에서 만들 필요는 없습니다.


function main() {
  console.log(this); // name: 'kim', age: 30, main: f
}

const object = {
  name: "kim",
  age: 30,
  main,
// es6문법에서는 속성명(key)과 값(value)의 이름이 같으면 값 생략가능
};

object.main();

함수를 먼저 생성하고 object에 구성원으로 추가를 해주어도 this는 object를 가리킵니다.

또는


function main() {
  console.log(this); // name: 'kim', age: 30, main: f
}

const object = {
  name: "kim",
  age: 30,
};
object.main = main;

object.main();

object 객체에 접근해서 main 속성을 추가해 main 함수를 넣어서 추가 할 수도 있습니다.

이벤트처리에서의 this

html 파일에서 button을 만들고 id를 button으로 주고 이벤트 안에서 this를 알아보겠습니다.


let btn = document.getElementById("button");

btn.addEventListener("click", function () {
  console.log(this); // <button id = 'button'>버튼</button>
});

이벤트안에서의 this는 이벤트를 발생시킨 돔요소를 가리킵니다.


bind

bind는 함수처럼 호출 가능한 새로운 함수로 특수객체를 반환합니다.

첫번째 인자는 this키워드를 가리키는 객체이고 두번째 인자부터는 바인드된 함수의 인수로 제공 됩니다.

이 객체를 호출 하면 this를 원하는 형태로 묶어서 고정된 함수로 반환합니다.

함수를 누가 호출 하든, 어떻게 호출하든 상관없이 this값이 바뀌지 않도록 내가 원하는 객체로 고정하고 싶을 때 사용합니다.


let user = {
  name: "kim",
  age: 30,
};

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

const mainBind = main.bind(user); // {name: 'kim', age: 30}

mainBind();

bind 메서드를 쓰지 않으면 어떠한 객체에도 속하지 않은 함수의 this는 전역객체인 window를 가리키지만 bind 메서드를 쓰면 내가 원하는 객체를 가리킬 수 있습니다.

bind 메서드를 쓰면 bind된 함수를 object에 추가를 해도 내가 지정한 객체만을 가리킵니다.

이것 말고도 인수를 고정해서 사용할 수도 있습니다.


function cal(a, b) {
  console.log(a + b); //7
  console.log("a", a); // 2
  console.log("b", b); // 5
}

let num = cal.bind(null, 2);

num(5);

bind의 첫번째 인자는 항상 실행컨텍스트를 넘겨줘야 하지만 여기서는 넘겨줄 객체가 없으므로 null을 주고 a의 값을 고정시켰습니다.

주의할 점은 이미 bind된 함수는 또 bind를 할 수 없습니다. bind된 함수를 또 bind를 한다해도 처음에 내가 지정한 객체만을 가리킵니다.

-

댓글

댓글 쓰기

이 블로그의 인기 게시물

[정보처리기사] OSI 7계층 정리

 [정보처리기사] OSI 7계층 정리  7계층 - 응용계층 데이터 또는 프로그램 사용장비: 없음 6계층 - 표현계층 압축, 암호화 사용장비: 없음 5계층 - 세션계층 연결(로그인등) 사용장비: 없음 4계층 전송계층(트랜스포트 계층) 양종단간 신뢰성 전달 TCP/UDP 7,6,5 계층에서 내려온 데이터에 헤더를 붙이고 이것을 세그먼트라고 함 사용장비: 없음 3계층 네트워크계층 빠르게 연결 IP 세그먼트를 내려 받아서 헤더를 붙이고 이것을 패킷이라고 한다. 사용장비: 라우터(패킷을 목적지까지 최적의 경로를 통해 전달) 라우터 프로토콜의 종류 정적 라우터: 관리자가 직접 입력 동적 라우터  - IGP(내부 라우터) 거리 벡터 알고리즘(Distance Vector)          RIP: 벨만-포드 알고리즘 사용                  홉 수 기반 라우팅 프로토콜이며 최대 15홉수 지원 링크상태 알고리즘(Link-State Vector)         OSPF: 다익스트라 알고리즘 기반                    링크 상태 변화 시 라우팅 정보 전송 - EGP(외부 라우터)         BGP: 대규모 네트워크에 적합한 Path Vector 기반  2계층 - 데이터 계층 인접한 노드간에 신뢰성 전달 패킷을 내려 받아서 헤더를 붙이고 이것을 프레임이라고 한다. 사용장비: 스위칭허브(허브 기능에 스위치 기능 추가), 브리지(두 개 이상의 LAN을 연결하여 하나의 확장된 네트워크를 형성) 1계층 - 물리계층 데이터를 비트 형태로 바꿔서 전달 사용장비: NIC(랜카드), 더미허브(네트워크 내에 여러 노드를 연결), 리피터(증폭기) 7...
자세한 내용 보기

블로그스팟 상위노출 시작하기

이미지
블로그스팟 상위노출 검색엔진 최적화를 위해서 해야하는 두가지 작업이 있습니다. 바로 sitemap과 rss를 구글서치콘솔에 제출해야 합니다. rss와 sitemap을 등록하는 이유는 검색로봇이 주기적으로 재방문하여 내 사이트의 글을 적극적으로 알리는 덕분에 내가 블로그에 글을 작성하면 주기적으로 수집을 해줍니다. 구글에 상위노출을 하려면 구글서치콘솔에서 제출해야하고 네이버에서 상위노출을 하기 위해서는 서치어드바이저에서 제출하면 됩니다. sitemap이란? 사이트맵은 구글이나 네이버와같은 검색엔진에 색인 할 모든 페이지를 나열한 XML 파일입니다. 색인(index)이란? "색인은 책 속의 낱말이나 구절, 또 이에 관련한 지시자를 찾아보기 쉽도록 일정한 순서로 나열한 목록을 가르킨다. 인덱스(index)라고도 한다" - 위키백과 즉 알아보기 쉽도록 표시해둔 목록이라는 말입니다. 웹에서의 색인은 데이터를 기록할 때 데이터의 이름이나 크기 등의 데이터를 보여주는 속성과 이러한 데이터를 기록한 장소등을 보기쉽게 표시하는 것으로 데이터에 대한 참조용 데이터 를 색인이라고 합니다. 특히 검색엔진에서 색인이라는 말은 검색을 더욱 빠르게 하기 위해서 데이터를 저장하는 장소입니다. 알아보기 쉽도록 표시해둔 색인이 없다면 어떠한 단어를 검색 했을 때 모든 문서를 뒤져야 찾아야 할 것이기 때문에 데이터 검색이 매우 느리거나 원하는 데이터를 찾는데 많은 시간을 쏟을 수 있습니다. sitemap.xml 파일을 열어보면 위의 이미지처럼 게시글의 정보가 담겨있습니다. RSS란? RSS는 Real Simple Syndication의 약자입니다. 웹사이트에 신규로 등록되는 최신 콘텐츠에 대한 요약된 정보를 빠르게 제공하기 위한 포멧으로 블로그, 뉴스, 칼럼 등 업데이트가 잦은 콘텐츠들을 사용자가 편하게 볼 수 있도록 만들어진 규약입니다.  RSS가 등장하기 전에는 원하는 정보를 얻기 위해 해당 사이트를 직접 방문해야 했지만 RSS를 이용하여 자동 수집이 가능해졌기 때문에 사...
자세한 내용 보기

데이터베이스 데이터 정의어(DDL), 자료형(데이터 타입)

이미지
데이터베이스 데이터 정의어(DDL), 자료형(데이터 타입) 데이터 정의어(DDL) 데이터 정의어(DDL : Data Definition Language) 데이터베이스 구조를 정의하고 변경하는 언어 입니다.  스키마를 정의하거나 수정 또는 삭제 하기 위해 사용합니다. 쉽게 설명하면 테이블(표)를 만드는 것입니다. 질의문 끝에는 세미콜론(;) 으로 문장의 끝을 표시해야합니다. SQL 질의문은 대소문자를 구분하지 않지만 보기쉽게 포스팅에는 대문자로 표기하겠습니다. 테이블 생성 CREATE TABLE 테이블명 고객 테이블을 생성하는 예제를 만들어보겠습니다. CREATE TABLE 고객 ( 고객번호 INT NOT NULL, 속성명: 고객번호, 타입: INT, NOT NULL: NULL값 허용안함 아이디 VARCHAR (30), 속성명: 아이디, 타입: VARCHAR(글자수 30), NULL값 허용 등급 VARCHAR (30), 속성명: 등급, 타입: VARCHAR(글자수 30), NULL값 허용 이름 VARCHAR (100) NOT NULL, 속성명: 이름, 타입: VARCHAR(글자수 100), NULL값 허용안함 나이 INT NOT NULL, 속성명: 나이, 타입: INT, NULL값 허용안함 성별 VARCHAR(1) NOT NULL, 속성명: 성별, 타입: VARCHAR(글자수 1), NULL값 허용안함 주소 VARCHAR(255) NOT NULL, 속성명: 주소, 타입: VARCHAR(글자수 255), NULL값 허용안함 상세주소 VARCHAR(255) NOT NULL,   속성명: 상세주소, 타입: VARCHAR(글자수 255), NULL값 허용안함 연락처 VARCHAR(18) NOT NULL, 속성명: 연락처, 타입: VARCHAR(글자수 18), NULL값 허용안함 비상연락망 VARCHAR(18) DEFAULT '' 속성명: 비상연락망, 타입: VARCHAR(글자수 18), NULL값 허용, DEFAULT(기본값): 공백 PRIM...
자세한 내용 보기