How is this used?

(1) Global environment

Use this in the global environment, which refers to the top-level object window.

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="k">this <span class="o">=== <span class="nb">window <span class="c1">// true<span class="kd">function <span class="nx">f<span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this <span class="o">=== <span class="nb">window<span class="p">); <span class="c1">// true<span class="p">}<br/>不管是不是在函数内部，只要是在全局环境下运行，<code class="highlighter-rouge">this</code>就是指顶层对象<code class="highlighter-rouge">window</code>。<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>

(2) Constructor

this in the constructor refers to the instance object.

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">Obj <span class="o">= <span class="kd">function <span class="p">(<span class="nx">p<span class="p">) <span class="p">{  <span class="k">this<span class="p">.<span class="nx">p <span class="o">= <span class="nx">p<span class="p">;<span class="p">};<span class="nx">Obj<span class="p">.<span class="nx">prototype<span class="p">.<span class="nx">m <span class="o">= <span class="kd">function<span class="p">() <span class="p">{  <span class="k">return <span class="k">this<span class="p">.<span class="nx">p<span class="p">;<span class="p">};</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">上面代码定义了一个构造函数<code class="highlighter-rouge">Obj</code>。由于<code class="highlighter-rouge">this</code>指向实例对象，所以在构造函数内部定义<code class="highlighter-rouge">this.p</code>，就相当于定义实例对象有一个<code class="highlighter-rouge">p</code>属性；然后<code class="highlighter-rouge">m</code>方法可以返回这个p属性。</span>

(3) Object method

When the method of object A is assigned to object B, this# in the method ##It changes from pointing to the A object to pointing to the B object. So be very careful. Assigning a method of an object to another object will change the pointer of this.

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">obj <span class="o">=<span class="p">{  <span class="na">foo<span class="p">: <span class="kd">function <span class="p">() <span class="p">{<span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);  <span class="p">}<span class="p">};<span class="nx">obj<span class="p">.<span class="nx">foo<span class="p">() <span class="c1">// obj</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>

obj.fooWhen the method is executed, its internal this points to obj.

However, there is only one usage (directly calling the foo method on the obj object), this points to obj; In other uses, this points to the object where the code block is currently located (the browser is the window object).

// 情况一(obj.foo = obj.foo)() // window// 情况二(false || obj.foo)() // window// 情况三(1, obj.foo)() // window

obj.fooOperation first and then execution, even if its value does not change at all, this no longer points to obj .

It can be understood that inside the JavaScript engine, obj and obj.foo are stored in two memory addresses, referred to as M1 and M2. Only when obj.foo() is called like this, M2 is called from M1, so this points to obj . However, in the above three cases, M2 is directly taken out for operation, and then the operation result is executed in the global environment (still M2), so this points to the global environment.

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 情况一<span class="p">(<span class="nx">obj<span class="p">.<span class="nx">foo <span class="o">= <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况二<span class="p">(<span class="kc">false <span class="o">|| <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()<span class="c1">// 情况三<span class="p">(<span class="mi">1<span class="p">, <span class="kd">function <span class="p">() <span class="p">{  <span class="nx">console<span class="p">.<span class="nx">log<span class="p">(<span class="k">this<span class="p">);<span class="p">})()</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei"">同样的，如果某个方法位于多层对象的内部，这时为了简化书写，把该方法赋值给一个变量，往往会得到意料之外的结果。</span>

var a = {  b: {m: function() {      console.log(this.p);},p: 'Hello'  }};var hello = a.b.m;hello() // undefined

上面代码中，m是多层对象内部的一个方法。为求简便，将其赋值给hello变量，结果调用时，this指向了顶层对象。为了避免这个问题，可以只将m所在的对象赋值给hello，这样调用时，this的指向就不会变。

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="kd">var <span class="nx">hello <span class="o">= <span class="nx">a<span class="p">.<span class="nx">b<span class="p">;<span class="nx">hello<span class="p">.<span class="nx">m<span class="p">() <span class="c1">// Hello</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/>

(4) Node

In Node, the pointing of this is divided into two situations. In the global environment, this points to the global object global; in the module environment, this points to module.exports.

<span style="font-size: 16px; font-family: "Microsoft YaHei""><code><span class="c1">// 全局环境<span class="k">this <span class="o">=== <span class="nx">global <span class="c1">// true<span class="c1">// 模块环境<span class="k">this <span class="o">=== <span class="nx">module<span class="p">.<span class="nx">exports <span class="c1">// true</span></span></span></span></span></span></span></span></span></span></span></span></code></span><br/><br/><span style="font-size: 16px; font-family: "Microsoft YaHei""><br/></span><br/><br/>

rrree

The above is the detailed content of How is this used?. For more information, please follow other related articles on the PHP Chinese website!