语法高亮，滚动条美化，设置页面调整

docs/javascript/Reference/Global_Objects/Function/bind.html

@@ -4,7 +4,7 @@
 <div><iframe class="interactive interactive-js taller" frameborder="0" height="250" src="https://interactive-examples.mdn.mozilla.net/pages/js/function-bind.html" width="100%"></iframe></div>
 <p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a class="external" href="https://github.com/mdn/interactive-examples" rel="noopener">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
 <h2 id="语法">语法</h2>
-<pre class="syntaxbox"><code><var>function</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></pre>
+<pre><code class="language-javascript"><code><var>function</var>.bind(<var>thisArg</var>[, <var>arg1</var>[, <var>arg2</var>[, ...]]])</code></code></pre>
 <h3 id="参数">参数</h3>
 <dl>
 <dt><code>thisArg</code></dt>
@@ -33,7 +33,7 @@
 <h2 id="示例">示例</h2>
 <h3 id="创建绑定函数">创建绑定函数</h3>
 <p><code>bind()</code> 最简单的用法是创建一个函数，不论怎么调用，这个函数都有同样的 <strong><code>this</code></strong> 值。JavaScript新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，期望方法中的 <code>this</code> 是原来的对象（比如在回调中传入这个方法）。如果不做特殊处理的话，一般会丢失原来的对象。基于这个函数，用原始的对象创建一个绑定函数，巧妙地解决了这个问题：</p>
