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. labis98
    20210904 좋은 강의 감사합니다.
  2. call은 실행하는 순간 그 함수가 참조하는 this의 값을 바꾸고 bind는 그 함수를 새로운 함수로 return해 새로운 함수의 this 값을 바꾼다.
  3. 싸알
    call, bind 공통점: 첫번째 인자로 this값을 받는다. 차이점: call은 this값을 바꾼 후 호출, bind는 this값을 고정시키는 새로운 함수 생성
  4. hyun e
    call과 bind 모두 함수를 호출하는 역할을 한다.
    다만 차이점이 있다면, call은 내가 실행하고자 하는 함수의 this 값을 바꿔준다. 그런데 영구적인 것이 아니라, 일시적인 것이며 그때 그때 새롭게 값을 줄 수 있다.
    bind는 call과는 다르게 어떤 함수의 내부적인 this의 값을 영구적으로 바꾸는 새로운 함수를 만들어준다. 즉 새롭게 사용할 객체를 아예 고정시켜 버리는 것이다.
  5. 나샤
    call과 bind의 공통점 : 객체 kim에 함수 sum을 담는다. this가 객체 kim으로 고정된다.
    call과 bind의 차이점 : call은 결과값을 나타낸다. bind는 새로운 함수로 나타낸다.
  6. 박병진
    cal은 실행되는 함수의 this 값을 원하는 객체로 바꿔서 실행할수있게 해준다.
    bind는 실행되는 함수의 this값을 원하는 객체를 고정시키는 새로운 함수를 만들어낸다.
  7. yeoandante
    call 메소드는 주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출합니다.
    bind 메소드는 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this keyword를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다.
  8. Giri
    감사합니다.
  9. plora
    call는 함수에 일시적으로 객체인자를 받아 호출하고, bind는 call과같이 함수에 고정된 객체인자를 받아 새로운 함수를 만들어 호출합니다.
  10. bread
    call은 필요할때마다 부르는 듯하고 bind는 가족처럼 묶어버리는 느낌인 것 같습니다.

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

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