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指向window

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在函数中的指向，谁调用的这个函数，函数中的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指向的是window

//          getName.call(wangLiYuan);

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

7、call和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);
            }
        }