web前端高级JavaScript - JavaScript中函数内的this指向

函数内的this指向

下表中列出的这些this的指向，是当我们调用函数的时候确定的。调用方式的不同决定了this的指向不同，一般情况下会指向函数的调用者（谁调用指向谁）。

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

下面我们用代码来一一进行验证：

• 普通函数

//函数的不同调用方式决定了this的指向不同
1. 普通函数 this指向window
function fn(){
    console.log('普通函数的this->' + this);
}

//这里我们调用函数fn(),实际上是window.fn()，只不过是window可以省略，所以this会指向window
fn();//普通函数的this->Window

• 构造函数

2. 构造函数调用 this指向Star的实例对象，原型对象里的this也是指向Star实例对象
function Star(){
    console.log('构造函数this指向->'+ this);
}

var ldh = new Star();//构造函数this指向->Star

• 对象方法

3. 对象方法调用 this指向对象obj本身
var obj = {
    sayHi:function(){
        console.log('对象方法this指向->'+this);
    }
}

obj.sayHi(); //对象方法this指向->Object

• 事件绑定方法

4. 绑定事件函数 this指向的是函数的调用者即btn这个按钮的对象
var btn = document.querySelector('but