【JavaScript】this的指向详解

前言：this是在函数被调用时发生绑定的，它指向什么完全取决于函数在哪里被调用。（也就是说，this的指向不是函数被创建时绑定，而是被怎么样的方式调用时绑定的）

 

一、默认绑定

var a = 'window';
function show(){
	console.log(this);
	console.log(this.a);	
}
show();      //一次调用

function show2(){
	show();	  //二次调用
}
show2();

输出结果

show()是直接不带任何修饰的函数调用，因此this会被默认绑定到window对象。

 

二、隐式绑定

①对象隐式绑定

var name = 'window';
function show(){
	console.log(this);
	console.log(this.name);	
}

var obj = {
	name: 'obj',
	show: show    //对show方法进行引用
}
obj.show();

输出结果

虽然show()函数是在全局被创建，但被obj.show方法引用了。这时调用obj.show()方法，这时this会被绑定给了obj对象了。

②DOM对象隐式绑定

var name = 'window';

function show(){
	console.log(this);
	console.log(this.name);	
}

document.documentElement.name = 'DOM';	//这里给oBtn对象添加一个name属性
document.documentElement.onclick = show;

输出结果

当给oBtn添加点击事件的时候，show()函数中的this被指向了oBtn(DOM)对象。

 

三、显式绑定

var name = 'window';

function show(){
	console.log(this);
	console.log(this.name);	
}

var obj = {
	name: 'obj'	
}

show.apply(obj);
show.call(obj);
show.bind(obj)();

输出结果

这里是通过原生的call()、apply()、bind()改变show()调用时this的指向。

 

四、new绑定

var name = 'window';

function show(){
	console.log(this);
	console.log(this.name);	
}

//创建一个构造函数
function Fn(name){
	this.name = name;
	this.show = show;
}

//创建一个实例对象
var freddy = new Fn('freddy');
freddy.show();

输出结果

 

更多内容点击【JavaScript】常见的隐式改变this指向的几种错误