本文深入解析JavaScript中this关键字的工作原理，通过全局函数、DOM事件绑定、attachEvent与addEventListener差异、对象冒充及原型模式等多个实例，详细阐述this在不同上下文中的指向逻辑。文章重点分析了函数调用、方法赋值及构造函数执行对this绑定的影响，帮助开发者准确掌握this的使用场景与常见陷阱。
全局函数与DOM事件绑定中的this
关于JavaScript中this关键字的讨论已有很多，本文旨在通过具体实例剖析其底层工作原理，以期为读者提供清晰的参考。
代码如下：
function doSomething(){
alert(this.id);
}
alert(window.doSomething);//证明了doSomething是属于window的
doSomething();//undefined
window.onload = function(){
document.getElementById("div2").onclick = doSomething;//div2
document.getElementById("div3").onclick = function(){doSomething();}//undefined
} 1、对于doSomething这个函数：
代码如下：
function doSomething(){
alert(this.id);
} 该函数为全局函数，实际上归属于window对象（可通过window.doSomething访问）。若直接调用该函数，根据“this始终指向执行函数的所有者”这一原则，函数内的this即指向window。由于window对象没有id属性，因此输出“undefined”。
2、在HTML元素中这样调用
代码如下：
<div id="div1" onclick="doSomething();">div1</div>此时同样显示“undefined”，这等效于以下代码：
代码如下：
document.getElementById("div1").onclick = function(){doSomething();}当点击div1时，调用的是属于window的doSomething函数，因此结果仍为“undefined”。
3、通过JS绑定事件，在div2加载完成后：
代码如下：
document.getElementById("div2").onclick = doSomething;当点击div2时，显示“div2”。因为在给div2的onclick赋值时，实际上是将doSomething函数复制了一份，此时复制后的函数归属于div2，与原本属于window的doSomething无关。点击div2触发的是归属于div2的doSomething，这里的this即指代div2。
attachEvent与addEventListener的this差异
二、attachEvent和addEventListener
attachEvent是IE浏览器中绑定事件的方法，它会将响应函数复制到全局（即响应函数的所有者为window）。而在DOM标准中，addEventListener绑定的事件，其响应函数的所有者为事件绑定的对象。
代码如下：
function doSomething(){
alert(this.id);
alert(this == window);
}
window.onload = function(){
var div1 = document.getElementById("div1");
if(div1.attachEvent){
div1.attachEvent("onclick",doSomething);
document.body.appendChild(document.createTextNode("attachEvent"));
}else if(div1.addEventListener){
div1.addEventListener("click",doSomething,false);
document.body.appendChild(document.createTextNode("addEventListener"));
}else{
div.onclick = doSomething;
}
} 对于函数doSomething
代码如下：
function doSomething(){
alert(this.id);
alert(this == window);
} 1、使用attachEvent绑定到div1的click事件上，doSomething会被复制到window，此时doSomething里面的this指的是window，点击div1时会显示“undefined”和“true”。
2、使用addEventListener绑定div1的click事件，此时将doSomething拷贝，这个拷贝后的函数属于div1，所以点击div1时会显示“div1”和“false”。
注：http://www.quirksmode.org/js/this.html里认为attachEvent只是使用了函数的引用，看如下代码：
代码如下：
var obj = new Object();
obj.color = "black";
obj.showColor = function(){
alert(this.color);
alert(this == window);
}
obj.showColor();
var div1 = document.getElementById("div1");
div1.attachEvent("onclick",obj.showColor);此时点击div1的时候，会显示“undefined”和“true”。如果attachEvent仅仅是引用obj.showColor的话，那么this还是应该指的是obj，但是实际上这里this指的是window，所以我认为这里不是引用，而是拷贝到全局的。
对象冒充与继承中的this机制
三、关于对象冒充的继承方式
1、new与不new的区别
对于如下function
代码如下：
function ClassA(sColor){
this.color = sColor;
this.sayColor = function(){
alert(this.color);
}
} 这是一个类还是一个函数？随你而定！
如果你认为这是一个函数，那么我们可以这样来调用它：
ClassA("red");
“red”是传递的一个参数，ClassA中的this指的当然就是window了，所以现在window有了color属性和sayColor方法，并且color有“red”这个值。
这是调用sayColor或者window.sayColor都可以显示“red”；
window.sayColor();
如果你认为这是一个类，那么我们应该这样使用它：
var obj = new ClassA("red");
new这个关键词的出现让上面这一句代码增加了不少内容：首先，创建一个Object实例，然后，将ClassA中的this指向创建的这个Object中，最后返回这个Object，所以返回的这个Object就赋值给了obj。所以我们可以说this指向的是obj，obj拥有了color属性和sayColor方法，并且color属性值为“red”。
2、函数的owner
代码如下：
function showId(){
alert(this.id);
}
window.onload = function(){
var div1 = document.getElementById("div1");
div1.onclick = showId;
div1.show = showId;
div1.show();
var obj = new Object();
obj.id = "obj";
obj.show = showId;
obj.show();
} 我们可以将showId这个函数赋值给click事件，也可以赋值给任何一个对象的任何一个属性，这时也会拷贝showId这个方法的，所以我们在调用div1.show方法时，this是指向div1的，在调用obj.show时，this指向的是obj的。
3、对象冒充的原理
下面的代码是通过对象冒充方法实现的继承
代码如下：
function ClassA(sColor){
this.color = sColor;
this.sayColor = function(){
alert(this.color);
}
}
function ClassB(sColor,sName){
this.newMethod = ClassA;
this.newMethod(sColor);
delete this.newMethod;
this.name = sName;
this.sayName = function(){
alert(this.name);
}
}
var objB = new ClassB("color of objB","name of objB");
objB.sayColor();objB是ClassB的一个实例，objB是如何拥有color属性和sayColor方法的呢？
首先从实例化的代码看起：
var objB = new ClassB("color of objB","name of objB");
这里ClassB是个类，ClassB中的this当然就是指的objB这个对象；
在ClassB中，前三行代码会用到ClassA，这时就把ClassA看作一个函数，而不是类。
我们如果直接调用ClassA这个函数，那么很显然，ClassA中的this指的就是window对象了，所以我们先将ClassA拷贝到objB的newMethod这个属性中（this.newMethod = ClassA），
然后再调用this.newMethod，这时这个方法的owner明显的已经成了this，而ClassB中的this在当前指的是objB，所以此时ClassA中（严格的说是newMethod中，因为这是拷贝过后的，跟ClassA已经是两个方法了）的this就是指的objB，这样在通过newMethod的调用，就给objB赋值了color属性和sayColor方法。用call和apply方法来实现继承实际上也是一个原理，call和apply可以看作是改变方法的owner的方法，而这里ClassB中的前三句代码也就是起这个作用的。
Prototype框架中Class.create的this分析
四、prototype1.6中的Class.create
代码如下：
prototype1.6中的Class.create方法大致如下：
var Class = {
create: function() {
//
function klass() {
this.initialize.apply(this, arguments);
}
//
for (var i = 0; i < properties.length; i++)
klass.addMethods(properties[i]);
//
return klass;
}
}; 在使用的时候是这样的：
代码如下：
var Person = Class.create({
initialize:function(name){
this.name = name;
},
say:function(message){
alert(this.name + ":" + message);
}
});
var aPerson = new Person("name1");
aPerson.say("hello1");Person实际上是通过Class.create这个方法所返回的klass（klass是Class.create中的局部变量，是一个function），Class.create所传递的参数（initialize方法和say方法）传递到create方法中的properties数组中并且通过addMethods方法让klass的prototype拥有这些方法。那么最关键的地方也是最难以理解的地方是：klass中的this究竟是指的是什么。仔细想一想就不难得到答案，Person实际上就是klass，而我们在实例化Person对象的时候，是用了new关键词的：
var aPerson = new Person("name1");
这就等价于
var aPerson = new klass("name1");
虽然klass在外面不能被访问到，但是这样能很轻易的说明问题，klass是一个类而不是简单的一个函数（我们看作如此，因为用了new关键字），那么klass中的this就指的是声明的实例，在这里就是aPerson，aPerson通过klass的prototype能够拥有initialize方法和say方法，在new的过程中，也会执行klass中的代码，所以initialize在实例化的时候会执行，即构造函数。（在klass里两个this都是指的aPerson，为什么还要通过apply调用一次呢？这主要是为了传递构造函数的参数，用apply方法可以将数目不定的多个参数通过数组方便的传到initialize方法中去。）
嵌套函数与复杂场景下的this指向
五、再分析几个例子
从别的文章里看到的例子，我在这里分析一下：
1、运行如下代码
代码如下：
function OuterFoo(){
this.Name = 'Outer Name';
function InnerFoo(){
var Name = 'Inner Name';
alert(Name + ', ' + this.Name);
}
return InnerFoo;
}
OuterFoo()();所显示的结果是“Inner Name, Outer Name”
OuterFoo是一个函数（而不是类），那么第一句
this.Name = 'Outer Name';
中的this指的是window对象，所以OuterFoo（）过后window.Name = ‘Outer Name';
并且将InnerFoo返回，此时InnerFoo同样是一个函数（不是类），执行InnerFoo的时候，this同样指window，所以InnerFoo中的this.Name的值为”Outer Name”（window.Name充当了一个中转站的角色，让OuterFoo能够向InnerFoo传递“Outer Name”这个值）,而Name的值即为局部变量”Inner Name”。
2、运行如下代码
代码如下：
function JSClass(){
this.m_Text = 'division element';
this.m_Element = document.createElement('DIV');
this.m_Element.innerHTML = this.m_Text;
if(this.m_Element.attachEvent)
this.m_Element.attachEvent('onclick', this.ToString);
else if(this.m_Element.addEventListener)
this.m_Element.addEventListener('click', this.ToString,false);
else
this.m_Element.onclick = this.ToString;
}
JSClass.prototype.Render = function(){
document.body.appendChild(this.m_Element);
}
JSClass.prototype.ToString = function(){
alert(this.m_Text);
alert(this == window);
}
window.onload = function(){
var jc = new JSClass();
jc.Render();
jc.ToString();
} 点击“division element”会显示“undefined”，在ie下还要显示“true”，其他浏览器中还要显示“false”。
实例声明和调用实例方法都没什么可说的，元素的click事件的绑定到了一个实例的方法，那么通过addEventListener绑定到的方法是拷贝过后的，所以this指的是html元素，这个元素没有m_Text属性（m_Text属性是属于JSClass的实例的，即属于jc的），所以点击元素显示undefined，attachEvent绑定的事件会将函数复制到全局，此时this指的是window对象，点击元素也会显示“undefined”。只有在调用jc.ToString()方法是，this指的是jc这个对象，因为jc拥有m_Text，所以能够显示“division element”。
六、总结
怎样在一个代码环境中快速的找到this所指的对象呢？我想要注意以下三个方面：
1、 要清楚的知道对于函数的每一步操作是拷贝还是引用（调用）
2、 要清楚的知道函数的拥有者（owner）是什么
3、 对于一个function，我们要搞清楚我们是把它当作函数使用还是在当作类使用
补充：
1.在实例和类上都可以直接定义函数
2.不能在实例上使用prototype定义函数，只能在类上使用prototype定义函数
3.类上直接定义的函数不能使用this访问对象的属性
4.在类的prototype上建立的函数可以用this,在类内部定义的函数可以使用this,在对象实例上建立的函数额可以this
代码如下：
window.alert=function (msg)
{
document.write(msg+"<br>");
}
function say()
{
this.f="props";
this.func3=function(){alert("f3,"+this.f);}
}
say.func1=function(){alert("func1,"+this.f);}; //Error,类上直接定义的函数，不能使用this
say.prototype.func2=function(){alert("func2,"+this.f);}
say.func1();
(new say()).func2();
say.func2(); //Error, 在用prototype定义的函数，必须实例化对象才能调用
say.func3(); //Error,在类上定义的函数，必须实例化才能调用
(new say()).func3();
var obj={
fld1:10,
func1:function(msg){alert(msg);},
func4:function(){alert(this.fld1);}
}
obj.prototype.func=function(){alert("func");}; //Error 实例对象上不能使用prototype定义对象
obj.func2=function(){alert("func2,"+this.fld1);}; //ok,实例上直接定义的函数可以使用this,访问对象的属性
alert(obj.fld1);
obj.func1("func1");
obj.func2();
obj.func4();javascript this用法小结
https://www.jb51.net/article/16863.htm
JavaScript this 深入理解 https://www.jb51.net/article/19425.htm
JAVASCRIPT THIS详解 面向对象 https://www.jb51.net/article/17584.htm
Javascript this指针 https://www.jb51.net/article/19434.htm
JavaScript中this关键字使用方法详解 https://www.jb51.net/article/7954.htm