生活随笔
收集整理的這篇文章主要介紹了
Java程序员从笨鸟到菜鸟之（二十九）javascript对象的创建和继承实现
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
JavaScript對象的創(chuàng)建
?
JavaScript中定義對象的幾種方式（JavaScript中沒有類的概念，只有對象）：?
1）?基于已有對象擴充其屬性和方法：?
[html]?view plaincopy print?
var?object?=?new?Object();?? ?? object.name?=?"zhangsan";?? object.sayName?=?function(name)?? {?? ????this.name?=?name;?? ????alert(this.name);?? }?? ?? object.sayName("lisi");??
?
2）工廠方式?
[html]?view plaincopy print?
//工廠方式創(chuàng)建對象?? ?? /*?? 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();??
帶參數(shù)的構(gòu)造方法：?
[html]?view plaincopy print?
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();??
?
讓一個函數(shù)對象被多個對象所共享，而不是每一個對象擁有一個函數(shù)對象。?
[html]?view plaincopy print?
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）構(gòu)造函數(shù)方式?
[html]?view plaincopy print?
function?Person()?? {?? ????//在執(zhí)行第一行代碼前，js引擎會為我們生成一個對象?? ?this.username?=?"zhangsan";?? ?this.password?=?"123";?? ?? ?this.getInfo?=?function()?? ?{?? ??alert(this.username?+?",?"?+?this.password);?? ?}?? ?? ?//此處有一個隱藏的return語句，用于將之前生成的對象返回?? }?? ?? var?person?=?new?Person();?? person.getInfo();??
?
?????????可以在構(gòu)造對象時傳遞參數(shù)?
[html]?view plaincopy print?
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”）方式?
[html]?view plaincopy print?
//使用原型（prototype）方式創(chuàng)建對象?? ?? /*?? 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();?? */??
[html]?view plaincopy print?
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();??
如果使用原型方式對象，那么生成的所有對象會共享原型中的屬性，這樣一個對象改變了該屬性也會反應到其他對象當中。
單純使用原型方式定義對象無法在構(gòu)造函數(shù)中為屬性賦初值，只能在對象生成后再去改變屬性值。?
?使用原型+構(gòu)造函數(shù)方式來定義對象，對象之間的屬性互不干擾，各??個對象間共享同一個方法?
[html]?view plaincopy print?
//使用原型+構(gòu)造函數(shù)方式來定義對象?? ?? 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）動態(tài)原型方式：在構(gòu)造函數(shù)中通過標志量讓所有對象共享一個方法，而每個對象擁有自己的屬性。?
[html]?view plaincopy print?
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）?對象冒充?
[html]?view plaincopy print?
//繼承第一種方式：對象冒充?? ?? 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對象中的方法，因此我們定義的每個函數(shù)都擁有該方法。可以通過函數(shù)名來調(diào)用call方法，call方法的第一個參數(shù)會被傳遞給函數(shù)中的this，從第2個參數(shù)開始，逐一賦值給函數(shù)中的參數(shù)。?
[html]?view plaincopy print?
<p>//使用call方式實現(xiàn)對象的繼承</p><p>function?Parent(username)?? {?? ?this.username?=?username;</p><p>?this.sayHello?=?function()?? ?{?? ??alert(this.username);?? ?}?? }</p><p>function?Child(username,?password)?? {?? ?Parent.call(this,?username);</p><p>?this.password?=?password;</p><p>?this.sayWorld?=?function()?? ?{?? ??alert(this.password);?? ?}?? }</p><p>var?parent?=?new?Parent("zhangsan");</p><p>var?child?=?new?Child("lisi",?"123");</p><p>parent.sayHello();</p><p>child.sayHello();?? child.sayWorld();</p><p>?? ?</p><span?style="font-size:18px;"><span?style="color:#000000;">?</span></span>??
3）?apply方法方式?
[html]?view plaincopy print?
//使用apply方法實現(xiàn)對象繼承?? ?? 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）原型鏈方式（無法給構(gòu)造函數(shù)傳參數(shù)）?
[html]?view plaincopy print?
//使用原型鏈（prototype?chain）方式實現(xiàn)對象繼承?? ?? 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）混合方式（推薦）?
[html]?view plaincopy print?
//使用混合方式實現(xiàn)對象繼承(推薦)?? ?? 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(); ?
from:?http://blog.csdn.net/csh624366188/article/details/7449000
總結(jié)
以上是生活随笔為你收集整理的Java程序员从笨鸟到菜鸟之（二十九）javascript对象的创建和继承实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
