JavaScript中的this对象指向理解
<p>在JavaScript中，this不是固定不变的，它的指向取决于上下文环境，一般的，认为<strong>this指向使用它时所在的对象</strong>。主要有以下几类指向：</p><ul>
<li>在方法中，this 表示该方法所属的对象。</li>
<li>如果单独使用，this 表示全局对象。</li>
<li>在函数中，this 表示全局对象。</li>
<li>在函数中，在严格模式下，this 是未定义的(undefined)。</li>
<li>在事件中，this 表示接收事件的元素。</li>
<li>类似 call() 和 apply() 方法可以将 this 引用到任何对象。</li>
</ul>
<h3 id="一方法中的this">一、方法中的this</h3>
<pre><code class="language-js">var isObject = {
a: 'inner object',
innerFunction: function() {
return this.a;
}
}
console.log('方法里的this指向:', isObject.innerFunction());
//输出结果：方法里的this指向: inner object
</code></pre>
<p>由上面代码可以看出，因为对象调用了其内部方法innerFunction()，所以此时this指向使用它时所在的对象，即isObject对象。</p>
<p>如果我们此时在innerFunction()函数里<code>return this</code>，此时控制台打印出<code>Object {a: "inner object", innerFunction: }</code>，表示this正好指向isObject对象。</p>
<h3 id="二单独使用this">二、单独使用this</h3>
<pre><code class="language-js">var x = this;
console.log("this指向：", x);
//输出结果：this指向： Window {postMessage: , blur: , focus: , close: , parent: Window, …}
</code></pre>
<p>可以看出，当单独使用this时，this指向window对象</p>
<h3 id="三函数中使用this">三、函数中使用this</h3>
<pre><code class="language-js">var variable = 'test';
function outerFunction() {
var variable = 0;
return this.variable;
}
console.log('函数中this指向：', outerFunction());
//输出结果：函数中this指向：test
</code></pre>
<p>从上面代码看出，函数中的this指向window对象，所以打印出的结果是test而不是0。</p>
<p>如果我们此时在outerFunction()函数里<code>return this</code>，此时控制台打印出<code>Window {postMessage: , blur: , focus: , close: , parent: Window, …}</code>,表示this指向window对象。</p>
<p>值的注意的一点是在严格模式中，函数并不能绑定到this上，所以这时候的this是undefined。</p>
<p>再来看一个例子：</p>
<pre><code class="language-js">var a = 21;
var isObject = {
a: 'inner object',
innerFunction: function() {
return this.a;
}
}
var useObject = isObject.innerFunction;
console.log('结果：', useObject());
//输出结果:结果：21
</code></pre>
<p>可能有人会问，为什么输出的不是<code>inner object</code>，而是21，注意，this指向的是使用它时所在的对象，因为<code>isObject.innerFunction</code>将自身赋给全局变量useObject，所以此时useObject保存的是innerFunction()方法，this指向全局。</p>
<h3 id="四事件中的this">四、事件中的this</h3>
<pre><code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="this.style.display='none'">点我我就消失</button>
</body>
</html>
</code></pre>
<p>很显然，在HTML事件句柄中，this指向了接收事件的HTML元素。</p>
<h3 id="五箭头函数中的this">五、箭头函数中的this</h3>
<p>需要注意的是，箭头函数内部并没有绑定this的机制，所以this的指向是固定的，即<strong>指向当前定义时所在的对象</strong>（注意，一般情况下，上下文环境不做变化，this为全局对象，即this定义在顶层环境）。也可以说，内部的this就是外层代码块的this。</p>
<pre><code class="language-js">var isObject = {
a: 'hhh',
functions: () => {
console.log("对象：",this);
}
}
isObject.functions();
//输出结果：对象：Window {postMessage: , blur: , focus: , close: , parent: Window, …}
</code></pre>
<p>可以看到，同样是对象方法，箭头函数里的this指向的是window对象。</p>
<p>再来看一个例子：</p>
<pre><code class="language-js">var isObject = {
a: 'hhh',
functions: () => {
this.a = 0
console.log("结果：",this.a);
}
}
isObject.functions();
//输出结果：结果：0
</code></pre>
<p>此时，在isObject对象functions方法内部定义了一个属性a，它属于this全局对象，所以输出结果为0。</p>
<p>难道this只能指向window了吗？答案是否定的，再来看一个例子：</p>
<pre><code class="language-js">function myFunction() {
var innerfunction = () => {
console.log('x:', this.x);
}
return innerfunction;
}
var test = myFunction.call({x: 1});
test();
//输出结果：1
</code></pre>
<p>从上面代码可以看出，this此时指向myFunction里的对象{x:1}，所以打印出的结果为1。注意，因为箭头函数本身并不能绑定this，所以它不能使用apply，call，bind方法来改变上下文环境。</p><br><br>
来源：https://www.cnblogs.com/mogebw/p/12099099.html
頁:
[1]