【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