JavaScript繼承詳解（二）

這一章咱們將會重點介紹JavaScript中幾個重要的屬性（this、constructor、prototype）， 這些屬性對於咱們理解如何實現JavaScript中的類和繼承起着相當重要的做用。

this

this表示當前對象，若是在全局做用範圍內使用this，則指代當前頁面對象window； 若是在函數中使用this，則this指代什麼是根據運行時此函數在什麼對象上被調用。 咱們還可使用apply和call兩個全局方法來改變函數中this的具體指向。

先看一個在全局做用範圍內使用this的例子：

1         <script type="text/javascript">
2             console.log(this === window);  // true
3             console.log(window.alert === this.alert);  // true
4             console.log(this.parseInt("021", 10));  // 10
5         </script>

 

 

函數中的this是在運行時決定的，而不是函數定義時，以下：

 1   // 定義一個全局函數
 2         function foo() {
 3             console.log(this.fruit);
 4         }
 5         // 定義一個全局變量，等價於window.fruit = "apple";
 6         var fruit = "apple";
 7         // 此時函數foo中this指向window對象
 8         // 這種調用方式和window.foo();是徹底等價的
 9         foo();  // "apple"
10 
11         // 自定義一個對象，並將此對象的屬性foo指向全局函數foo
12         var pack = {
13             fruit: "orange",
14             foo: foo
15         };
16         // 此時函數foo中this指向window.pack對象
17         pack.foo(); // "orange"

 

 

全局函數apply和call能夠用來改變函數中this的指向，以下：

 1         // 定義一個全局函數
 2         function foo() {
 3             console.log(this.fruit);
 4         }
 5         
 6         // 定義一個全局變量
 7         var fruit = "apple";
 8         // 自定義一個對象
 9         var pack = {
10             fruit: "orange"
11         };
12         
13         // 等價於window.foo();
14         foo.apply(window);  // "apple"
15         // 此時foo中的this === pack
16         foo.apply(pack);    // "orange"

 

注：apply和call兩個函數的做用相同，惟一的區別是兩個函數的參數定義不一樣。

 

由於在JavaScript中函數也是對象，因此咱們能夠看到以下有趣的例子：

 1  // 定義一個全局函數
 2         function foo() {
 3             if (this === window) {
 4                 console.log("this is window.");
 5             }
 6         }
 7         
 8         // 函數foo也是對象，因此能夠定義foo的屬性boo爲一個函數
 9         foo.boo = function() {
10             if (this === foo) {
11                 console.log("this is foo.");
12             } else if (this === window) {
13                 console.log("this is window.");
14             }
15         };
16         // 等價於window.foo();
17         foo();  // this is window.
18         
19         // 能夠看到函數中this的指向調用函數的對象
20         foo.boo();  // this is foo.
21         
22         // 使用apply改變函數中this的指向
23         foo.boo.apply(window);  // this is window.

 

 

prototype

咱們已經在第一章中使用prototype模擬類和繼承的實現。 prototype本質上仍是一個JavaScript對象。 而且每一個函數都有一個默認的prototype屬性。 
若是這個函數被用在建立自定義對象的場景中，咱們稱這個函數爲構造函數。 好比下面一個簡單的場景：

 1         // 構造函數
 2         function Person(name) {
 3             this.name = name;
 4         }
 5         // 定義Person的原型，原型中的屬性能夠被自定義對象引用
 6         Person.prototype = {
 7             getName: function() {
 8                 return this.name;
 9             }
10         }
11         var zhang = new Person("ZhangSan");
12         console.log(zhang.getName());   // "ZhangSan"
13         

 

做爲類比，咱們考慮下JavaScript中的數據類型 - 字符串（String）、數字（Number）、數組（Array）、對象（Object）、日期（Date）等。 咱們有理由相信，在JavaScript內部這些類型都是做爲構造函數來實現的，好比：

 1     // 定義數組的構造函數，做爲JavaScript的一種預約義類型
 2         function Array() {
 3             // ...
 4         }
 5         
 6         // 初始化數組的實例
 7         var arr1 = new Array(1, 56, 34, 12);
 8         // 可是，咱們更傾向於以下的語法定義：
 9         var arr2 = [1, 56, 34, 12];
10         

 

