JavaScript-Study/3-01(this키워드).html at main · rkdbs/JavaScript-Study · GitHub

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<html>
    <head>
    <title>this 키워드</title>
    <!-- 객체가 자기 자신을 지칭할 때 쓰는 키워드 : this
         - 함수 안, 밖의 this : window
         - Object 안에서의 this : Object
         - Element 안에서의 this : Element
         부모를 지칭할 때 쓰는 키워드 : super -->
</head>
<body>

    <button onclick="this.style.backgroundColor='red'">클릭1</button> <!-- <input type="button">과 동일함, this : button 자체를 지칭 -->
    <button onclick="callFunc(this)">클릭2</button> <!-- this : button element -->

    <select onchange="changeSelect(this)"> <!-- this : select element, onchange : 무언가 값이 바뀌면 -->
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>

    <script>

        // function callFunc(obj1) {
        //     // alert("callFunc() 함수 호출");
        //     console.log(obj1); // Element 자체, this를 obj1으로 받음
        // }

        function changeSelect(obj2) {
            // alert("changeSelect() 함수 호출");
            console.log(obj2); // Select Element 자체
            console.log(obj2.value); // 변화된 값 출력
        }

        // console.log(this); // window 객체 (많은 메소드들을 가지고 있음)
        // this.alert("안녕하세요?"); // window. 생략 O why? alert은 window 객체의 메소드 중 하나, this = window

        // function myFunction() {
        //     // console.log("myFunction() 호출");
        //     console.log(this); // window 객체, myFunction X (함수 안에서도 밖에서도 window 객체 지칭)
        // }
        // myFunction();

        // function fullName() {

        // }

        // var person = {
        //     firstName : "길동",
        //     lastName : "홍",
        //     fullName : function() { // Object의 멤버변수로 함수 지정 O
        //         return this.firstName + " " + this.lastName; // 길동 홍, Object안에서의 this는 해당 Object
        //     }
        // }
        // console.log(person.fullName());

    </script>
</body>
</html>