Notice
Recent Posts
Recent Comments
Tags more
«   2025/04   »
일 월 화 수 목 금 토
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
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[Javascript] 일반함수의 this 와 화살표함수의 this 비교 본문

javascript

[Javascript] 일반함수의 this 와 화살표함수의 this 비교

http://portfolio.wonpaper.net 2025. 3. 29. 22:18

 

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
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>테스트</title>
</head>
<body>
 
<h1>this 바인딩과 화살표 함수</h1>
<p>User 객체의 name 을 출력하는 alert
    <button id="userAlertBtn">출력</button>
</p>
 
<script>
    function User(name) {
        this.name = name;
 
         // function함수는 this 가 undefined 된다.
        this.sayName = function() {
            alert(this.name + " 아 안녕~~");
        }
 
        /*
        // (1) 화살표 함수는 this 가 User 객체를 인식하여 값이 잘나온다.
        this.sayName = () => {
            alert(this.name + " 아 안녕~~");
        }
        */
    }
    const userAlertBtn = document.getElementById('userAlertBtn');
    const user = new User("홍길동");
    console.log(user);
    userAlertBtn.onclick = user.sayName;
 
    // (2) (1) 의 화살표 함수를 쓰던지, 아니면 bind(객체) 처리한다.
    //userAlertBtn.onclick = user.sayName.bind(user);
 
</script>
</body>
</html>
 cs

 

 

출처 : https://www.youtube.com/watch?v=uMcUSRYNh_k&list=PLpYp3DamdrKiuXhYU0bykxsY_MGghIvoG&index=29

 

 

 

'javascript' 카테고리의 다른 글

[Javascript] Cross Domain 형태로 정보 교환하기 - CORS 문제 해결하기  (2) 2025.03.04
[Javascript] 핸드폰번호 입력시 하이픈(-) 자동 입력하기  (0) 2025.02.17
[Javascript] fetch 함수  (0) 2025.01.26
[Javascript] 숫자 키입력시 쉼표자동 입력  (0) 2024.12.17
[Javascript] 파일첨부시 이미지 미리보기 구현  (2) 2024.11.20
'javascript' Related Articles more
Comments