一、函数内部的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对象,立即执行函数不需要调用立即可以执行,同普通函数一样