JavaScript：this 关键字

this

this 是 JavaScript 语言的一个关键字。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。

function test() {
    this.x = 1;
}

this 的多种指向:

在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在对象方法中， this 指向该方法所属的对象。
• 单独使用 this， this指向全局对象。
• 函数使用中，this 指向函数的所属者。
• 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
• 在 HTML 事件中，this 指向了接收事件的 HTML 元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

this指向如何发生改变？

• 一般想到的是call和apply方法：
  将一个对象作为call或者apply的第一个参数，this将会被绑定到这个参数对象上

var obj = {
    parent:'男'
};
var parent = '28';
function child(obj){
    console.log(this.parent);
}
child(); // 28  
child.call(obj); //男
child.apply(obj); //男

• bind方法：
  调用f.bind(someObject)会创建一个与f具有相同函数体和作用域的函数，但是在这个新函数中，this将永久地被绑定到了bind的第一个参数，不管函数是怎样调用的。

function f(){
    return this.a;
}
var g = f.bind({a:"js"});
console.log(g()); // js

var h = g.bind({a:'html'}); // this已经被绑定bind的第一个参数，不会重复绑定，输出的值还是js
console.log(h()); // js

var o = {a:css, f:f, g:g, h:h};
console.log(o.f(), o.g(), o.h()); // css, js, js

• 箭头函数：
  在箭头函数中，箭头函数的this被设置为封闭的词法环境的，换句话说，箭头函数中的this取决于该函数被创建时的环境。

var objProject = this;
var foo = (() => this);
console.log(foo());  // window
console.log(objProject);  // window
console.log(foo() === objProject ); // true
// 作为对象的一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === objProject ); // true
// 尝试使用call来设定this
console.log(foo.call(obj) === objProject ); // true
// 尝试使用bind来设定this
foo = foo.bind(obj);
console.log(foo() === objProject ); // true

• 作为对象的方法调用时:
  当函数作为对象的方法被调用时，this指向调用的该函数的对象

var obj = {
    a: 37,
    fn: function() {
        return this.a;
    }
};
console.log(obj.fn());  // 37

• 作为构造函数:
  当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

function C(){
    this.a = 37;
}

var o = new C();
console.log(o.a); //  37
function C2(){
    this.a = 37;
    return {a:38};
}
o = new C2();
console.log(o.a); //  38，手动设置了返回对象

• 作为DOM事件处理函数
  当函数被用作事件处理函数时，它的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);
}