JS에서의 this (+ jQuery에서의 this)

JS에서의 this

1. 전역변수 this. 

function에서window와 같은 값. => 함수에서 지역변수가 아닌 전역변수를 호출

    <script>
        // 전역변수들 
        str = '전역변수';
        var str2 = 'var전역변수';
        
        // window.onload = 현재 이 HTML문서가 전부 다 로딩되고나서
        // 곧바로 실행할 익명함수를 대입
        window.onload = function(){

            var str = '지역변수'; // 전역변수명과 중복
            var str3 = '새로운 지역변수';
            str4 = '내가누구게??';

            console.log('------- str -------');
            console.log(str); // 지역변수명과 전역변수명이 동일하다면 지역변수 호출
            // 전역변수에 접근하고자 한다면?? => window.전역변수명 또는 this.전역변수명
            console.log(window.str);
            console.log(this.str);

            console.log('------- str2 -------');
            console.log(str2);
            console.log(window.str2);
            console.log(this.str2);

            console.log('-------- str3 --------');
            console.log(str3);
            console.log(window.str3); // undefined(정의되어있지않음)
            console.log(this.str3);

            console.log('--------- str4 ---------');
            console.log(str4);
            console.log(window.str4);
            console.log(this.str4);
            // Scope안에서 변수 선언시 var를 생략할 경우 전역변수로 취급됨
        }
    </script>

 

2. 객체 자신 호출

선언적 함수 호출 시에 this를 붙이면 자기자신(요소객체)을 호출

<button onclick="test5(this);">버튼</button> <!-- this : 해당 요소객체 버튼 자체 -->
    <button id="abc" onclick="test5(this.innerHTML);">버튼2!</button>
    <button id="btn33" onclick="test5(this.id);">버튼3!</button>
    <button type="bytton" value="버튼4" onclick="test5(this.value);">버튼4</button>

    <script>
        function test5(a){
            console.log(a);
        }
    </script>

 

3. 메소드 안에서 속성값으로 또 다른 메소드 호출 시 같은 객체 내의 속성 호출

    <button onclick="test4();">실행확인</button>
    <div id="area4" class="area small"></div>

    <script>
        function test4(){

            const area4 = document.getElementById('area4');

            let name = '이승철';

            let bird = {
                name : '미미',
                kind : '회색앵무',
                eat : function(food){ // 이 경우 속성명이 function의 이름이 되므로 익명함수 작성

                    area4.innerHTML += this.kind + '인 ' + name + '가 ' + food + '를 먹습니다. <br>';

                    // => 메소드 속성안에서 같은 객체 내의 속성을 호출할 경우 this.을 앞에 붙인다.
                    // => 만약 속성명과 변수명이 동일한 경우에는 this.을 안붙이면 변수가 호출됨!
                }
            };
            bird.eat('지렁이');
        }
    </script>

 

4. 생성자 함수에서 기본생성자

	<script>
        function test2(){

            var student0 = new Student('홍길동', 30, 40, 20, 30, 50);
            var student1 = new Student('제임스고슬림', 100, 100, 100, 100, 100, );
            var student2 = new Student('어쩌고저쩌고', 20, 30, 40, 50, 60);

            // 배열에 담기
            let students = [student0, student1, student2];

            // 반복문 이용해서 출력
            for(let i in students){
                document.getElementById('area2').innerHTML += students[i];
            }

            // 생성자 함수
            function Student(name, java, oracle, html, css, javascript){

                // this = {}; // 기본생성자(?)

                // Property 초기화
                this.name = name;
                this.java = java;
                this.oracle = oracle;
                this.html = html;
                this.css = css;
                this.javascript = javascript;

                // return this;

                // => 이거랑 같지
                /*
                this = {
                    name : '홍길동',
                    java : 30,
                    oracle : 40,
                    html : 20,
                    css : 30,
                    javascript : 50
                }
                */

                // 메소드 속성 정의
                this.getSum = function(){
                    return this.java + this.oracle + this.html + this.css + this.javascript;
                }

                this.getAvg = function(){
                    return this.getSum() / 5;
                }

                this.toString = function(){
                    return '이름 : ' + this.name + ', 총점 : ' + this.getSum() + ', 평균 : '
                            + this.getAvg() + '<br>';
                }
            }
            console.log(student0);
        }
    </script>

 

