This 지향 요약

1,// 타이머에서this의 지향

/*var a = 23;
function Demo() {
this.a = 12;
//var self = this;
setInterval(this.show, 1000);
}

Demo.prototype.show = function() {
alert(this.a);
};


var demo = new Demo();
demo.show();*/

setInterval(function() {
console.log(this);
}, 1000);

결론: 타이머 호출로 어떤 함수를 실행하면 함수에 this가 있으면 이this는 윈도우를 가리킨다

2. 일반 함수에서this의 지향

// 
function fun1(){
alert(this)
}
// ，this window
// window.fun1 = funciton(){}

// window 
var name = "dfdf";
function obj(){
var name = "dfdfss"
console.log(this)
// window name name ， 
console.log(this.name)
}
obj();

var obj1 = {
name:"ddd",
sayName:function(){
    console.log(this.name);
}
}

obj1.sayName();

총결:this가 함수에서 가리키는 것은 누가 이 함수를 호출하는지, 함수에서 가리키는 것은 누구를 가리킨다

3. 이벤트 함수에서this의 지향

//  
//          var btn1 = document.getElementsByClassName('btn1')[0];
    
//          console.log(btn1);
//          btn1.onclick = function () {
//              console.log(this);
//          }

this가 이벤트 함수에 나타날 때,this는 이 이벤트를 촉발하는 탭을 가리킨다

        for (var i = 1; i < 4; i++) {
            var btn = document.getElementsByClassName('btn'+i)[0];
            btn.onclick = function () {
                console.log(this);
            }
        }

4. 구조 함수에서this의 지향

function CreatPerson () {
this.name = " ";
console.log(this);
console.log(this.name);
}

//  this 
//  this ？
// new ， per1  
   ， per1 “ ”， “this” per1
var per1 = new CreatPerson();

5,call 수정 함수에서this의 지향

// call function ： 。
        
        
//          var name = " ";
//          var liWei = {
//              name: " "
//          };
        
//          var wangLiYuan = {
//              name: " "
//          };
        
//          function getName (age) {
//              alert(age);
//          };

6、getName();//일반 함수 호출,this는 윈도우를 가리킨다

//          getName.call(wangLiYuan);

//          getName.apply(wangLiYuan);
        
//          getName.apply(null, [12]);

7. 콜과 apply의 작용과 용법은 완전히 같다.단지 매개 변수를 전달할 때,call은 필요한 함수를 참고한다

     ； apply ；
    
        window.onload = function () {
            var btn = document.getElementById('btn');
            btn.onclick = function () {
                console.log(this);
                function inner () {
                    console.log(this);
                }
                
                inner.call(this);
            }
        }