JavaScript面向對象編程

時間  2019-11-18
標籤 javascript 面向對象 編程 欄目 JavaScript 简体版
原文   原文鏈接

Javascript是一個類C的語言，他的面向對象的東西相對於C++/Java比較奇怪，可是其的確至關的強大，在 Todd 同窗的「對象的消息模型」一文中咱們已經能夠看到一些端倪了。這兩天有個前同事總在問我Javascript面向對象的東西，因此，索性寫篇文章讓他看去吧，這裏這篇文章主要想從一個總體的角度來講明一下Javascript的面向對象的編程。（成文比較倉促，應該有不許確或是有誤的地方，請你們批評指正）javascript

另，這篇文章主要基於 ECMAScript 5， 旨在介紹新技術。關於兼容性的東西，請看最後一節。html

初探

咱們知道Javascript中的變量定義基本以下：java

1
2
3
var name = 'Chen Hao' ;;
var email = 'haoel(@)hotmail.com' ;
var website = 'http://coolshell.cn' ;

若是要用對象來寫的話，就是下面這個樣子：linux

1
2
3
4
5
var chenhao = {
     name : 'Chen Hao' ,
     email : 'haoel(@)hotmail.com' ,
     website : 'http://coolshell.cn'
};

因而，我就能夠這樣訪問：git

1
2
3
4
5
6
7
8
9
//以成員的方式
chenhao.name;
chenhao.email;
chenhao.website;
 
//以hash map的方式
chenhao[ "name" ];
chenhao[ "email" ];
chenhao[ "website" ];

關於函數，咱們知道Javascript的函數是這樣的：github

 

1
2
3
var doSomething = function (){
    alert( 'Hello World.' );
};

因而，咱們能夠這麼幹：web

1
2
3
4
5
6
7
8
9
10
11
var sayHello = function (){
    var hello = "Hello, I'm " + this .name
                 + ", my email is: " + this .email
                 + ", my website is: " + this .website;
    alert(hello);
};
 
//直接賦值，這裏很像C/C++的函數指針
chenhao.Hello = sayHello;
 
chenhao.Hello();

相信這些東西都比較簡單，你們都明白了。 能夠看到javascript對象函數是直接聲明，直接賦值，直接就用了。runtime的動態語言。shell

還有一種比較規範的寫法是：編程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//咱們能夠看到， 其用function來作class。
var Person = function (name, email, website){
     this .name = name;
     this .email = email;
     this .website = website;
 
     this .sayHello = function (){
         var hello = "Hello, I'm " + this .name  + ", \n" +
                     "my email is: " + this .email + ", \n" +
                     "my website is: " + this .website;
         alert(hello);
     };
};
 
var chenhao = new Person( "Chen Hao" , "haoel@hotmail.com" ,
                                      "http://coolshell.cn" );
chenhao.sayHello();

順便說一下，要刪除對象的屬性，很簡單：數組

1
delete chenhao[ 'email' ]

上面的這些例子，咱們能夠看到這樣幾點：

  1. Javascript的數據和成員封裝很簡單。沒有類徹底是對象操做。純動態！
  2. Javascript function中的this指針很關鍵，若是沒有的話，那就是局部變量或局部函數。
  3. Javascript對象成員函數能夠在使用時臨時聲明，並把一個全局函數直接賦過去就行了。
  4. Javascript的成員函數能夠在實例上進行修改，也就是說不一樣實例相同函數名的行爲不必定同樣。

屬性配置 – Object.defineProperty

先看下面的代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//建立對象
var chenhao = Object.create( null );
 
//設置一個屬性
  Object.defineProperty( chenhao,
                 'name' , { value:  'Chen Hao' ,
                           writable:     true ,
                           configurable: true ,
                           enumerable:   true });
 
//設置多個屬性
Object.defineProperties( chenhao,
     {
         'email'  : { value:  'haoel@hotmail.com' ,
                      writable:     true ,
                      configurable: true ,
                      enumerable:   true },
         'website' : { value: 'http://coolshell.cn' ,
                      writable:     true ,
                      configurable: true ,
                      enumerable:   true }
     }
);

