javascript之this

MDN关于this的描述

全局上下文

在全局运行上下文中（在任何函数体外部），this指代全局对象，无论是否在严格模式下

console.log(this.document === document);//true
console.log(this === window); //true
this.a = 22;
console.log(window.a); //22

函数上下文

在函数内部，this的值取决于函数是如何调用的

直接调用

function f1() {
    return this;
}
f1() === window; //true
  
function f2() {
    "use strict";
    return this;
}
f2() === undefined; // true
在严格模式下，this是进入运行环境时设置的

对象方法中的this

var o = {
    prop: 22,
    f: function() {
        return this.prop;
    }
};
console.log(o.f());//22

原型链中的this

var o = {
    f: function(){
        return this.a + this.b;
    }
};
var p = Object.create(o);
p.a = 1;
p.b = 4;
console.log(p.f()); //5

call和apply

通过call()和applly(),可以将this绑定在一个指定的对象上

function add(c,d){
    return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o,5,7);
add.apply(o,[5,7]);

bind方法

调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，无论这个函数是如何被调用的。

function f(){
    return this.a;
}

var g = f.bind({a:'azerty'});
console.log(g());//azerty

var o = {a:37, f:f, g:g};
console.log(o.f(), o.g());//37 azerty

DOM事件处理函数中的this

this指向触发事件的元素

// 被调用时，将关联的元素变成蓝色
function bluify(e){
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象是为 true
  console.log(this === e.target);        
  this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}        

内联事件处理函数中的 this

当代码被内联处理函数调用时，它的this指向监听器所在的DOM元素：

<button onclick="alert(this.tagName.toLowerCase());">
  Show this
</button>