JavaScript-this的指向

目录:

1. 函数有所属对象
2. 没有所属对象
3. 闭包中的this
4. 构造函数中的this
5. call和apply

相关阅读：JavaScript-构造函数

函数有所属对象

如果函数有所属对象则this指向所属对象

var nimo={age:21}
nimo.fun=function(){
    console.log(this.age)
    console.log(this)
}
nimo.fun();
/*
*   21
*   Object {age: 21, fun: function}
*/

因为nimo.fun的所属对象是nimo所以这里this指向的是nimo

var demo=function(){
    console.log(this);
}
demo();//Widnow

全局环境下的var demo=function(){}是等同于window.demo=function(){}的，所以这里的this指向的是Window

<h1>click me</h1>
<script>
var oH1;
window.onload=function(){
    oH1=document.getElementsByTagName(‘h1‘)[0];
    oH1.onclick=function(){     
        this.style.color="skyblue";
        console.log(this);//<h1 style="color: rgb(135, 206, 235);">click me</h1>
    }
}
</script>

从所属对象来看，onclick的所属对象是oH1（Element）所以此处的this是h1标签。

没有所属对象

匿名函数和局部作用域中的函数都属于没有所属对象的函数，没有所属对象的函数则指向Window对象（全局对象）。

(function(){
    console.log(this);//Window
})()

匿名自调函数的this指向Window。

var nimo={}
nimo.fn=function(){
    console.log(this);//Object {fn: function}
    var demo=function(){
        console.log(this);//Window
    }
    demo()
}
nimo.fn()

nimo对象下有一个fn函数，fn函数的所属对象是nimo。所以fn的this指向nimo。
fn下有一个demo函数，demo函数没有所属对象。所以demo的this指向Window

闭包中的this

完全不了解闭包可直接跳过本小节

var nimo={}
nimo.fn=function(){ 
    return function(){
        console.log(this)
    }   
}
var a=nimo.fn();
a();//Window

var demo={};
demo.b=nimo.fn();
demo.b();//Object {b: function}

闭包中的this指向同样根据所属对象决定。上面代码其实等同于

var a=function(){
    console.log(this)
}
a();//Window

var demo={};
demo.b=function(){
    console.log(this)
}
demo.b();//Object {b: function}

构造函数中的this

var Create=function(){
    this.name=‘nimo‘;
}
var nimo=new Create();
console.log(nimo.name);//"nimo"

如果构造函数没有显式的返回一个复杂数据类型则this指向的是创建的对象。值得注意的是function 、array、date、regexp都属于复杂数据类型Object。

另外一种简单的理解方式是

函数内部的this指向新创建的对象。

相关阅读：JavaScript-构造函数

call和apply

call和apply可以改变this的指向。

1. apply()方法接受两个参数第一个是函数运行的作用域，另外一个是一个参数数组(arguments)。
2. call()方法的第一个参数与apply()方法相同，只是其他的参数需要一个个列举出来。

	var nimo={
		name:‘nimo‘
	}
	var demo=function(){
		console.log(this);
	}
	demo();//Window
	demo.apply(nimo);//Object {name: "nimo"} 
	demo.call(nimo)//Object {name: "nimo"} 

关于call和apply的更多知识请谷歌搜索，此处不对call和apply做过多解析。

你可以通过订阅我的邮件列表来获取文章更新。点击订阅
原文链接：http://www.nimojs.com/blog/javascript-this/ 转载请注明出处。