반응형
snowman95
코딩수련장
snowman95
전체 방문자
오늘
어제
  • 분류 전체보기 (229)
    • 앱테크 (3)
    • 옵시디언 (5)
    • 드라마, 영화 (1)
    • 개발자 이야기 (23)
    • 프로젝트 (10)
      • 프로젝트 방법론 (7)
      • 프로젝트 기록 (2)
      • Github (1)
    • 개발 지식 (0)
      • 디자인 패턴 (0)
    • 프론트엔드 개발 (5)
      • 테크트리 (2)
      • React.js (19)
      • ReactNative (2)
      • Next.js (6)
      • GraphQL (6)
      • 패키지 매니저 (2)
      • 라이브러리 (3)
      • 상태관리 라이브러리 (4)
      • Web 지식 (3)
      • HTML CSS (26)
      • Javascript (16)
      • 도구 (Tool) (3)
      • 성능 최적화 (1)
      • 디자인시스템 (0)
    • Python (53)
      • 모음집 (1)
      • 문법 (12)
      • 라이브러리 (15)
      • 알고리즘 (10)
      • 백준 문제풀이 (9)
      • 코딩테스트 (2)
      • 도구 (Tool) (3)
    • C++ (20)
      • 알고리즘 (6)
      • 삼성SW기출 (6)
      • 삼성 A형 (6)
    • 데이터사이언스 (1)
    • 인프라 (9)
      • 하드웨어 지식 (4)
      • Ansible (2)
      • Database (2)
      • 쉘스크립트 (1)
    • 주식 (0)
    • 취업 준비 (4)
      • 취업 이야기 (0)

블로그 메뉴

  • 홈
  • 태그

공지사항

인기 글

태그

  • 전공 요약 #데이터베이스
  • 언어
  • Next.js #graphql #tailwind.css
  • 알고리즘
  • C++
  • 전공요약
  • 삼성SDS
  • A형
  • 오블완
  • 백준
  • nextjs
  • 면접
  • 공간복잡도
  • 티스토리챌린지
  • 삼성SW역량테스트
  • 전공 요약 #네트워크
  • 전공 요약 #운영체제
  • 나의 해방일지
  • GraphQL
  • 기계식키보드 #nuphy

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
snowman95

코딩수련장

자바스크립트 - call, apply, bind
프론트엔드 개발/Javascript

자바스크립트 - call, apply, bind

2021. 8. 21. 20:52
728x90
반응형

call, apply, bind


객체 밖에 선언된 함수가 특정 객체의 프로퍼티를 다룰때 사용된다.

객체 밖에 선언되어 있으니 함수 내의 this가 무엇인지를 알 수 없는 상태인데

call/apply/bind 함수를 사용하여 this가 누군지 명시적으로 알려줄 수 있다.

 

call

인수를 개별적으로 받는다.

const user1={
  name:"sponge",
};
const user2={
  name:"bob",
};

function showInfo(){
  console.log(this.name);
}
showInfo.call(user1); → this에 user1 객체 들어감
showInfo.call(user2); → this에 user2 객체 들어감

function changeInfo(age, gender){
  this.age = age;
  this.gender = gender;
}
changeInfo.call(user1, 50, "male"); → this에 user1 객체 들어감

 

apply

인수를 배열로 받는다. call과 동작은 동일함.

const user1={
  name:"sponge",
};
const user2={
  name:"bob",
};

function changeInfo(age, gender){
  this.age = age;
  this.gender = gender;
}
changeInfo.apply(user1, [50, "male"]); → this에 user1 객체 들어감

 

bind

함수의 this를 특정 객체로 바인딩 해버린다.

 

const user1={
  name:"sponge",
};

function changeInfo(age, gender){
  this.age = age;
  this.gender = gender;
}

const changeUserInfo = changeInfo.bind(user1); → this에 user1 객체가 바인딩됨
changeUserInfo(50, "male"); → this는 user1

 

반응형
저작자표시 동일조건

'프론트엔드 개발 > Javascript' 카테고리의 다른 글

자바스크립트 - 프로미스 (promise)  (0) 2021.08.21
자바스크립트 - 클래스 (class)  (0) 2021.08.21
자바스크립트 - setTimeout, setInterval  (0) 2021.08.21
자바스크립트 - 클로저 (closure)  (0) 2021.08.21
자바스크립트 - 진수 변환, Math 라이브러리  (0) 2021.08.21
    '프론트엔드 개발/Javascript' 카테고리의 다른 글
    • 자바스크립트 - 프로미스 (promise)
    • 자바스크립트 - 클래스 (class)
    • 자바스크립트 - setTimeout, setInterval
    • 자바스크립트 - 클로저 (closure)
    snowman95
    snowman95
    (17~19) Unity/Unreal Engine 게임 프로그래머 (20~21) System Administrator ___________ (22~) React 웹 프론트앤드 개발자 __________ 깃헙 : https://github.com/snowman95

    티스토리툴바