JavaScript-this的指向

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

目录:

1. 函数有所属对象
2. 没有所属对象
3. 闭包中的this
4. 构造函数中的this
5. 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();//Windowvar demo={};demo.b=nimo.fn();demo.b();//Object {b: function}

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

var a=function(){    console.log(this)}a();//Windowvar 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的指向。

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