本页目录： <a href="#build">this 的建立</a> <a href="#index">this 指向</a> <a href="#rule">this 规则概括</a>
<h2 class="group flex justify-start items-center">this 的建立<a name="this-的建立" aria-label="Anchor" id="this-的建立" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#this-的建立">#</a></h2><ul>
<li>一般函数在预编译过程中生成的 AO 上下文</li>
<li>AO 中除了函数内的一些属性和函数参数外，还有<code>arguments</code>和<code>this</code>(箭头函数没有)。</li>
<li>所以函数（除了箭头函数）预编译过程会生成<code>this</code>隐式对象，并 默认指向 window。</li>
</ul>
<h2 class="group flex justify-start items-center">this 指向<a name="this-指向" aria-label="Anchor" id="this-指向" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#this-指向">#</a></h2><ul>
<li>而在预编译过程中，<code>this</code>会默认指向<code>window</code>。</li>
<li>而<code>new</code>操作时，会在函数内生成一个隐式<code>this</code>对象，而同时改变 AO 中<code>this</code>指向为本<code>this</code></li>
<li>用<code>obj.func()</code>调用的时候，会将<code>func()</code>内的<code>this</code>指向改为<code>obj</code></li>
</ul>
以上<code>this</code>的修改是在<code>func</code>有<code>this</code>的情况下，箭头函数没有 this，直接沿着作用域链向上寻找 this
注意函数作用域链的数据是由函数参数、函数内声明组成，fun.prop 无法 增加或更改作用域
<h2 class="group flex justify-start items-center">this 规则概括<a name="this-规则概括" aria-label="Anchor" id="this-规则概括" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#this-规则概括">#</a></h2><ol>
<li>函数编译过程中 AO 上下文中<code>this</code>默认指向<code>window</code></li>
<li>全局作用域里<code>this</code>指向<code>window</code></li>
<li><code>call</code>/<code>apply</code>可以利用参数改变<code>this</code>的指向</li>
<li><code>obj.fun()</code>调用时，<code>fun()</code>AO 中<code>this</code>指向 obj (<code>new</code> 生成对象时默认<code>return this</code>，所以只有<code>this.xxx</code>的属性才能被访问到)</li>
<li>html 元素脚本中，函数参数中的<code>this</code>指向元素本身</li>
</ol>
<hr>

THIS的指向

本页目录： <a href="#for">基础for循环</a> <a href="#forin">for in 循环</a> <a href="#forof">for of 循环</a> <a href="#foreach">array.forEach()方法</a> <a href="#summary">总结</a> 
<h2 class="group flex justify-start items-center">1. 基础for循环<a name="1.-基础for循环" aria-label="Anchor" id="1.-基础for循环" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#1.-基础for循环">#</a></h2><pre><code class="hljs ">for (var index = 0; index &lt; myArray.length; index++) {
 console.log(myArray[index]);
}</code></pre><h2 class="group flex justify-start items-center">2. for in 循环<a name="2.-for-in-循环" aria-label="Anchor" id="2.-for-in-循环" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#2.-for-in-循环">#</a></h2><ul>
<li>for...in 语句用于对数组或者对象的属性进行循环操作。<pre><code class="hljs ">for(let i in array) // i为数组的index：0，1，2，3.....
for(let i in obj) // i为obj 的属性名</code></pre><img src="https://ws3.sinaimg.cn/large/006tNbRwgy1fukqtphbb9j31e60bwgmv.jpg" alt=""></li>
</ul>
<h2 class="group flex justify-start items-center">3. for of 循环<a name="3.-for-of-循环" aria-label="Anchor" id="3.-for-of-循环" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#3.-for-of-循环">#</a></h2>参考链接：<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of</a>
<pre><code class="hljs ">for (let value of iterable) { // value为属性值
 //statements
}</code></pre>value 在每次迭代中，将不同属性的值分配给变量。 
iterable ( Array，Map，Set，String，TypedArray，arguments 对象等等) (obj不是iterable) 被迭代枚举其属性的对象。 <img src="https://ws4.sinaimg.cn/large/006tNbRwgy1fukqtq7vk6j31e60fqmzh.jpg" alt=""> 
<h2 class="group flex justify-start items-center">4. array.forEach()方法<a name="4.-array.foreach()方法" aria-label="Anchor" id="4.-array.foreach()方法" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#4.-array.foreach()方法">#</a></h2><pre><code class="hljs ">arr.forEach(function callback(value[, index[, array]]) { // value:属性值，index:当前索引，array:当前遍历数组
 //your iterator
}[, thisArg]); // thisArg:作为callback函数的this值</code></pre><img src="https://ws2.sinaimg.cn/large/006tNbRwgy1fukqto6spyj31ec0c0dh4.jpg" alt="">
<h2 class="group flex justify-start items-center">总结<a name="总结" aria-label="Anchor" id="总结" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#总结">#</a></h2><ol>
<li>少用for of，支持不好。性能也一般。性能基础for优化较好</li>
<li>遍历array，以上方法均可</li>
<li>遍历obj思路：<ol>
<li>获取obj的keys，利用基础for遍历</li>
<li>for in利用属性名获取属性值</li>
<li>利用object.keys()方法获取keys，再用keys.forEach()遍历获取属性值</li>
</ol>
</li>
</ol>

