대상 프로그래밍 세계 첫걸음 (this &call &apply &bind)

1. firstCase

CODE

 var obj1 = {
  name:"everyone",
  hi:function(){
    console.log("Hello!" + obj1.name)
  }
}
obj1.hi()
obj1.hi.call() 

CONSOLE

"Hello!everyone"
"Hello!everyone"

2. secondCase

CODE

var obj2 = {
  name:"jack",
  hi:function(person){
    console.log("hi!" + person.name )
  }
}
obj2.hi(obj2)
//obj2.hi.call(obj2)， 

CONSOLE

"hi!jack"

3. thirdCase

CODE

var obj3 = {
  name:"rose",
  hi:function(name){
    console.log("hi!" + 
  name)
  }
}
obj3.hi(obj3.name)
obj3.hi.call(obj3.name)

CONSOLE

"hi!rose"
"hi!undefined"

COMMENT

콜이 전송한 매개 변수는 대상의 속성을 사용할 수 없습니다

4. fourthCase

CODE

var obj4 = {
  name:"lucy",
  hi:function(object, ){
    console.log(  + '！ ' + object.name )
  }
}
obj4.hi(obj4,' ')
obj4.hi.call(obj4,' ')

CONSOLE

" ！ lucy"
"undefined！ undefined"

COMMENT

함수 수신의 대상은this에서 수신하고 함수 형참에서 직접 호출할 수 없습니다

5. fifthCase

CODE

var obj5 = {
  name:" ",
  hi:function( ){
    console.log(  + this.name)
  }
}
obj5.hi(' ？')
obj5.hi.call(obj5,' ？')
obj5.hi.apply(obj5,[' ？'])

CONSOLE

" ？ "
" ？ "
" ？ "

COMMENT

함수 호출,call을 통해 매개 변수를 전달할 수도 있고apply를 통해 매개 변수를 전달할 수도 있습니다

콜은 문자열이고 apply는 수조로 전달됩니다

함수의this는call전입 대상이 있으며,this[속성]을 통해 대상의 속성 값을 찾습니다

6. sixthCase

CODE

var obj6 = {
  hi:function(){
    console.log(this)
  }
}
var HI = obj6.hi
HI()
obj6.hi()

CONSOLE

Window
obj6

COMMENT

this값은 함수가 호출될 때의 환경에 달려 있다

함수가 전역 변수에 값을 부여할 때,this는 Windows를 가리킨다

함수가 대상의 속성에 값을 부여할 때,this는 호출된 대상obj6를 가리킨다

7. seventhCase

CODE

var obj7 = {
  hi:function(p1){
    console.log(this);
    console.log(typeof this);
    console.log(typeof 11);
    console.log(p1)
  }
}
var HI = obj7.hi
HI.call(22,"hello")

CONSOLE

22
"object"
"number"
"hello"

8. eighthCase

CODE

var fn = function(){
  console.log(this)
}
var obj8_1 = {
  hi:fn
}
var obj8_2 = {
  hi:fn
}
fn()
fn(11)
fn.call({name:"lin"})
obj8_1.hi()
obj8_2.hi()

CONSOLE

Window
Window
{name:"lin"}
obj8_1
obj8_2

COMMENT

함수를 직접 호출하고this는 Windows를 가리킨다

전입 파라미터가 대상이면this는 파라미터 대상을 가리킨다

대상의 속성으로 함수를 호출하면this는 대상을 가리킨다

9. ninthCase

HTML

JavaScript

xxx.onclick = function(e){
  console.log(this)
}

CONSOLE

[object HTMLButtonElement]
 

COMMENT

xxx 단추를 눌렀을 때 클릭 이벤트의 target 요소 대상을 터치합니다

이것은 target 원소의 대상을 가리킨다

10. tenthCase

JavaScript

setTimeout(function(){
  console.log(this)
},1000)

CONSOLE

Window

11. eleventhCase

JavaScript

var obj11 = {
  hi:function(){
    console.log(this)
  }
}
setTimeout(obj11.hi,1000)
setTimeout(obj11.hi.bind(obj11),1000)

CONSOLE

Window
obj11

COMMENT

타이머는 브라우저에서 제어하고 호출 대상은 윈도우입니다

bind () 는 새로운 함수를 만듭니다. 호출될 때,this 키워드를 제공하는 값으로 설정하고, 새로운 함수를 호출할 때, 제공하기 전에 주어진 매개 변수 시퀀스를 제공합니다

12. twelfthCase

JavaScript

function fn(){
  console.log(this)
}
fn.bind({name:"qing"}).call({name:"li"})

CONSOLE

{name:"qing"}

13. thirteenthCase

JavaScript

function fn(){
  console.log(this)
}
fn.bind({name:"qing"}).call({name:"li"})

CONSOLE

{name:"qing"}

14. fourteenthCase

JavaScritpt

var a = [1,2,3]
var b ={0:4,1:5,2:6,length:3}

console.log(a.slice.call(b,0,2))

CONSOLE

[4, 5]

15. fifteenthCase

HTML

JavaScript

var name = 'wang'
var obj14 = {
  name:'lin',
  listen:function(){
    console.log("obj14:"+this);
    console.log('name:'+this.name)
    xxx.onclick = function(){
      console.log("onclick.this：" + this)
    }
  }
}
obj14.listen()

CONSOLE

"obj14:[object Object]"
"name:lin"
"onclick.this：[object HTMLButtonElement]"

COMMENT

첫번째this는 함수가 있는 속성의 대상을 가리킨다

두 번째this는 클릭 이벤트를 촉발하는'점나'원소 대상을 가리킨다

ES6 새 구문의 this 추가
화살표 함수는 setTimeout 안에 있는this를 정의할 때 있는 역할 영역으로 묶을 수 있습니다. 실행할 때 있는 역할 영역을 가리키는 것이 아니라 정의할 때 있는 역할 영역으로 묶을 수 있습니다.

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  //  
  setInterval(() => this.s1++, 1000);
  //  
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

첫 번째this는 구조 함수 Timer의 실례를 가리키고 두 번째this는 윈도우를 가리킨다.