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()); // jsvar h = g.bind({a:'html'}); // this已经被绑定bind的第一个参数，不会重复绑定，输出的值还是jsconsole.log(h()); // jsvar 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());  // windowconsole.log(objProject);  // windowconsole.log(foo() === objProject ); // true// 作为对象的一个方法调用var obj = {foo: foo};console.log(obj.foo() === objProject ); // true// 尝试使用call来设定thisconsole.log(foo.call(obj) === objProject ); // true// 尝试使用bind来设定thisfoo = 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); //  37function 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);}