JavaScript-this的指向

http://www.html-js.com/article/Pointing-to-the-Nimojs--frontend-development-JavaScriptthis



目录:

函数有所属对象
没有所属对象
闭包中的this
构造函数中的this
call和apply

相关阅读：JavaScript-构造函数
<!--more-->

函数有所属对象

如果函数有所属对象则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都属于复杂数据类型<small>Object</small>。
另外一种简单的理解方式是

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

相关阅读：JavaScript-构造函数

call和apply

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

apply()

方法接受两个参数第一个是函数运行的作用域，另外一个是一个参数数组(arguments)。

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/ 转载请注明出处。