下面就說說這些屬性配置是什麼意思。

  • writable：這個屬性的值是否能夠改。
  • configurable：這個屬性的配置是否能夠改。
  • enumerable：這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。
  • value：屬性值。
  • get()/set(_value)：get和set訪問器。

Get/Set 訪問器

關於get/set訪問器，它的意思就是用get/set來取代value（其不能和value一塊兒使用），示例以下：

1
2
3
4
5
6
7
8
9
10
11
var  age = 0;
Object.defineProperty( chenhao,
             'age' , {
                       get: function () { return age+1;},
                       set: function (value) {age = value;}
                       enumerable : true ,
                       configurable : true
                     }
);
chenhao.age = 100; //調用set
alert(chenhao.age); //調用get 輸出101（get中+1了）;

咱們再看一個更爲實用的例子——利用已有的屬性(age)經過get和set構造新的屬性(birth_year)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Object.defineProperty( chenhao,
             'birth_year' ,
             {
                 get: function () {
                     var d = new Date();
                     var y = d.getFullYear();
                     return ( y - this .age );
                 },
                 set: function (year) {
                     var d = new Date();
                     var y = d.getFullYear();
                     this .age = y - year;
                 }
             }
);
 
alert(chenhao.birth_year);
chenhao.birth_year = 2000;
alert(chenhao.age);

這樣作好像有點麻煩，你說，我爲何不寫成下面這個樣子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var chenhao = {
     name: "Chen Hao" ,
     email: "haoel@hotmail.com" ,
     website: "http://coolshell.cn" ,
     age: 100,
     get birth_year() {
         var d = new Date();
         var y = d.getFullYear();
         return ( y - this .age );
     },
     set birth_year(year) {
         var d = new Date();
         var y = d.getFullYear();
         this .age = y - year;
     }
 
};
alert(chenhao.birth_year);
chenhao.birth_year = 2000;
alert(chenhao.age);

是的，你的確能夠這樣的，不過經過defineProperty()你能夠幹這些事：
1）設置如 writable，configurable，enumerable 等這類的屬性配置。
2）動態地爲一個對象加屬性。好比：一些HTML的DOM對像。

查看對象屬性配置

若是查看並管理對象的這些配置，下面有個程序能夠輸出對象的屬性和配置等東西：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//列出對象的屬性.
function listProperties(obj)
{
     var newLine = "<br />" ;
     var names = Object.getOwnPropertyNames(obj);
     for ( var i = 0; i < names.length; i++) {
         var prop = names[i];
         document.write(prop + newLine);
 
         // 列出對象的屬性配置（descriptor）動用getOwnPropertyDescriptor函數。
         var descriptor = Object.getOwnPropertyDescriptor(obj, prop);
         for ( var attr in descriptor) {
             document.write( "..." + attr + ': ' + descriptor[attr]);
             document.write(newLine);
         }
         document.write(newLine);
     }
}
 
listProperties(chenhao);

call，apply， bind 和 this

關於Javascript的this指針，和C++/Java很相似。 咱們來看個示例：（這個示例很簡單了，我就很少說了）

1
2
3
4
5
6
7
8
9
10
11
12
13
function print(text){
     document.write( this .value + ' - ' + text+ '<br>' );
}
 
var a = {value: 10, print : print};
var b = {value: 20, print : print};
 
print( 'hello' ); // this => global, output "undefined - hello"
 
a.print( 'a' ); // this => a, output "10 - a"
b.print( 'b' ); // this => b, output "20 - b"
 
a[ 'print' ]( 'a' ); // this => a, output "10 - a"

咱們再來看看call 和 apply，這兩個函數的差異就是參數的樣子不同，另外一個就是性能不同，apply的性能要差不少。（關於性能，可到 JSPerf 上去跑跑看看）

1
2
3
4
5
print.call(a, 'a' ); // this => a, output "10 - a"
print.call(b, 'b' ); // this => b, output "20 - b"
 
