this is awful

1533 단어

함수의 네 가지 호출 모드


메소드 호출 모드

var foo = {
  bar: 1,
  baz: function(){
    console.log(this.bar)   //1
  }
}
foo.baz()

위의 코드에서baz는foo대상의 한 속성(방법)이고 이때baz작용역의this는foo대상을 가리킨다.

apply 모드

var foo2 = {
  bar: 2
}
foo.baz.apply(foo2)

foo.baz는foo 대상의 속성으로 그 값은 하나의 함수에 대응한다. js의 함수에 있어 함수도 대상이고 모든 함수 대상은 apply 방법이 있다. apply 방법의 첫 번째 매개 변수는this가 가리키는 대상이다.사실 우리는 apply가 우리가 동적으로this(함수 상하문)를 선택할 수 있도록 하기 위해서라고 생각할 수 있다.여기서 우리는this를foo2로 가리키기 때문에 2를 출력할 것이다

함수 호출 모드

value = 3
var baz = function(){
  var value = 4  
  console.log(this.value)   //3
}
baz()

여기의baz는 함수입니다. 그가 직접 호출할 때this는 전역 작용역을 가리킵니다

구조기 호출 모드

var Foo = function(bar){
  this.bar = bar
}
Foo.prototype.getBar = function(){
  console.log(this.bar)     //5
}
foo3 = new Foo(5)
foo3.getBar()

여기의Foo함수는 구조기로 호출되어 새로운 실례foo3을 생성합니다.Foo함수에서this는 새로 만든 이 실례를 가리킵니다.

return this


많은 경우에 우리는 자신이 쓴 모듈이 체인 호출을 실현할 수 있기를 희망하는데 이것은 우리의 코드를 매우 우아하게 보일 수 있다.체인 호출의 핵심은 바로'return this'이다. 즉, 방법의 마지막에 이 방법을 호출한 대상을 다시 되돌려주는 것이다.다음은 간단한 가감계수기로 체인 호출을 실현했다.
var Counter = function(initValue){
  this.value = initValue
}
Counter.prototype.add = function(val){
  this.value += val
  return this
}
Counter.prototype.minus = function(val){
  this.value -= val
  return this
}
var c = new Counter(10)
c.add(10).minus(8).add(3);
console.log(c.value)     //15

좋은 웹페이지 즐겨찾기