遍历obj和array

推荐使用 requestAnimationFrame 绘制 JS 动画

本页目录： <a href="#setTimeout">setTimeout</a> <a href="#setInterval">setInterval</a> <a href="#requestAnimationFrame">requestAnimationFrame</a> <a href="#jsAnimation">JS 动画</a> <a href="#useAnimation">推荐使用 requestAnimationFrame 绘制 JS 动画</a>
<h2 class="group flex justify-start items-center">setTimeout<a name="settimeout" aria-label="Anchor" id="settimeout" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#settimeout">#</a></h2><ul>
<li>在执行时,是在载入后延迟指定时间后执行一次表达式（仅执行一次）</li>
</ul>
<h2 class="group flex justify-start items-center">setInterval<a name="setinterval" aria-label="Anchor" id="setinterval" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#setinterval">#</a></h2><ul>
<li>在执行时,它从载入后,每隔指定的时间就执行一次表达式</li>
<li>在代码运行到间歇调用和超时调用时，定时器（浏览器中 独立于 js 线程的一个线程）会在相应的时间，将相应的代码放入宏代码队列中，所以不必考虑放代码时，js 是否有程序在运行。所以这两个函数只能保证按时将代码放入队列，但具体的执行时间要看队列前的函数执行情况（什么时候轮到放入的函数）。由于这三个函数都是 js 异步编程的一种实现，所以详情参看<a href="/blog/JS/JS%E5%BC%82%E6%AD%A5%E7%BC%96%E7%A8%8B#eventLoop">JS 异步编程 #浏览器线程和 Event Loop</a>
<img src="https://ws1.sinaimg.cn/large/006tNbRwgy1fukmxrd5ixj30m409smxx.jpg" alt=""></li>
</ul>
<h2 class="group flex justify-start items-center">requestAnimationFrame<a name="requestanimationframe" aria-label="Anchor" id="requestanimationframe" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#requestanimationframe">#</a></h2><ul>
<li>不能指定延迟时间，而是根据浏览器的刷新频率而定（帧），即浏览器页面刷新一次函数就执行一次，适合实现页面动画</li>
</ul>
<h2 class="group flex justify-start items-center">JS 动画<a name="js-动画" aria-label="Anchor" id="js-动画" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#js-动画">#</a></h2>理解了上面的概念以后，我们不难发现，setTimeout 其实就是通过设置一个间隔时间来不断的改变元素属性，从而达到动画效果的。但我们会发现，利用 seTimeout 实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：
<ol>
<li>setTimeout 的执行时间并不是确定的。在 JavaScript 中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完以后，才会去检查该队列里的任务是否需要开始执行，所以 setTimeout 的实际执行时机一般要比其设定的时间晚一些。</li>
<li>刷新频率受 屏幕分辨率 和 屏幕尺寸 的影响，不同设备的屏幕绘制频率可能会不同，而 setTimeout 只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。</li>
</ol>
以上两种情况都会导致 setTimeout 的执行步调和屏幕的刷新步调不一致，从而引起丢帧现象。 那为什么步调不一致就会引起丢帧呢？
首先要明白，setTimeout 的执行只是在内存中对元素属性进行改变，这个变化必须要等到屏幕下次绘制时才会被更新到屏幕上。如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的元素。假设屏幕每隔 16.7ms 刷新一次，而 setTimeout 每隔 10ms 设置图像向左移动 1px， 就会出现如下绘制过程：
<ul>
<li>第 0ms：屏幕未绘制， 等待中，setTimeout 也未执行，等待中；</li>
<li>第 10ms：屏幕未绘制，等待中，setTimeout 开始执行并设置元素属性 left=1px；</li>
<li>第 16.7ms：屏幕开始绘制，屏幕上的元素向左移动了 1px， setTimeout 未执行，继续等待中；</li>
<li>第 20ms：屏幕未绘制，等待中，setTimeout 开始执行并设置 left=2px;</li>
<li>第 30ms：屏幕未绘制，等待中，setTimeout 开始执行并设置 left=3px;</li>
<li>第 33.4ms：屏幕开始绘制，屏幕上的元素向左移动了 3px， setTimeout 未执行，继续等待中；</li>
<li>...</li>
</ul>
从上面的绘制过程中可以看出，屏幕没有更新 left=2px 的那一帧画面，元素直接从 left=1px 的位置跳到了 left=3px 的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。
<a href="" id="useAnimation"></a>
<h2 class="group flex justify-start items-center">推荐使用 requestAnimationFrame 绘制 JS 动画<a name="推荐使用-requestanimationframe-绘制-js-动画" aria-label="Anchor" id="推荐使用-requestanimationframe-绘制-js-动画" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#推荐使用-requestanimationframe-绘制-js-动画">#</a></h2>与 setTimeout 相比，requestAnimationFrame() 最大的优势是 由系统来决定回调函数的执行时机。具体一点讲就是，系统每次绘制之前会主动调用 requestAnimationFrame() 中的回调函数，如果系统绘制率是 60Hz，那么回调函数就每 16.7ms 被执行一次，如果绘制频率是 75Hz，那么这个间隔时间就变成了 1000/75=13.3ms。换句话说就是，requestAnimationFrame() 的执行步伐跟着系统的绘制频率走。它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
这个 API 的调用很简单，如下所示：
<pre><code class="hljs ">var progress = 0;
//回调函数
function render() {
 progress += 1; //修改图像的位置

 if (progress &lt; 100) {
 //在动画没有结束前，递归渲染
 window.requestAnimationFrame(render);
 }
}