print.apply(a, [ 'a' ]); // this => a, output "10 - a"
print.apply(b, [ 'b' ]); // this => b, output "20 - b"

可是在bind後，this指針，可能會有不同，可是由於Javascript是動態的。以下面的示例

1
2
3
4
var p = print.bind(a);
p( 'a' );             // this => a, output "10 - a"
p.call(b, 'b' );     // this => a, output "10 - b"
p.apply(b, [ 'b' ]);  // this => a, output "10 - b"

繼承 和 重載

經過上面的那些示例，咱們能夠經過Object.create()來實際繼承，請看下面的代碼，Student繼承於Object。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var Person = Object.create( null );
 
Object.defineProperties
(
     Person,
     {
         'name'  : {  value: 'Chen Hao' },
         'email'  : { value : 'haoel@hotmail.com' },
         'website' : { value: 'http://coolshell.cn' }
     }
);
 
Person.sayHello = function () {
     var hello = "<p>Hello, I am " + this .name  + ", <br>" +
                 "my email is: " + this .email + ", <br>" +
                 "my website is: " + this .website;
     document.write(hello + "<br>" );
}
 
var Student = Object.create(Person);
Student.no = "1234567" ; //學號
Student.dept = "Computer Science" ; //系
 
//使用Person的屬性
document.write(Student.name + ' ' + Student.email + ' ' + Student.website + '<br>' );
 
//使用Person的方法
Student.sayHello();
 
//重載SayHello方法
Student.sayHello = function (person) {
     var hello = "<p>Hello, I am " + this .name  + ", <br>" +
                 "my email is: " + this .email + ", <br>" +
                 "my website is: " + this .website + ", <br>" +
                 "my student no is: " + this . no + ", <br>" +
                 "my departent is: " + this . dept;
     document.write(hello + '<br>' );
}
//再次調用
Student.sayHello();
 
//查看Student的屬性（只有 no 、 dept 和 重載了的sayHello）
document.write( '<p>' + Object.keys(Student) + '<br>' );

通用上面這個示例，咱們能夠看到，Person裏的屬性並無被真正複製到了Student中來，可是咱們能夠去存取。這是由於Javascript用委託實現了這一機制。其實，這就是Prototype，Person是Student的Prototype。

當咱們的代碼須要一個屬性的時候，Javascript的引擎會先看當前的這個對象中是否有這個屬性，若是沒有的話，就會查找他的Prototype對象是否有這個屬性，一直繼續下去，直到找到或是直到沒有Prototype對象。

爲了證實這個事，咱們可使用Object.getPrototypeOf()來檢驗一下：

1
2
3
4
5
6
7
Student.name = 'aaa' ;
 
//輸出 aaa
document.write( '<p>' + Student.name + '</p>' );
 
//輸出 Chen Hao
document.write( '<p>' +Object.getPrototypeOf(Student).name + '</p>' );

因而，你還能夠在子對象的函數裏調用父對象的函數，就好像C++裏的 Base::func() 同樣。因而，咱們重載hello的方法就可使用父類的代碼了，以下所示：

1
2
3
4
5
6
7
//新版的重載SayHello方法
Student.sayHello = function (person) {
     Object.getPrototypeOf( this ).sayHello.call( this );
     var hello = "my student no is: " + this . no + ", <br>" +
                 "my departent is: " + this . dept;
     document.write(hello + '<br>' );
}

這個很強大吧。

組合

上面的那個東西還不能知足咱們的要求，咱們可能但願這些對象能真正的組合起來。爲何要組合？由於咱們都知道是這是OO設計的最重要的東西。不過，這對於Javascript來並無支持得特別好，很差咱們依然能夠搞定個事。

首先，咱們須要定義一個Composition的函數：（target是做用因而對象，source是源對象），下面這個代碼仍是很簡單的，就是把source裏的屬性一個一個拿出來而後定義到target中。

