JavaScript 객체 지향 프로그래밍

객체와 함수

수업소개

자바스크립트는에서 함수는 혼자 있으면 개인이고, new가 앞에 있으면 객체를 만드는 신이고, call을 뒤에 붙이면 용병이고, bind를 붙이면 분신술을 부리는 놀라운 존재입니다. 자바스크립트의 함수의 놀라움을 느껴보세요. 

 

 

 

강의1

수업의 오리엔테이션입니다. 

 

 

 

강의2

call을 통해서 실행할 때마다 this의 값을 변경하는 방법을 살펴보세요.

 

 

 

코드

object_function.js (변경사항)

var kim = {name:'kim', first:10, second:20}
var lee = {name:'lee', first:10, second:10}
function sum(prefix){
    return prefix+(this.first+this.second);
}
// sum();
console.log("sum.call(kim)", sum.call(kim, '=> ')); //apply
console.log("lee.call(kim)", sum.call(lee, ': '));

 

 

 

강의3

bind를 통해서 독립적이면서도 특정 객체의 메소드 역할을 할 수 있는 함수를 만들어보세요.

 

 

 

코드

object_function.js (변경사항)

var kim = {name:'kim', first:10, second:20}
var lee = {name:'lee', first:10, second:10}
function sum(prefix){
    return prefix+(this.first+this.second);
}
// sum();
console.log("sum.call(kim)", sum.call(kim, '=> ')); //apply
console.log("lee.call(kim)", sum.call(lee, ': '));
var kimSum = sum.bind(kim, '-> ');
console.log('kimSum()', kimSum());

 

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다.
  2. call는 함수에 일시적으로 객체인자를 받아 호출하고, bind는 call과같이 함수에 고정된 객체인자를 받아 새로운 함수를 만들어 호출합니다.
  3. call은 필요할때마다 부르는 듯하고 bind는 가족처럼 묶어버리는 느낌인 것 같습니다.

    call의 사용법은 함수이름.call(객체); 을 해주면 함수로 들어가서 this를 객체이름으로 설정해줍니다. 첫번째 인자는 객체를 받고 두번 째부터는 그 함수의 인자를 받습니다.
    bind는 새로운 변수를 생성해서 함수와 객체를 이어주는 역할을 합니다.
    var kimSum = sum.bind(kim, 함수에 들어가는 인자) ; 로 생성해주고
    생성된 변수를 호출하면 끝
  4. 변찬우
    질문1.
    예컨데 call은 누군든지(this) 키를 공유해주는 역할이고 bind는 지정(this)인만 사용할 수 있도록 지정 키를 새로 파주는 느낌이다. 자바스크립트는 맞춤형?이라고 해야하나?.. call(그때 그때 어느 객체나), bind(지정 객체)로 세분화?된 기능을 통해 코드 재사용성이 극대화 될 수 있을 것으로 기대된다. 다만 재사용되는 코드가 많아지면 레고 같은 느낌으로.. 뭐든 만들 수 있지만 뭣도 만들 수 없게 될 수 있지 않을까? 하는 양날의 검으로 생각되기도 한다.

    질문2.
    토르의 로키(new +), 엑스맨의 미스틱(+ call), 어벤져스의 닥터 스트레인지(+ bind)과 같은 존재가 아닐까?
  5. hyuna lee
    js의 모든 함수는 call()이라는 메소드가 있는데, call()을 통해 함수 호출을 하면 call의 인자로 주어지는 것이 함수가 실행될때의 this값이 된다. 다양한 인자를 줘서 다양한 객체에서 함수호출가능. bind()는 인자로 주어진 것이 함수가 실행될때 고정으로 this값이 되는 함수를 만들수 있다.
  6. ㅋㅋ 정말 기괴합니다... 자바스크립트
  7. egoing
    아 그러네여 ^^
    대화보기
    • 김혁
      안녕하세요.
      call 두번째 부분은
      console.log("lee.call(kim)", sum.call(lee, ': ')); => console.log("sum.call(lee)", sum.call(lee, ': '));
      이렇게 표현되어야 하는게 아난가 하는데요....
    graphittie 자세히 보기