//第一帧渲染
window.requestAnimationFrame(render);</code></pre>除此之外，requestAnimationFrame 还有以下两个优势：
<ol>
<li>PU 节能：使用 setTimeout 实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，而且还浪费 CPU 资源。而 rAF 则完全不同，当页面处理未激活的状态下，该页面的屏幕绘制任务也会被系统暂停，因此跟着系统步伐走的 rAF 也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了 CPU 开销。
</li>
<li>函数节流：在高频率事件(resize,scroll 等)中，为了防止在一个刷新间隔内发生多次函数执行，使用 rAF 可保证每个绘制间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。一个绘制间隔内函数执行多次时没有意义的，因为显示器每 16.7ms 绘制一次，多次绘制并不会在屏幕上体现出来。
</li>
</ol>
<a href="" id="suitDown"></a>
<h2 class="group flex justify-start items-center">适配低版本<a name="适配低版本" aria-label="Anchor" id="适配低版本" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#适配低版本">#</a></h2>以下代码考虑到部分浏览器不支持 requestAnimationFrame 的情况，对 requestAnimationFrame 和 cancelAnimationFrame 进行降级适配。
<pre><code class="hljs ">if (!Date.now)
 Date.now = function() { return new Date().getTime(); };

(function() {
 &#x27;use strict&#x27;;

 var vendors = [&#x27;webkit&#x27;, &#x27;moz&#x27;];
 for (var i = 0; i &lt; vendors.length &amp;&amp; !window.requestAnimationFrame; ++i) {
 var vp = vendors[i];
 window.requestAnimationFrame = window[vp+&#x27;RequestAnimationFrame&#x27;];
 window.cancelAnimationFrame = (window[vp+&#x27;CancelAnimationFrame&#x27;]
 || window[vp+&#x27;CancelRequestAnimationFrame&#x27;]);
 }
 if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
 || !window.requestAnimationFrame || !window.cancelAnimationFrame) {
 var lastTime = 0;
 window.requestAnimationFrame = function(callback) {
 var now = Date.now();
 var nextTime = Math.max(lastTime + 16, now);
 return setTimeout(function() { callback(lastTime = nextTime); },
 nextTime - now);
 };
 window.cancelAnimationFrame = clearTimeout;
 }
}());
```---
*本章节部分参考[一像素 博客](https://www.cnblogs.com/onepixel/p/7078617.html)，在此感谢！*

</code></pre>

THIS的指向

this 的建立#

this 指向#

this 规则概括#