同時對數組操做的不少方法（好比concat、join、push）應該也是在prototype屬性中定義的。 
實際上，JavaScript全部的固有數據類型都具備只讀的prototype屬性（這是能夠理解的：由於若是修改了這些類型的prototype屬性，則哪些預約義的方法就消失了）， 可是咱們能夠向其中添加本身的擴展方法。

 1      // 向JavaScript固有類型Array擴展一個獲取最小值的方法
 2         Array.prototype.min = function() {
 3             var min = this[0];
 4             for (var i = 1; i < this.length; i++) {
 5                 if (this[i] < min) {
 6                     min = this[i];
 7                 }
 8             }
 9             return min;
10         };
11         
12         // 在任意Array的實例上調用min方法
13         console.log([1, 56, 34, 12].min());  // 1
14         

 

注意：這裏有一個陷阱，向Array的原型中添加擴展方法後，當使用for-in循環數組時，這個擴展方法也會被循環出來。 
下面的代碼說明這一點（假設已經向Array的原型中擴展了min方法）：

1        var arr = [1, 56, 34, 12];
2         var total = 0;
3         for (var i in arr) {
4             total += parseInt(arr[i], 10);
5         }
6         console.log(total);   // NaN
7         
8         

 

解決方法也很簡單：

1         var arr = [1, 56, 34, 12];
2         var total = 0;
3         for (var i in arr) {
4             if (arr.hasOwnProperty(i)) {
5                 total += parseInt(arr[i], 10);
6             }
7         }
8         console.log(total);   // 103
9         

 

 

constructor

constructor始終指向建立當前對象的構造函數。好比下面例子：

 1         // 等價於 var foo = new Array(1, 56, 34, 12);
 2         var arr = [1, 56, 34, 12];
 3         console.log(arr.constructor === Array); // true
 4         // 等價於 var foo = new Function();
 5         var Foo = function() { };
 6         console.log(Foo.constructor === Function); // true
 7         // 由構造函數實例化一個obj對象
 8         var obj = new Foo();
 9         console.log(obj.constructor === Foo); // true
10         
11         // 將上面兩段代碼合起來，就獲得下面的結論
12         console.log(obj.constructor.constructor === Function); // true
13         

 

 

可是當constructor遇到prototype時，有趣的事情就發生了。 
咱們知道每一個函數都有一個默認的屬性prototype，而這個prototype的constructor默認指向這個函數。以下例所示：

 1         function Person(name) {
 2             this.name = name;
 3         };
 4         Person.prototype.getName = function() {
 5             return this.name;
 6         };
 7         var p = new Person("ZhangSan");
 8         
 9         console.log(p.constructor === Person);  // true
10         console.log(Person.prototype.constructor === Person); // true
11         // 將上兩行代碼合併就獲得以下結果
12         console.log(p.constructor.prototype.constructor === Person); // true

 

當時當咱們從新定義函數的prototype時（注意：和上例的區別，這裏不是修改而是覆蓋）， constructor的行爲就有點奇怪了，以下示例：

 1     function Person(name) {
 2             this.name = name;
 3         };
 4         Person.prototype = {
 5             getName: function() {
 6                 return this.name;
 7             }
 8         };
 9         var p = new Person("ZhangSan");
10         console.log(p.constructor === Person);  // false
11         console.log(Person.prototype.constructor === Person); // false
12         console.log(p.constructor.prototype.constructor === Person); // false

 

爲何呢？ 
原來是由於覆蓋Person.prototype時，等價於進行以下代碼操做：

1         Person.prototype = new Object({
2             getName: function() {
3                 return this.name;
4             }
5         });
6         

 

而constructor始終指向建立自身的構造函數，因此此時Person.prototype.constructor === Object，便是：

 1       function Person(name) {
 2             this.name = name;
 3         };
 4         Person.prototype = {
 5             getName: function() {
 6                 return this.name;
 7             }
 8         };
 9         var p = new Person("ZhangSan");
10         console.log(p.constructor === Object);  // true
11         console.log(Person.prototype.constructor === Object); // true
12         console.log(p.constructor.prototype.constructor === Object); // true

 

怎麼修正這種問題呢？方法也很簡單，從新覆蓋Person.prototype.constructor便可：

 1         function Person(name) {
 2             this.name = name;
 3         };
 4         Person.prototype = new Object({
 5             getName: function() {
 6                 return this.name;
 7             }
 8         });
 9         Person.prototype.constructor = Person;
10         var p = new Person("ZhangSan");
11         console.log(p.constructor === Person);  // true
12         console.log(Person.prototype.constructor === Person); // true
13         console.log(p.constructor.prototype.constructor === Person); // true
14