在js的世界里，this是一个非常重要的角色，也是一个较难掌握的知识点。 我希望本系列能够帮助到你。
从哪里开始？
从我们的英语启蒙开始吧。
image.png
小时候学习英语，老师都会指着某一个东西，问大家“ what's this in English?” 通过这个方式去学习一些日常名词。为了巩固效果，还会让我们自己与同桌结伴练习，回忆过去：我拿起来一本皱巴巴的数学书，问我的同桌：“ 我吃z死引阴沟里洗？”，她厌恶地白了我一眼，抬起下巴，快速地朝右边甩去，留一个鼻音给我：heng! ，同时，我自然地身体向后躲一下，让出马尾的弧线。
唉，满满苦涩的回忆啊。
从此得到一个结论：
what's this in English?的答案，取决于你提这个问题时，手指的是什么。 同样：this在js代码中到底指向什么东西，你在写代码时是不能确定的，而应该在是在代码被调用时才确定。
重要的事情说三次：
在代码被调用时才确定; 在代码被调用时才确定; 在代码被调用时才确定;
this是一个只读的对象
这句话有两个意思：
- this是一个对象
- this是只读的。
this是一个对象
console.info (typeof this); //object
this是只读的
只要可以写js代码的地方，你都可以访问当前的this。
但，你不能修改：
this = { }; //错误
this = 1; //错误
image.png
厉害了：
this不能作为左值。它就不能出现在“=”的左边。
this出没的情况
this在js代码中出现的时机，可能会有多种表现。我分成两种：
- this的外面有function
- this的外面没有function
第一种情况的示例：
<script>
console.info(this); //这个this就是大名鼎鼎的window
console.info( this === window) // true
</script>
这种情况就没有什么可以讨论了的。
下面被function包含的情况，即在function的内部使用this。根据使用function的情况不同再分4种：
- 在函数被调用时，这个函数不是某一个对象的属性，就是一个普通的被调用的函数。此时，this就是window对象。
function f(){
console.info( this );
console.info( this === window); //true
}
f(); //调用函数才能确定this的值。
特殊地，如果启用了严格模式 ，则this是undefined.
"use strict";//严格模式开启
function f(){
console.info( this ); //undefined
console.info( this === window); //false
}
f(); //调用函数才能确定this的值。
- 在函数被调用时，函数是某个对象的方法。此时，this指向这个对象.
var obj = {
x:1,
f:function(){
console.info( this === obj ); //true
console.info( this.x) ;// 1
}
}
obj.f(); //调用函数才能确定this的值
这里obj.f()这种调用形式，f是obj的一个方法，this就会指向obj对象。
- 如果在调用函数之前加一个new的话，会创建一个新的对象，而这个函数内部的this就会指向这个创建的对象。
function F(){
this.x = 1
}
var f = new F();
console.info( f.x ) //1
理解如下：
- 在 new F()时，会做两件事。1是调用F()函数，2是创建一个对象并把这个对象做为F()函数的返回值保存在变量f中。
- 在执行 var f = new F()时，可以理解this就是f，所以加在this上的属性x，就被加在了f上，所以访问f.x.
- 如果它出现在dom对象的事件响应函数中，则它会指向这个dom对象。
var btn = document.getElementById("btn");
btn.onClick = function(){
console.info( this ) ; // 这里的this就是btn
console.info( this === btn ); // true
}
如果只有这么简单就好了。可是，真没有这么简单！
待续！