5. 이벤트 타켓

    <script>
        // 고전이벤트 방식
        document.getElementById('btn4').onclick = function(e){
            // 이벤트 종류를 알 수 있는 방법
            // 방법1) 
            console.log(window.event);
            // PointerEvent, MouseEvent 객체
            // 마우스를 이용한 이벤트 발생 시!

            // 방법2)
            console.log(e);
            // 이벤트 발생 시 내부적으로 eventTarget을 매개변수에 전달

            // window.event == e
            // 이벤트 종류로부터 target을 알아내려면?
            console.log(window.event.target);
            console.log(e.target);
            console.log(this);

            // window.event.target == e.target == this == 현재 이벤트가 발생한 요소 객체

            window.event.target.style.backgroundColor = 'red';
            e.target.innerHTML = '버튼클릭';
            this.style.color = red;
        };

        // 표준이벤트 방식
        document.getElementById('btn5').addEventListener('click', function(e){
            // window.event.target == e.target == this

            window.event.target.style.backgroundColor = 'black';
            e.target.innerHTML = '이벤트발생';
            this.style.color = 'white';
        });


    </script>

 

jQuery에서의 this

1. 이벤트 타겟!

선택자 (요소의 타입속성값 등) - 함수를 호출한 그 $('선택자')

* this로 이벤트 타겟을 호출하여 카피하면 이벤트도 복사되어 적용됨

 

-- 여기선 ':submit'

    <script>
        $(function(){
            $(':submit').click(function(){
                // alert('경고경고~~📢');

                // 비밀번호 입력란에 작성한 값을 경고창에 띄우기

                // 객체.속성 =          == setter()
                // 객체.속성            == getter()

                // alert($(':password').val());

                // .val() : 인자값 없이 메소드를 호출하면 해당 값을 불러오는 역할
                // setter() / getter() 역할을 동시에 수행
            });

            // mouseenter : 요소의 경게 안으로 들어갈 때
            $(':submit').mouseenter(function(){

                // $(':submit').css('background', 'lightpink'); // 모든 요소가 값을 먹음

                /*
                window.event.target == e.target == this
                this.style.background = 'pink';
                */

                // console.log(this);

                // this.css('background', 'pink');
                // 자바스크립트 요소 객체로 jQuery메소드를 호출할 수 없음

                // $(this).css('background', 'pink');

                // 직접 css() 호출해서 스타일을 부여하는 것이 아니라
                // 클래스 속성값을 추가해서 이미 정의해둔 스타일 입히기

                // jQuery
                // $(this).addClass('추가하고 싶은 클래스 속성값');
                $(this).addClass('pinkStyle');

                // .addClass() : 선택된 요소에 속성값을 추가해주는 메소드

            });

            // mouseout : 요소의 경계 밖으로 나갈 때
            $(':submit').mouseout(function(){
                $(this).removeClass('pinkStyle');
            });

            // mouseenter + mouseout : hover
            $(':submit').hover(function(){
                $(this).addClass('pinkStyle');
            }, function(){
                $(this).removeClass('pinkStyle');
            });
        });
    </script>

 

-- 여기선 document의 각각 하위요소들

    <script>
        $(function(){
            // $('#wrap>h4').on('click', function(){});
            // $('#wrap').children('h4').on('click', function(){});
            // ==
            $('#wrap').on('click', 'h4', function(){
                alert('날 클릭했니??');
            });

            // 현재 이 문서상의 모든 요소들 중에서 h1 ~ h6에 대해서 클릭 이벤트핸들러를 부여하고 싶다.
            /*
            $('h1, h2, h3, h4, h5, h6').on('click', function(){

            })
            */

            // $(document) : 이 문서객체를 제이쿼리화 시킨 것

            $(document).on('click', 'h1, h2, h3, h4, h5, h6', function(){
                console.log(this);
                $(this).css('color', 'aqua');
            });
        })
    </script>