1
2
3
4
5
6
7
8
9
10
11
12
13
function Composition(target, source)
{
     var desc  = Object.getOwnPropertyDescriptor;
     var prop  = Object.getOwnPropertyNames;
     var def_prop = Object.defineProperty;
 
     prop(source).forEach(
         function (key) {
             def_prop(target, key, desc(source, key))
         }
     )
     return target;
}

有了這個函數之後，咱們就能夠這來玩了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//藝術家
var Artist = Object.create( null );
Artist.sing = function () {
     return this .name + ' starts singing...' ;
}
Artist.paint = function () {
     return this .name + ' starts painting...' ;
}
 
//運動員
var Sporter = Object.create( null );
Sporter.run = function () {
     return this .name + ' starts running...' ;
}
Sporter.swim = function () {
     return this .name + ' starts swimming...' ;
}
 
Composition(Person, Artist);
document.write(Person.sing() + '<br>' );
document.write(Person.paint() + '<br>' );
 
Composition(Person, Sporter);
document.write(Person.run() + '<br>' );
document.write(Person.swim() + '<br>' );
 
//看看 Person中有什麼？（輸出：sayHello,sing,paint,swim,run）
document.write( '<p>' + Object.keys(Person) + '<br>' );

Prototype 和 繼承

咱們先來講說Prototype。咱們先看下面的例程，這個例程不須要解釋吧，很像C語言裏的函數指針，在C語言裏這樣的東西見得多了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var plus = function (x,y){
     document.write( x + ' + ' + y + ' = ' + (x+y) + '<br>' );
     return x + y;
};
 
var minus = function (x,y){
     document.write(x + ' - ' + y + ' = ' + (x-y) + '<br>' );
     return x - y;
};
 
var operations = {
     '+' : plus,
     '-' : minus
};
 
var calculate = function (x, y, operation){
     return operations[operation](x, y);
};
 
calculate(12, 4, '+' );
calculate(24, 3, '-' );

那麼，咱們能不能把這些東西封裝起來呢，咱們須要使用prototype。看下面的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var Cal = function (x, y){
     this .x = x;
     this .y = y;
}
 
Cal.prototype.operations = {
     '+' : function (x, y) { return x+y;},
     '-' : function (x, y) { return x-y;}
};
 
Cal.prototype.calculate = function (operation){
     return this .operations[operation]( this .x, this .y);
};
 
var c = new Cal(4, 5);
 
c.calculate( '+' );
c.calculate( '-' );

這就是prototype的用法，prototype 是javascript這個語言中最重要的內容。網上有太多的文章介始這個東西了。說白了，prototype就是對一對象進行擴展，其特色在於經過「複製」一個已經存在的實例來返回新的實例,而不是新建實例。被複制的實例就是咱們所稱的「原型」，這個原型是可定製的（固然，這裏沒有真正的複製，實際只是委託）。上面的這個例子中，咱們擴展了實例Cal，讓其有了一個operations的屬性和一個calculate的方法。

這樣，咱們能夠經過這一特性來實現繼承。還記得咱們最最前面的那個Person吧， 下面的示例是建立一個Student來繼承Person。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
function Person(name, email, website){
     this .name = name;
     this .email = email;
     this .website = website;
};
 
Person.prototype.sayHello = function (){
     var hello = "Hello, I am " + this .name  + ", <br>" +
                 "my email is: " + this .email + ", <br>" +
                 "my website is: " + this .website;
     return hello;
};
 
function Student(name, email, website, no, dept){
     var proto = Object.getPrototypeOf;
     proto(Student.prototype).constructor.call( this , name, email, website);
     this .no = no;
     this .dept = dept;
}
 
// 繼承prototype
Student.prototype = Object.create(Person.prototype);
 
//重置構造函數
Student.prototype.constructor = Student;
 
//重載sayHello()
Student.prototype.sayHello = function (){
     var proto = Object.getPrototypeOf;
     var hello = proto(Student.prototype).sayHello.call( this ) + '<br>' ;
     hello += "my student no is: " + this . no + ", <br>" +
              "my departent is: " + this . dept;
     return hello;
};
 