-<pre class="brush: js">this.x = 9;    // 在浏览器中，this指向全局的 "window" 对象
+<pre><code  class="language-javascript">this.x = 9;    // 在浏览器中，this指向全局的 "window" 对象
 var module = {
   x: 81,
   getX: function() { return this.x; }
@@ -49,10 +49,10 @@ retrieveX();
 // 新手可能会将全局变量 x 与 module 的属性 x 混淆
 var boundGetX = retrieveX.bind(module);
 boundGetX(); // 81
-</pre>
+</code></pre>
 <h3 id="偏函数">偏函数</h3>
 <p><code>bind()</code>的另一个最简单的用法是使一个函数拥有预设的初始参数。只要将这些参数（如果有的话）作为<code>bind()</code>的参数写在<code>this</code>后面。当绑定函数被调用时，这些参数会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们后面。</p>
-<pre class="brush: js">function list() {
+<pre><code  class="language-javascript">function list() {
   return Array.prototype.slice.call(arguments);
 }
 
@@ -81,10 +81,10 @@ var result2 = addThirtySeven(5);
 
 var result3 = addThirtySeven(5, 10);
 // 37 + 5 = 42 ，第二个参数被忽略
-</pre>
+</code></pre>
 <h3 id="配合_setTimeout">配合 <code>setTimeout</code></h3>
 <p>在默认情况下，使用 <a href="/zh-CN/docs/Web/API/Window/setTimeout" title="WindowOrWorkerGlobalScope 混合的 setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。"><code>window.setTimeout()</code></a> 时，<code>this</code> 关键字会指向 <a href="/zh-CN/docs/Web/API/Window" title="The window object represents a window containing a DOM document; the document property points to the DOM document loaded in that window."><code>window</code></a> （或<code>global</code>）对象。当类的方法中需要 <code>this</code> 指向类的实例时，你可能需要显式地把 <code>this</code> 绑定到回调函数，就不会丢失该实例的引用。</p>
-<pre class="brush: js"><code>function LateBloomer() {
+<pre><code  class="language-javascript"><code>function LateBloomer() {
   this.petalCount = Math.ceil(Math.random() * 12) + 1;
 }
 
@@ -99,13 +99,13 @@ LateBloomer.prototype.declare = function() {
 };
 
 var flower = new LateBloomer();
-flower.bloom();  // 一秒钟后, 调用'declare'方法</code></pre>
+flower.bloom();  // 一秒钟后, 调用'declare'方法</code></code></pre>
 <h3 id="作为构造函数使用的绑定函数">作为构造函数使用的绑定函数</h3>
 <div class="warning">
 <p><strong>警告</strong> :这部分演示了 JavaScript 的能力并且记录了 <code>bind()</code> 的超前用法。以下展示的方法并不是最佳的解决方案，且可能不应该用在任何生产环境中。</p>
 </div>
 <p>绑定函数自动适应于使用 <a href="Reference/Operators/new" title="new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。"><code>new</code></a> 操作符去构造一个由目标函数创建的新实例。当一个绑定函数是用来构建一个值的，原来提供的 <code>this</code> 就会被忽略。不过提供的参数列表仍然会插入到构造函数调用时的参数列表之前。</p>
-<pre class="brush: js">function Point(x, y) {
+<pre><code  class="language-javascript">function Point(x, y) {
   this.x = x;
   this.y = y;
 }
@@ -130,9 +130,9 @@ axisPoint.toString(); // '0,5'
 
 axisPoint instanceof Point; // true
 axisPoint instanceof YAxisPoint; // true
-new Point(17, 42) instanceof YAxisPoint; // true</pre>
+new Point(17, 42) instanceof YAxisPoint; // true</code></pre>
 <p>请注意，你不需要做特别的处理就可以用 <a href="Reference/Operators/new" title="new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。"><code>new</code></a> 操作符创建一个绑定函数。也就是说，你不需要做特别处理就可以创建一个可以被直接调用的绑定函数，即使你更希望绑定函数是用 <a href="Reference/Operators/new" title="new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。"><code>new</code></a> 操作符来调用。</p>
-<pre class="brush: js">// 这个例子可以直接在你的 javascript 控制台运行
+<pre><code  class="language-javascript">// 这个例子可以直接在你的 javascript 控制台运行
 // ...接着上面的代码继续
 
 // 仍然能作为一个普通函数来调用
@@ -140,27 +140,27 @@ new Point(17, 42) instanceof YAxisPoint; // true</pre>
 YAxisPoint(13);
 
 emptyObj.x + ',' + emptyObj.y;   //  '0,13'
-</pre>
+</code></pre>
 <p>如果你希望一个绑定函数要么只能用 <a href="Reference/Operators/new" title="new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。"><code>new</code></a> 操作符，要么只能直接调用，那你必须在目标函数上显式规定这个限制。</p>
 <h3 id="Example:_Creating_shortcuts" name="Example:_Creating_shortcuts">快捷调用</h3>
 <p>在你想要为一个需要特定的 <strong><code>this</code></strong> 值的函数创建一个捷径（shortcut）的时候，<code>bind()</code> 也很好用。</p>
 <p>你可以用 <a href="Reference/Global_Objects/Array/slice" title="The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request."><code>Array.prototype.slice</code></a> 来将一个类似于数组的对象（array-like object）转换成一个真正的数组，就拿它来举例子吧。你可以简单地这样写：</p>
-<pre class="brush: js">var slice = Array.prototype.slice;
+<pre><code  class="language-javascript">var slice = Array.prototype.slice;
 
 // ...
 
-slice.apply(arguments);</pre>
+slice.apply(arguments);</code></pre>
 <p>用 <code>bind()</code>可以使这个过程变得简单。在下面这段代码里面，<code>slice</code> 是 <a href="Reference/Global_Objects/Function/prototype" title="Function.prototype 属性存储了 Function 的原型对象。"><code>Function.prototype</code></a> 的 <a href="Reference/Global_Objects/Function/apply" title="apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。"><code>apply()</code></a> 方法的绑定函数，并且将 <a href="Reference/Global_Objects/Array/prototype" title="Array.prototype  属性表示 Array 构造函数的原型，并允许您向所有Array对象添加新的属性和方法。"><code>Array.prototype</code></a> 的 <a href="Reference/Global_Objects/Array/slice" title="The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request."><code>slice()</code></a> 方法作为 <strong><code>this</code></strong> 的值。这意味着我们压根儿用不着上面那个 <code>apply()</code>调用了。</p>
-<pre class="brush: js">// 与前一段代码的 "slice" 效果相同
+<pre><code  class="language-javascript">// 与前一段代码的 "slice" 效果相同
 var unboundSlice = Array.prototype.slice;
 var slice = Function.prototype.apply.bind(unboundSlice);
 
 // ...
 
-slice(arguments);</pre>
+slice(arguments);</code></pre>
 <h2 id="Compatibility" name="Compatibility">Polyfill</h2>
 <p>你可以将这段代码插入到你的脚本开头，从而使你的 <code>bind()</code> 在没有内置实现支持的环境中也可以部分地使用<code>bind</code>。</p>
-<pre class="brush: js">if (!Function.prototype.bind) {
+<pre><code  class="language-javascript">if (!Function.prototype.bind) {
   Function.prototype.bind = function(oThis) {
     if (typeof this !== 'function') {
       // closest thing possible to the ECMAScript 5
@@ -191,7 +191,7 @@ slice(arguments);</pre>
 
     return fBound;
   };
-}</pre>
+}</code></pre>
 <p>上述算法和实际的实现算法还有许多其他的不同 （尽管可能还有其他不同之处，却没有那个必要去穷尽）：</p>
 <ul>
 <li>这部分实现依赖于<a href="Reference/Global_Objects/Array/slice" title="The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request."><code>Array.prototype.slice()</code></a>， <a href="Reference/Global_Objects/Array/concat" title="concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。"><code>Array.prototype.concat()</code></a>， <a href="Reference/Global_Objects/Function/call" title="call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。"><code>Function.prototype.call()</code></a>这些原生方法。</li>