js中函数内部的this指向问题

一、函数内部的this指向

函数内this的指向，是当我们调用函数的时候才能确定，调用方式的不同决定了this的指向不同

 

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法也执行实例对象
对象方法调用	该方法所属的对象
事件绑定方法调用	绑定事件对象
定时器函数	window
立即执行函数	window

 

上述代码演示验证：

1、普通函数调用

  function fn() {
            console.log('普通函数this的指向为：' + this);
        }
        fn();

结果：

指向函数的调用者window，因为普通函数调用完整的写法是window.fn(),故此时this指向函数的调用者即window

2、对象的方法调用

   var o = {
            fn: function() {
                console.log('对象方法中的this指向:' + this);
            }
        }
        o.fn();

结果：

 

 

 

指向方法所属的对象o，对象o调用了fn（）方法，故指向对象o

3、构造函数调用

 function Star() {
            console.log('构造函数中的this指向：' + this);
        }
        var lhc = new Star();

结果：

 

指向由构造函数所创建的实例对象lhc

特殊：构造函数原型对象prototype里面方法中的this也指向被创建的实例对象lhc

 function Star() {
            // console.log('构造函数中的this指向：' + this);
        }
        Star.prototype.fn = function() {
            console.log('构造函数原型对象里方法中的this指向：' + this);
        }
        var lhc = new Star();
        lhc.fn();

结果：

指向由构造函数所创建的实例对象lhc

4、绑定事件函数

var btn = document.querySelector("button");
    btn.onclick = function() {
        console.log('绑定事件里面this的指向:' + this);
    };

结果：

 

 

 

指向函数的调用者,btn这个按钮对象

5、定时器函数

 window.setInterval(function() {
        console.log('定时器函数里面的this指向:' + this);
    }, 1000)

结果：

 

指向函数的调用者window对象

6、立即执行函数

 (function() {
        console.log('立即执行函数里面的this指向：' + this);
    })();

结果：

指向函数的调用者window对象，立即执行函数不需要调用立即可以执行，同普通函数一样