var me = new Student(
     "Chen Hao" ,
     "haoel@hotmail.com" ,
     "http://coolshell.cn" ,
     "12345678" ,
     "Computer Science"
);
document.write(me.sayHello());

兼容性

上面的這些代碼並不必定能在全部的瀏覽器下都能運行，由於上面這些代碼遵循 ECMAScript 5 的規範，關於ECMAScript 5 的瀏覽器兼容列表，你能夠看這裏「ES5瀏覽器兼容表」。

本文中的全部代碼都在Chrome最新版中測試過了。

下面是一些函數，能夠用在不兼容ES5的瀏覽器中：

Object.create()函數
1
2
3
4
5
6
7
8
9
10
function clone(proto) {
     function Dummy() { }
 
     Dummy.prototype             = proto;
     Dummy.prototype.constructor = Dummy;
 
     return new Dummy(); //等價於Object.create(Person);
}
 
var me = clone(Person);
defineProperty()函數
1
2
3
4
5
6
7
8
9
10
function defineProperty(target, key, descriptor) {
     if (descriptor.value){
         target[key] = descriptor.value;
     } else {
         descriptor.get && target.__defineGetter__(key, descriptor.get);
         descriptor.set && target.__defineSetter__(key, descriptor.set);
     }
 
     return target
}
keys()函數
1
2
3
4
5
6
7
8
function keys(object) { var result, key
     result = [];
     for (key in object){
         if (object.hasOwnProperty(key))  result.push(key)
     }
 
     return result;
}
Object.getPrototypeOf() 函數
1
2
3
4
5
function proto(object) {
     return !object?                null
          : '__proto__' in object?  object.__proto__
          : /* not exposed? */      object.constructor.prototype
}
bind 函數
 
1
2
3
4
5
6
7
8
var slice = [].slice
 
function bind(fn, bound_this) { var bound_args
     bound_args = slice.call(arguments, 2)
     return function () { var args
         args = bound_args.concat(slice.call(arguments))
         return fn.apply(bound_this, args) }
}

 

吐槽Javascript

初次接觸Javascript，這門語言的確會讓不少正規軍感到諸多的不適，這種不適來自於Javascript的語法的簡練和不嚴謹，這種不適也來自Javascript這個悲催的名稱，我在想網景公司的Javascript設計者在給他起名稱那天必定是腦袋進水了,讓Javascript這麼多年來受了這麼多不白之冤，人們都認爲他是Java的附屬物，一個WEB玩具語言。所以纔會有些人會對Javascript不屑，認爲Javascript不是一門真正的語言，可是這此他們真的錯了。Javascript不只是一門語言，是一門真真正正的語言，並且他仍是一門裏程碑式的語言，他首創多種新的編程模式原型繼承，閉包（做者注：閉包不是JS獨創，應該Scheme獨創，prototypal inheritance 和 dynamic objects 是self語言獨創，Javascript的獨創並不精彩,謝謝網友的指正。），對後來的動態語言產生了巨大的影響。作爲當今最流行的語言（沒有之一），看看git上提交的最多的語言類型就能明白。隨着HTML5的登場，瀏覽器將在我的電腦上將大顯身手，徹底有替換OS的趨勢的時候，Javascript作爲瀏覽器上的一門惟一真真的語言，如同C之於 unix/linux，java之於JVM，Cobol之於MainFrame，咱們也須要來從新的認真地認識和審視這門語言。另外Javascript的正式名稱是：ECMAScript，這個名字明顯比Javascript帥太多了！

言歸正傳，咱們切入主題——Javascript的面向對象編程。要談Javascript的面向對象編程，咱們第一步要作的事情就是忘記咱們所學的面向對象編程。傳統C++或Java的面向對象思惟來學習Javascript的面向對象會給你帶來很多困惑，讓咱們先忘記咱們所學的，重新開始學習這門特殊的面向對象編程。既然是OO編程，要如何來理解OO編程呢，記得之前學C++，學了好久都不入門，後來有幸讀了《Inside The C++ Object Model》這本大做，頓時豁然開朗，所以本文也將以對象模型的方式來探討的Javascript的OO編程。由於Javascript 對象模型的特殊性，因此使得Javascript的繼承和傳統的繼承很是不同，同時也由於Javascript裏面沒有類，這意味着Javascript裏面沒有extends,implements。那麼Javascript究竟是如何來實現OO編程的呢？好吧，讓咱們開始吧，一塊兒在Javascript的OO世界裏來一次漫遊

