게시 됨 업데이트 됨typescript2분안에 읽기 (약 244 단어)

js bind

  • typescript 코드다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
interface myType {
  name: string;
  age: number;
}

const me: myType = {
  name: 'name',
  age: 99,
};

[1, 2, 3, 4, 5].forEach(function (this: myType, value, index) {
  console.log(this);
  console.log(value, index);
}, me);
// 0 1 { name: 'name', age: 11 }
// 1 2 { name: 'name', age: 11 }
// 2 3 { name: 'name', age: 11 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class MyClass {
  me: Person;

  constructor(person: Person) {
    this.me = person;
  }

  someFunction() {
    [1, 2, 3].forEach(function (value) {
      console.log(value, this);
    });
  }

  someFunctionBindThis() {
    [1, 2, 3, 4].forEach(function (this: MyClass, value) {
      console.log(value, this);
    }, this);
  }

  someFunctionWithArrow() {
    [1, 2, 3].forEach((value) => {
      console.log(value, this);
    });
  }
}

const myclass = new MyClass(me);
myclass.someFunction();
// 1 undefined
// 2 undefined
// 3 undefined

myclass.someFunctionBindThis();
// 1 MyClass { me: { name: 'name', age: 11 } }
// 2 MyClass { me: { name: 'name', age: 11 } }
// 3 MyClass { me: { name: 'name', age: 11 } }

myclass.someFunctionWithArrow();
// 1 MyClass { me: { name: 'name', age: 11 } }
// 2 MyClass { me: { name: 'name', age: 11 } }
// 3 MyClass { me: { name: 'name', age: 11 } }
  • bind 함수를 배워보았다
  • bind를 배우면서 function과 arrow function 차이를 실감하게 되었다
  • arrow function은 this를 바인딩하지 않는다
  • 고로 arrow function은 bind를 사용할 수 없다
  • 이 함수 표현은 메서드 함수가 아닌 곳에 적합하다

참고

카테고리

아카이브

광고

×