【Web】Javascript中的this陷阱（二）

本节接着上一篇进行整理，上一篇链接如下：
http://blog.csdn.net/whuzxq/article/details/63265901

1.object this

---

在一个对象的一个函数里，你可以通过this来引用这个对象的其他属性。这个用new来新建一个实例是不一样的。

 var obj = {
     foo: "bar",
     logFoo: function () {
         console.log(this.foo);
     }
 };

 obj.logFoo(); //logs "bar"

注意，没有使用new，没有使用Object.create，也没有使用函数调用创建一个对象。你也可以将对象当作一个实例将函数绑定到上面。

 var obj = {
     foo: "bar"
 };

 function logFoo() {
     console.log(this.foo);
 }

 logFoo.apply(obj); //logs "bar"

当你用这种方式使用this的时候，并不会越出当前的对象。只有有相同直接父元素的属性才能通过this共享变量

  var obj = {
      foo: "bar",
      deeper: {
          logFoo: function () {
              console.log(this.foo);
          }
      }
  };

 obj.deeper.logFoo(); //logs undefined

你可以直接通过对象引用你需要的属性

var obj = {
    foo: "bar",
    deeper: {
        logFoo: function () {
            console.log(obj.foo);
        }
    }
};

obj.deeper.logFoo(); //logs "bar"

2.DOM event this

在一个HTML DOM事件处理程序里面，this始终指向这个处理程序被所绑定到的HTML DOM节点

  function Listener() {
      document.getElementById("foo").addEventListener("click",
         this.handleClick);
  }
  Listener.prototype.handleClick = function (event) {
      console.log(this); //logs "<div id="foo"></div>"
  }

  var listener = new Listener();
 document.getElementById("foo").click();

除非你自己通过bind切换了上下文

  function Listener() {
      document.getElementById("foo").addEventListener("click", 
          this.handleClick.bind(this));
  }
  Listener.prototype.handleClick = function (event) {
      console.log(this); //logs Listener {handleClick: function}
  }

  var listener = new Listener();
 document.getElementById("foo").click();

3.HTML this

在HTML节点的属性里面，你可以放置JavaScript代码，this指向了这个元素

 <div id="foo" onclick="console.log(this);"></div>
 <script type="text/javascript">
 document.getElementById("foo").click(); //logs <div id="foo"...
 </script>

override this
你不能重写this，因为它是保留字。

 function test () {
     var this = {};  // Uncaught SyntaxError: Unexpected token this 
 }

eval this
你可以通过eval来访问this

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
    eval("console.log(this.foo)"); //logs "bar"
}

var thing = new Thing();
thing.logFoo();

这会造成一个安全问题，除非不用eval，没有其他方式来避免这个问题。

在通过Function来创建一个函数的时候，同样能够访问this

function Thing () {
}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = new Function("console.log(this.foo);");

var thing = new Thing();
thing.logFoo(); //logs "bar"
with this