首先，咱們須要先看看Javascript如何定義一個對象。下面是咱們的一個對象定義：

1
var o = {};

還能夠這樣定義一個對象

1
2
function f() {
}

對，大家沒有看錯，在Javascript裏面，函數也是對象。
固然還能夠

1
var array1= [ 1,2,3];

數組也是一個對象。
其餘關於對象的基本的概念的描述，仍是請各位親們參見陳皓《Javascript 面向對象編程》文章。
對象都有了，惟一沒有的就是class，由於在Javascript裏面是沒有class關鍵字的，算好還有function，function的存在讓咱們能夠變通的定義類，在擴展這個主題前，咱們還須要瞭解一個Javascript對象最重要的屬性，__proto__成員。

__proto__成員

嚴格的說這個成員不該該叫這個名字，__proto__是Firefox中的稱呼，__proto__只有在Firefox瀏覽器中才能被訪問到。作爲一個對象，當你訪問其中的一個成員或方法的時候，若是這個對象中沒有這個方法或成員，那麼Javascript引擎將會訪問這個對象的__proto__成員所指向的另外的一個對象，並在那個對象中查找指定的方法或成員，若是不能找到，那就會繼續經過那個對象的__proto__成員指向的對象進行遞歸查找，直到這個鏈表結束。
好了，讓咱們舉一個例子。
好比上上面定義的數組對象array1。當咱們建立出array1這個對象的時候，array1實際在Javascript引擎中的對象模型以下：

array1對象具備一個length屬性值爲3，可是咱們能夠經過以下的方法來爲array1增長元素：

1
array1.push(4);

push這個方法來自於array1的__proto__成員指向對象的一個方法(Array.prototye.push())。正是由於全部的數組對象（經過[]來建立的）都包含有一個指向同一個具備push,reverse等方法對象(Array.prototype)的__proto__成員，才使得這些數組對象可使用push,reverse等方法。

那麼這個__proto__這個屬性就至關於面向對象中的」has a」關係，這樣的的話，只要咱們有一個模板對象好比Array.prototype這個對象，而後把其餘的對象__proto__屬性指向這個對象的話就完成了一種繼承的模式。不錯！咱們徹底能夠這麼幹。可是別高興的太早，這個屬性只在FireFox中有效，其餘的瀏覽器雖然也有屬性，可是不能經過__proto__來訪問，只能經過getPrototypeOf方法進行訪問，並且這個屬性是隻讀的。看來咱們要在Javascript實現繼承並非很容易的事情啊。

函數對象prototype成員

首先咱們先來看一段函數prototype成員的定義，

When a function object is created, it is given a prototype member which is an object containing a constructor member which is a reference to the function object
當一個函數對象被建立時，這個函數對象就具備一個prototype成員，這個成員是一個對象，這個對象包含了一個構造子成員，這個構造子成員會指向這個函數對象。

例如：

1
2
3
function Base() {
     this .id = "base"
}

Base這個函數對象就具備一個prototype成員，關於構造子其實Base函數對象自身，爲何咱們將這類函數稱爲構造子呢？緣由是由於這類函數設計來和new 操做符一塊兒使用的。爲了和通常的函數對象有所區別，這類函數的首字母通常都大寫。構造子的主要做用就是來建立一類類似的對象。

上面這段代碼在Javascript引擎的對象模型是這樣的

new 操做符

在有上面的基礎概念的介紹以後，在加上new操做符，咱們就能完成傳統面向對象的class + new的方式建立對象，在Javascript中，咱們將這類方式成爲Pseudoclassical。
基於上面的例子，咱們執行以下代碼

1
var obj = new Base();

