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

一、函数内部的this指向

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

 

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

 

上述代码演示验证:

1、普通函数调用

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

结果:

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

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

2、对象的方法调用

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

结果:

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

 

 

 

指向方法所属的对象o,对象o调用了fn()方法,故指向对象o

3、构造函数调用

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

结果:

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

 

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

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

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

结果:

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

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

4、绑定事件函数

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

结果:

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

 

 

 

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

5、定时器函数

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

结果:

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

指向函数的调用者window对象

6、立即执行函数

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

结果:

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

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

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

上一篇:[论文阅读]《Convolutional Neural Networks for Sentence Classification》


下一篇:js标识符规则