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

docs/javascript/Introduction_to_Object-Oriented_JavaScript.html

@@ -43,14 +43,14 @@
 </div>
 <p>创造的JavaScript命名空间背后的想法很简单：一个全局对象被创建，所有的变量，方法和功能成为该对象的属性。使用命名空间也最大程度地减少应用程序的名称冲突的可能性。</p>
 <p>我们来创建一个全局变量叫做 MYAPP</p>
-<pre class="brush: js">// 全局命名空间
-var MYAPP = MYAPP || {};</pre>
+<pre><code  class="language-javascript">// 全局命名空间
+var MYAPP = MYAPP || {};</code></pre>
 <p>在上面的代码示例中，我们首先检查MYAPP是否已经被定义（是否在同一文件中或在另一文件）。如果是的话，那么使用现有的MYAPP全局对象，否则，创建一个名为MYAPP的空对象用来封装方法，函数，变量和对象。</p>
 <p>我们也可以创建子命名空间：</p>
-<pre class="brush: js">// 子命名空间
-MYAPP.event = {};</pre>
+<pre><code  class="language-javascript">// 子命名空间
+MYAPP.event = {};</code></pre>
 <p>下面是用于创建命名空间和添加变量，函数和方法的代码写法：</p>
-<pre class="brush: js">// 给普通方法和属性创建一个叫做MYAPP.commonMethod的容器
+<pre><code  class="language-javascript">// 给普通方法和属性创建一个叫做MYAPP.commonMethod的容器
 MYAPP.commonMethod = {
   regExForName: "", // 定义名字的正则验证
   regExForPhone: "", // 定义电话的正则验证
@@ -80,45 +80,45 @@ MYAPP.event = {
 }
 
 //使用addListener方法的写法:
-MYAPP.event.addListener("yourel", "type", callback);</pre>
+MYAPP.event.addListener("yourel", "type", callback);</code></pre>
 <h3 id="Core_Objects" name="Core_Objects">标准内置对象</h3>
 <p>JavaScript有包括在其核心的几个对象，例如，Math，Object，Array和String对象。下面的例子演示了如何使用Math对象的random()方法来获得一个随机数。</p>
-<pre class="brush: js">console.log(Math.random());
-</pre>
+<pre><code  class="language-javascript">console.log(Math.random());
+</code></pre>
 <div class="note"><strong>注意：</strong>这里和接下来的例子都假设名为 <code>console.log</code> 的方法全局有定义。<code>console.log</code> 实际上不是 JavaScript 自带的。</div>
 <p>查看 <a href="https://developer.mozilla.orgReference/Global_Objects" title="en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript 参考：全局对象</a> 了解 JavaScript 内置对象的列表。</p>
 <p>JavaScript 中的每个对象都是 <code>Object</code> 对象的实例且继承它所有的属性和方法。</p>
 <h3 id="Custom_Objects" name="Custom_Objects">自定义对象</h3>
 <h4 id="The_Class" name="The_Class">类</h4>
 <p>JavaScript是一种基于原型的语言，它没类的声明语句，比如C+ +或Java中用的。这有时会对习惯使用有类申明语句语言的程序员产生困扰。相反，JavaScript可用方法作类。定义一个类跟定义一个函数一样简单。在下面的例子中，我们定义了一个新类Person。</p>
-<pre class="brush: js">function Person() { } 
+<pre><code  class="language-javascript">function Person() { } 
 // 或
 var Person = function(){ }
-</pre>
+</code></pre>
 <h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29">对象（类的实例）</h4>
 <p>我们使用 <code>new <em>obj </em></code><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;">创建对象 </span><em><code>obj</code></em><span style="font-size: 14.3999996185303px; line-height: 16.7999992370605px;"> 的新实例</span><span style="font-size: 14px; line-height: 1.5;">, 将结果（</span><em><code>obj 类型</code></em><span style="font-size: 14px; line-height: 1.5;">）</span><span style="font-size: 14px; line-height: 1.5;">赋值给一个变量方便稍后调用。</span></p>
 <p>在下面的示例中，我们定义了一个名为<code>Person</code>的类，然后我们创建了两个<code>Person</code>的实例(<code>person1</code> and <code>person2</code>).</p>
-<pre class="brush: js">function Person() { }
+<pre><code  class="language-javascript">function Person() { }
 var person1 = new Person();
 var person2 = new Person();
-</pre>
+</code></pre>
 <div class="note"><strong>注意：</strong>有一种新增的创建未初始化实例的实例化方法，请参考 <a href="Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> 。</div>
 <h4 id="The_Constructor" name="The_Constructor">构造器</h4>
 <p>在实例化时构造器被调用 (也就是对象实例被创建时)。构造器是对象中的一个方法。 在JavaScript中函数就可以作为构造器使用，因此不需要特别地定义一个构造器方法，每个声明的函数都可以在实例化后被调用执行。</p>
 <p>构造器常用于给对象的属性赋值或者为调用函数做准备。 在本文的后面描述了类中方法既可以在定义时添加，也可以在使用前添加。</p>
 <p>在下面的示例中, <code>Person类实例化时构造器调用一个</code> alert函数。</p>
-<pre class="brush: js">function Person() {
+<pre><code  class="language-javascript">function Person() {
   alert('Person instantiated');
 }
 
 var person1 = new Person();
 var person2 = new Person();
-</pre>
+</code></pre>
 <h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">属性 (对象属性)</h4>
 <p>属性就是 类中包含的变量;每一个对象实例有若干个属性. 为了正确的继承，属性应该被定义在类的原型属性 (函数)中。</p>
 <p>可以使用 关键字 <code>this</code>调用类中的属性, this是对当前对象的引用。 从外部存取(读/写)其属性的语法是: <code>InstanceName.Property</code>; 这与C++，Java或者许多其他语言中的语法是一样的 (在类中语法 <code>this.Property</code> 常用于set和get属性值)</p>
 <p>在下面的示例中，我们为定义<code>Person类定义了一个属性</code> <code>firstName</code> 并在实例化时赋初值。</p>
-<pre class="brush: js">function Person(firstName) {
+<pre><code  class="language-javascript">function Person(firstName) {
   this.firstName = firstName;
   alert('Person instantiated');
 }
@@ -129,11 +129,11 @@ var person2 = new Person('Bob');
 // Show the firstName properties of the objects
 alert('person1 is ' + person1.firstName); // alerts "person1 is Alice"
 alert('person2 is ' + person2.firstName); // alerts "person2 is Bob"
-</pre>
+</code></pre>
 <h4 id="The_methods" name="The_methods">方法（对象属性）</h4>
 <p>方法与属性很相似， 不同的是：一个是函数，另一个可以被定义为函数。 调用方法很像存取一个属性,  不同的是add <code>()</code> 在方法名后面很可能带着参数. 为定义一个方法, 需要将一个函数赋值给类的 <code>prototype</code> 属性; 这个赋值给函数的名称就是用来给对象在外部调用它使用的。</p>
 <p>在下面的示例中，我们给<code>Person类</code>定义了方法 <code>sayHello()</code>，并调用了它.</p>
-<pre class="brush: js">function Person(firstName) {
+<pre><code  class="language-javascript">function Person(firstName) {
   this.firstName = firstName;
 }
 
@@ -147,9 +147,9 @@ var person2 = new Person("Bob");
 // call the Person sayHello method.
 person1.sayHello(); // alerts "Hello, I'm Alice"
 person2.sayHello(); // alerts "Hello, I'm Bob"
-</pre>
+</code></pre>
 <p>在JavaScript中方法通常是一个绑定到对象中的普通函数, 这意味着方法可以在其所在context之外被调用。 思考下面示例中的代码:</p>
-<pre class="brush: js">function Person(firstName) {
+<pre><code  class="language-javascript">function Person(firstName) {
   this.firstName = firstName;
 }
 
@@ -168,7 +168,7 @@ helloFunction();                                    // alerts "Hello, I'm undefi
 console.log(helloFunction === person1.sayHello);          // logs true
 console.log(helloFunction === Person.prototype.sayHello); // logs true
 helloFunction.call(person1);                        // logs "Hello, I'm Alice"
-</pre>
+</code></pre>
 <p>如上例所示, 所有指向<code>sayHello函数的引用</code> ，包括 <code>person1</code>, <code>Person.prototype</code>, 和 <code>helloFunction</code> 等， 均引用了<em>相同的函数</em>.</p>
 <p>在调用函数的过程中，<span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">this的值</span><span style="line-height: 1.5;">取决于我们怎么样调用函数. </span><span style="line-height: 1.5;"> 在通常情况下，我们通过一个表达式</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">person1.sayHello()</span><span style="line-height: 1.5;">来调用函数：即从一个对象的属性中得到所调用的函数</span><span style="line-height: 1.5;">。此时this被设置为我们取得函数的对象（即</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">person1</span><span style="line-height: 1.5;">）。这就是为什么</span><code style="font-style: normal; line-height: 1.5;">person1.sayHello()</code><span style="line-height: 1.5;"> 使用了姓名“Alice”而</span><code style="font-style: normal; line-height: 1.5;">person2.sayHello()使用了姓名“bob”的原因。</code><span style="line-height: 1.5;"> </span></p>
 <p><span style="line-height: 1.5;">然而我们使用不同的调用方法时, </span><code style="font-style: normal; line-height: 1.5;">this的值也就不同了</code><span style="line-height: 1.5;">。当从变量 </span><code style="font-style: normal; line-height: 1.5;">helloFunction()中调用的时候，</code><span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">this</code><span style="line-height: 1.5;">就被设置成了全局对象 (在浏览器中即</span><code style="font-style: normal; line-height: 1.5;">window</code><span style="line-height: 1.5;">)。由于该对象 (非常可能地) 没有</span><code style="font-style: normal; line-height: 1.5;">firstName</code><span style="line-height: 1.5;"> 属性, 我们得到的结果便是"Hello, I'm undefined". (这是松散模式下的结果， 在 </span><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">严格模式</a>中，结果将不同（此时会产生一个error）。<span style="line-height: 1.5;"> 但是为了避免混淆，我们在这里不涉及细节) 。另外，我们可以像上例末尾那样，使用</span><code style="font-style: normal; line-height: 1.5;">Function#call</code><span style="line-height: 1.5;"> (或者</span><code style="font-style: normal; line-height: 1.5;">Function#apply</code><span style="line-height: 1.5;">)</span><span style="line-height: 1.5;">显式的设置</span><span style="font-family: consolas,monaco,andale mono,monospace; line-height: 1.5;">this的值。</span></p>
@@ -179,7 +179,7 @@ helloFunction.call(person1);                        // logs "Hello, I'm Alice"
 <p>JavaScript 并不检测子类的 <code>prototype.constructor</code> (见 <a href="/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/prototype">Object.prototype</a>), 所以我们必须手动申明它.</p>
 </div>
 <p>在下面的例子中, 我们定义了 <code>Student类作为</code> <code>Person类的子类</code>. 之后我们重定义了<code>sayHello()</code> 方法并添加了 <code>sayGoodBye() 方法</code>.</p>
-<pre class="brush: js">// 定义Person构造器
+<pre><code  class="language-javascript">// 定义Person构造器
 function Person(firstName) {
   this.firstName = firstName;
 }
@@ -230,9 +230,9 @@ student1.sayGoodBye(); // "Goodbye!"
 // Check that instanceof works correctly
 console.log(student1 instanceof Person);  // true 
 console.log(student1 instanceof Student); // true
-</pre>
+</code></pre>
 <p>对于“<span style="font-family: consolas,monaco,andale mono,monospace;">Student.prototype = Object.create(Person.prototype);</span>”这一行，在不支持 <code><a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a>方法的老JavaScript引擎中，可以使用一个</code>"polyfill"（又名"shim"，查看文章链接），或者使用一个function来获得相同的返回值，就像下面：</p>
-<pre class="brush: js">function createObject(proto) {
+<pre><code  class="language-javascript">function createObject(proto) {
     function ctor() { }
     ctor.prototype = proto;
     return new ctor();
@@ -240,7 +240,7 @@ console.log(student1 instanceof Student); // true
 
 // Usage:
 Student.prototype = createObject(Person.prototype);
-</pre>
+</code></pre>
 <div class="note">更多相关信息请参考<em> </em><a href="/en/JavaScript/Reference/Global_Objects/Object/create" style="font-style: italic;" title="Object.create">Object.create</a>，连接中还有一个老JavaScript引擎的兼容方案（shim）。</div>
 <h4 id="Encapsulation" name="Encapsulation">封装</h4>
 <p>在上一个例子中，Student类虽然不需要知道Person类的walk()方法是如何实现的，但是仍然可以使用这个方法；Student类不需要明确地定义这个方法，除非我们想改变它。 这就叫做<strong>封装</strong>，对于所有继承自父类的方法，只需要在子类中定义那些你想改变的即可。</p>
@@ -248,9 +248,9 @@ Student.prototype = createObject(Person.prototype);
 <p>抽象是允许模拟工作问题中通用部分的一种机制。这可以通过继承（具体化）或组合来实现。<br/>
  JavaScript通过继承实现具体化，通过让类的实例是其他对象的属性值来实现组合。</p>
 <p>JavaScript Function 类继承自Object类（这是典型的具体化） 。Function.prototype的属性是一个Object实例（这是典型的组合）。</p>
-<pre class="brush: js">var foo = function(){};
+<pre><code  class="language-javascript">var foo = function(){};
 console.log( 'foo is a Function: ' + (foo instanceof Function) );                  <span style="font-size: 1rem;">// logs "</span><span style="font-size: 1rem;">foo is a Function: true</span><span style="font-size: 1rem;">"</span>
-console.log( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); // logs "<span style="font-size: 1rem;">foo.prototype is an Object: true</span><span style="font-size: 1rem;">"</span></pre>
+console.log( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) ); // logs "<span style="font-size: 1rem;">foo.prototype is an Object: true</span><span style="font-size: 1rem;">"</span></code></pre>
 <h4 id="Polymorphism" name="Polymorphism">多态</h4>
 <p>就像所有定义在原型属性内部的方法和属性一样，不同的类可以定义具有相同名称的方法;方法是作用于所在的类中。并且这仅在两个类不是父子关系时成立（继承链中，一个类不是继承自其他类）。</p>
 <h2 id="Notes" name="Notes">注意</h2>