這樣代碼的結果是什麼，咱們在Javascript引擎中看到的對象模型是：

new操做符具體幹了什麼呢?其實很簡單，就幹了三件事情。

1
2
3
var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

第一行，咱們建立了一個空對象obj
第二行，咱們將這個空對象的__proto__成員指向了Base函數對象prototype成員對象
第三行，咱們將Base函數對象的this指針替換成obj，而後再調用Base函數，因而咱們就給obj對象賦值了一個id成員變量，這個成員變量的值是」base」，關於call函數的用法，請參看陳皓《Javascript 面向對象編程》文章
若是咱們給Base.prototype的對象添加一些函數會有什麼效果呢？
例如代碼以下：

1
2
3
Base.prototype.toString = function () {
     return this .id;
}

那麼當咱們使用new建立一個新對象的時候，根據__proto__的特性，toString這個方法也能夠作新對象的方法被訪問到。因而咱們看到了：
構造子中，咱們來設置‘類’的成員變量（例如：例子中的id），構造子對象prototype中咱們來設置‘類’的公共方法。因而經過函數對象和Javascript特有的__proto__與prototype成員及new操做符，模擬出類和類實例化的效果。

Pseudoclassical 繼承

咱們模擬類，那麼繼承又該怎麼作呢？其實很簡單，咱們只要將構造子的prototype指向父類便可。例如咱們設計一個Derive 類。以下

1
2
3
4
5
6
7
8
function Derive(id) {
     this .id = id;
}
Derive.prototype = new Base();
Derive.prototype.test = function (id){
     return this .id === id;
}
var newObj = new Derive( "derive" );

這段代碼執行後的對象模型又是怎麼樣的呢？根據以前的推導，應該是以下的對象模型

這樣咱們的newObj也繼承了基類Base的toString方法，而且具備自身的成員id。關於這個對象模型是如何被推導出來的就留給各位同窗了，參照前面的描述，推導這個對象模型應該不難。
Pseudoclassical繼承會讓學過C++/Java的同窗略微的感覺到一點舒服，特別是new關鍵字，看到都特親切，不過二者雖然類似，可是機理徹底不一樣。固然不關什麼樣繼承都是不能離不開__proto__成員的。

Prototypal繼承

這是Javascript的另一種繼承方式，這個繼承也就是以前陳皓文章《Javascript 面向對象編程》中create函數，很是惋惜的是這個是ECMAScript V5的標準，支持V5的瀏覽器目前看來也就是IE9，Chrome最新版本和Firefox。雖然看着多，可是作爲IE6的重災區的中國，我建議各位仍是避免使用create函數。好在沒有create函數以前，Javascript的使用者已經設計出了等同於這個函數的。例如：咱們看看Douglas Crockford的object函數。

1
2
3
4
5
6
function object(old) {
    function F() {};
    F.prototype = old;
    return new F();
}
var newObj = object(oldObject);

例如以下代碼段

1
2
3
4
5
6
7
var base ={
   id: "base" ,
   toString: function (){
           return this .id;
   }
};
var derive = object(base);

上面函數的執行後的對象模型是：

如何造成這樣的對象模型，原理也很簡單，只要把object這個函數擴展一下，就能畫出這個模型，怎麼畫留給讀者本身去畫吧。
這樣的繼承方式被稱爲原型繼承。相對來講要比Pseudoclassical繼承來的簡單方便。ECMAScript V5正是由於這緣由也才增長create函數，讓開發者能夠快速的實現原型繼承。
上述兩種繼承方式是Javascript中最經常使用的繼承方式。經過本文的講解，你應該對Javascript的OO編程有了一些‘原理’級的瞭解了吧

參考:

《Prototypes and Inheritance in JavaScript Prototypes and Inheritance in JavaScript》
Advance Javascript （Douglas Crockford 大神的視頻，必定要看啊）

參考

    • W3CSchool
    • MDN (Mozilla Developer Network)
    • MSDN (Microsoft Software Development Network)
    • Understanding Javascript OOP.
    • http://coolshell.cn/
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程