进入了JavaScript 学习，在函数和对象中会经常遇到this 关键字。虽然大多数情况下，可以猜测出this 是指向当前对象，但是遇到了某些例子，就会感到混乱，不明所以。如下例子：
// 例子一
var obj = {};
var foo1 = function (){
console.log(this.x = 10);
function foo2(){
console.log(this.y = 20)
}
foo2()
}
// 这样调用时this 分别指向什么？
foo1()
// 这样调用时this 又分别指向什么？
obj.method = foo1
obj.method();
所以为减少上面这种迷糊时刻，接下来会对this 知识点进行梳理。
一、函数直接调用
这种情况，代码在严格模式和非严格模式下，this 的值会有所差异。但在平时接触中，多是非严格模式，所以这里是以非严格模式为前提。
函数被直接调用，那么this 代表全局对象，即 window 对象。因此，这种情况下对于this 的赋值会被绑定到全局对象上，成为全局属性，要慎用。
// 例子二
function demo(){
console.log(this === window)
}
demo() // true
由此可知，例子 一 中foo1 被直接调用后，函数中的两个 this 都是指向 window 对象，并在window 上分别创建了 x 、y 全局属性，属性值分别为10 、20。
二、对象方法中的 this
当this 出现在对象的方法中时，this 就是调用这个方法的对象。
// 例子三
var o = {
name: 'Michael',
f: function(){
this.name = 'Peter';
console.log(this === o)
}
}
o.f() // true
console.log(o.name) // Peter
由此可知，例子 一 在 obj.method(); 调用method 方法后，第一个this 指向的是obj 对象，并在obj对象上创建了x 属性，属性值为10 ；然而其中内部函数foo2 的this 却指向window 对象，并覆盖了已经存在的全局属性y ，属性值为20 。例子 一 可能不够清楚，所以在举一个例子:
// 例子四
var o = {
gender: 'male',
f: function foo1(){
this.gender = 'female';
function foo2(){
this.gender = 'male or female';
}
foo2();
}
}
o.f()
console.log(o.gender) // female
console.log(window.gender) // male or female
所以为了解决这种this 前后不一的问题，大多程序员使用变量替换的方法，而且该变量一般命名为 that，这个方法参考自深入浅出 JavaScript 中的 this.
// 例子五
var o = {
gender: 'male',
f: function foo1(){
var that = this
function foo2(){
that.gender = 'male or female';
}
foo2();
}
}
o.f()
console.log(o.gender) // male or female
-
就近原则
this 的绑定只受最靠近的成员引用的影响。
// 例子六 var o = { name: 'Michael', gender: 'male' } function foo(){ this.gender = 'female'; } o.obj={ name: 'Peter', gender: 'male', f: foo } o.obj.f() o.gender //male o.obj.gender //female由此可见例子六 的this 指向的是o.obj 。
-
原型中的this
如果该方法存在于一个对象的原型链上，那么this指向的是调用这个方法的对象，表现得好像是这个方法就存在于这个对象上一样。具体可参见MDN--this
-
getter 与 setter 中的this
作为getter或setter函数都会绑定 this 到从设置属性或得到属性的那个对象。具体参见MDN
三、作为构造函数调用
通过构造函数生成一个新对象，那么this 就是这个新对象。
// 例子七
function foo(){this.xxx = 'yyy'};
var demo = new foo();
demo.xxx // "yyy"
构造器返回的默认值是一个this引用的对象，也可以手动设置返回其他的值，如果手动设置的值是一个对象，那么就返回这个对象；如果返回值不是一个对象，那么就返回this。
//例子八
function foo(){
this.xxx = 'yyy';
return {xxx: 'zzz'}
}
var demo = new foo();
demo.xxx // "zzz"
function foo1(){
this.xxx = 'yyy';
return xxx = 'zzz';
}
var demo1 = new foo1();
demo1.xxx // "yyy"
四、使用call 和 apply 调用
call 和 apply 是函数对象的方法，可以用句点预算符调用这两种方法。这两种方法都可以用于指定this 绑定的对象。call 和 apply 第一个参数都是 this 要绑定的对象，不同的是call 方法后面可以接无数个参数，而apply 后面只能再接一个数组，数组里面装着参数。
//例子九
var obj = {
age: null,
foo: function(x, y, z){
this.age = x + y + z;
}
}
var o = {
age: ''
}
var x = 'I ', y = 'Don\'t ', z = 'know.'
obj.foo.call(o,x, y, z); //或者写成 obj.foo.apply(o,[x,y,z])
obj.age //null
o.age //"I Don't know."
使用call 和 apply 方法时要注意，如果传入的this 的值不是一个对象，那么JavaScript 会内部将其转化为一个对象。比如传入数字，就会使用new Number() 构造函数，将其转换为对象；比如传入字符串，就使用new String() 构造函数，将其转化。如果传入的this 的值是undefined 或 null，那么这个this 就绑定到window 对象上。
//例子十
var obj = {
age: null,
foo: function(x, y, z){
this.age = x + y + z;
}
}
var x = 'I ', y = 'Don\'t ', z = 'know.'
obj.foo.call(undefined,x, y, z);
obj.age //null
window.age //"I Don't know."
var o = {
name: 'Michael',
f: function(name){
this.name = name;
return this
}
}
console.log(o.f.call(0, 'Peter')); //Number {name: "Peter", [[PrimitiveValue]]: 0}
五、Function.prototype.bind
这个方法会创建一个新函数，新函数的函数体和函数作用域是同调用这个方法的函数相同，而在这个新函数中，this 被永久的绑定到了bind 的第一个参数上，就算call 调用传入this 也不会作用。
//例子十一
var obj = {
name: 'Michael',
foo: function(newName){
this.name = newName;
}
}
var o1 = {
name: null
}
var o2 = {
name: 'none'
}
var g = obj.foo.bind(o1, 'Peter');
g.call(o2,'Lisa')
o1.name //"Peter"
o2.name //"none"
六、DOM事件处理函数中的 this
当函数被用作事件处理函数时，它的this指向触发事件的元素
- 下面的this 指向window，this
<button onclick="(function(){console.log(this.xx = 30);console.log(this===window)})()" id="firstButton">
click me
</button>
<!-- 这里的变量xx 被绑定到window 对象上 -->
<script>
function demo(){
console.log(this.aa = 60);
console.log(this === window);
}
</script>
<button onclick="demo()">
click me to fresh
</button>
<!-- 这里的变量aa 被绑定到window 对象上 -->
- 下面的this 指向文档元素
<button onclick="console.log(this)" id="secondButton">
click me again
</button>
<!-- 这里的变量yy 被绑定到secondButton 文档元素上，因为这里的this 在外层代码上 -->
<button onclick="(function(obj){console.log(obj.xx = 30);console.log(obj)})(this)" id="firstButton">
give me five
</button>
<!-- 这里的变量xx 被绑定到firstButton 文档元素上，因为这里的this 在外层代码上 -->
<button id="thirdButton">
click me last time
</button>
<script>
var button3=document.querySelector("#thirdButton");
button3.onclick=function(){
console.log(this.zz=50)
console.log(this)
}
</script>
<!-- 这里的变量zz 被绑定到了thirdButton 文档元素上 -->
网友评论