javascript 中的this

javascript中的this,我研究一段时间以后感觉没有一条完整的规律可以遵循，只能根据不同的语境来分别理解，所以要记忆，今天整理列出来：

1\Calling an Object’s Method

In typical object-oriented programming, we need a way of identifying and referring to the object that we’re currently working with.thisserves the purpose admirably, providing our objects the ability to examine themselves, and point at their own properties.

 <script. type="text/javascript">
  var deep_thought = {
   the_answer: 42,
   ask_question: function () {
    returnthis.the_answer;
   }
  };
 
  var the_meaning = deep_thought.ask_question();
 </script>

 settingthisto the object referenced by whatever came before the last ”.”

2\Constructor

Likewise, when defining a function to be used as a constructor with thenewkeyword,thiscan be used to refer to the object being created. Let’s rewrite the example above to reflect that scenario:

 <script. type="text/javascript">
  function BigComputer(answer) {
   this.the_answer = answer;
   this.ask_question = function () {
    returnthis.the_answer;
   }
  }
 
  var deep_thought = new BigComputer(42);
  var the_meaning = deep_thought.ask_question();
 </script>

thismeans “whateverdeep_thoughtrefers to”.thisis not read from the scope chain as other variables are, but instead isreseton a context by context basis.

this意思是"deep_thought指向的任何地址"，this不像其它变量一样从scope chain读取，而是根据上下文基础重置

对这段不是理解清楚，感觉就是在内存里重新划了一块地方,this指向了这里

3\Function Call

What if we just call a normal, everyday function without any of this fancy object stuff? What doesthismean in that scenario?

 <script. type="text/javascript">
  function test_this() {
   return this;
  }
  var i_wonder_what_this_is = test_this();
 </script>

In this case, we weren’t provided a context bynew, nor were we given a context in the form. of an object to piggyback off of. Here,thisdefaults to reference the most global thing it can:for web pages, this is thewindowobject.

4\Event Handler

有两种情况，第一种，触发事件写在标签里，如下

<script. type="text/javascript">
  function click_handler() {
   alert(this); // alerts the window object
  }
 </script>
 ...
 <button id='thebutton'onclick='click_handler()'>Click me!</button>

then,thisis window

第二种，触发事件写在脚本里

 <script. type="text/javascript">
  function click_handler() {
   alert(this); // alerts the button DOM node
  }
 
  function addhandler() {
   document.getElementById('thebutton').onclick = click_handler;
  }
 
  window.onload = addhandler;
 </script>
 ...
 <button id='thebutton'>Click me!</button>

then,thisis the DOM element that generated event

5\Complications

Let’s run with that last example for a moment longer. What if instead of runningclick_handler, we wanted to askdeep_thoughta question every time we clicked the button? The code for that seems pretty straightforward; we might try this:

<script. type="text/javascript">
 function BigComputer(answer) {
  this.the_answer = answer;
  this.ask_question = function () {
   alert(this.the_answer);
  }
 }
 
 function addhandler() {
  var deep_thought = new BigComputer(42),
   the_button = document.getElementById('thebutton');
 
  the_button.onclick = deep_thought.ask_question;
 }
 
 window.onload = addhandler;
</script>

same as up example two ,thisis the DOM element that generated event

共这5种情况，应该是比较全面了

同时也学习解决作用域的办法——使用bind,如下