Java程式員從笨鳥到菜鳥之（二十九）javascript對象的建立和繼承實現

javascript對象的建立

 

JavaScript中定義對象的幾種方式（JavaScript中沒有類的概念，只有對象）： 

1） 基於已有對象擴充其屬性和方法： 

var object = new Object();object.name = "zhangsan";object.sayName = function(name){this.name = name;alert(this.name);}object.sayName("lisi");

 

2）工廠方式 

//工廠方式建立對象/*function createObject(){var object = new Object();object.username = "zhangsan";object.password = "123";object.get = function(){alert(this.username + ", " + this.password);}return object;}var object1 = createObject();var object2 = createObject();object1.get();

帶參數的構造方法： 

function createObject(username, password){var object = new Object();object.username = username;object.password = password;object.get = function(){alert(this.username + ", " + this.password);}return object;}var object1 = createObject("zhangsan", "123");object1.get();

 

讓一個函數對象被多個對象所共用，而不是每一個對象擁有一個函數對象。 

function get(){alert(this.username + ", " + this.password);}function createObject(username, password){var object = new Object();object.username = username;object.password = password;object.get = get;return object;}var object = createObject("zhangsan", "123");var object2 = createObject("lisi", "456");object.get();object2.get();

 

3）建構函式方式 

function Person(){    //在執行第一行代碼前，js引擎會為我們產生一個對象 this.username = "zhangsan"; this.password = "123"; this.getInfo = function() {  alert(this.username + ", " + this.password); } //此處有一個隱藏的return語句，用於將之前產生的對象返回}var person = new Person();person.getInfo();

 

         可以在構造對象時傳遞參數 

function Person(username, password){this.username = username;this.password = password;this.getInfo = function(){alert(this.username + ", " + this.password);}}var person = new Person("zhangsan", "123");person.getInfo();

 

4）原型（“prototype”）方式 

//使用原型（prototype）方式建立對象/*function Person(){}Person.prototype.username = "zhangsan";Person.prototype.password = "123";Person.prototype.getInfo = function(){alert(this.username + ", " + this.password);}var person = new Person();var person2 = new Person();person.username = "lisi";person.getInfo();person2.getInfo();*/

function Person(){}Person.prototype.username = new Array();Person.prototype.password = "123";Person.prototype.getInfo = function(){alert(this.username + ", " + this.password);}var person = new Person();var person2 = new Person();person.username.push("zhangsan");person.username.push("lisi");person.password = "456";person.getInfo();person2.getInfo();

如果使用原型方式對象，那麼產生的所有對象會共用原型中的屬性，這樣一個對象改變了該屬性也會反應到其他對象當中。

單純使用原型方式定義對象無法在建構函式中為屬性賦初值，只能在對象產生後再去改變屬性值。 

 使用原型+建構函式方式來定義對象，對象之間的屬性互不干擾，各  個對象間共用同一個方法 

//使用原型+建構函式方式來定義對象function Person(){this.username = new Array();this.password = "123";}Person.prototype.getInfo = function(){alert(this.username + ", " + this.password);}var p = new Person();var p2 = new Person();p.username.push("zhangsan");p2.username.push("lisi");p.getInfo();p2.getInfo();

 

5）動態原型方式：在建構函式中通過標誌量讓所有對象共用一個方法，而每個對象擁有自己的屬性。 

function Person(){this.username = "zhangsan";this.password = "123";if(typeof Person.flag == "undefined"){alert("invoked");Person.prototype.getInfo = function(){alert(this.username + ", " + this.password);}Person.flag = true;}}var p = new Person();var p2 = new Person();p.getInfo();p2.getInfo();

 

JavaScript中的繼承。 

1） 對象冒充 

//繼承第一種方式：對象冒充function Parent(username){this.username = username;this.sayHello = function(){alert(this.username);}}function Child(username, password){//下面三行代碼是最關鍵的代碼this.method = Parent;this.method(username);delete this.method;this.password = password;this.sayWorld = function(){alert(this.password);}}var parent = new Parent("zhangsan");var child = new Child("lisi", "1234");parent.sayHello();child.sayHello();child.sayWorld();

2） call方法方式。 

call方法是Function對象中的方法，因此我們定義的每個函數都擁有該方法。可以通過函數名來調用call方法，call方法的第一個參數會被傳遞給函數中的this，從第2個參數開始，逐一賦值給函數中的參數。 

//使用call方式實現對象的繼承
function Parent(username){ this.username = username;
 this.sayHello = function() {  alert(this.username); }}
function Child(username, password){ Parent.call(this, username);
 this.password = password;
 this.sayWorld = function() {  alert(this.password); }}
var parent = new Parent("zhangsan");
var child = new Child("lisi", "123");
parent.sayHello();
child.sayHello();child.sayWorld();
 
 

3） apply方法方式 

//使用apply方法實現對象繼承function Parent(username){this.username = username;this.sayHello = function(){alert(this.username);}}function Child(username, password){Parent.apply(this, new Array(username));this.password = password;this.sayWorld = function(){alert(this.password);}}var parent = new Parent("zhangsan");var child = new Child("lisi", "123");parent.sayHello();child.sayHello();child.sayWorld();

 

4）原型鏈方式（無法給建構函式傳參數） 

//使用原型鏈（prototype chain）方式實現對象繼承function Parent(){}Parent.prototype.hello = "hello";Parent.prototype.sayHello = function(){alert(this.hello);}function Child(){}Child.prototype = new Parent();Child.prototype.world = "world";Child.prototype.sayWorld = function(){alert(this.world);}var child = new Child();child.sayHello();child.sayWorld();

5）混合方式（推薦） 

//使用混合方式實現對象繼承(推薦)function Parent(hello){this.hello = hello;}Parent.prototype.sayHello = function(){alert(this.hello);}function Child(hello, world){Parent.call(this, hello);this.world = world;}Child.prototype = new Parent();Child.prototype.sayWorld = function(){alert(this.world);}var child = new Child("hello", "world");child.sayHello();child.sayWorld();