1、工廠方式
<script type="text/javascript">
function createObject(name){
var p = new Object();
p.name=name;
p.say = function(){alert(p.name+'ff');}
return p;
}
var p1 = createObject("p1");
var p2 = createObject("p2");
alert(p1.name+" "+p2.name);
p1.say();p2.say();
alert(p1.say==p2.say); //false
</script>
問題:每創建一個對象,對象的方法是新對象,浪費資源
2、構造函數方式
<script type="text/javascript">
function Person(name){
this.name = name;
this.say = function(){
alert("I am "+this.name);
}
}
var p1 = new Person("wang");
var p2 = new Person("li");
p1.say();
p2.say();
alert(p1.say==p2.say); //false
</script>
問題:
創建對象時比工廠方法更易於理解。
和工廠方法一樣,每個對象都有自己的方法,浪費資源。
3、原型方式
function Person(){}
Person.prototype.name = "";
Person.prototype.say = function(){
alert("I am "+this.name);
}
var p1 = new Person();
var p2 = new Person();
alert(p1.say == p2.say);//true
問題:無法在構造方法中傳遞參數,所有對象共享屬性。
優點:對象共方法,節約資源。
4、構造方法+原型方式
function Person(name){
this.name = name;
}
Person.prototype.say = function(){
alert("I am "+this.name);
}
var p1 = new Person("wang");
var p2 = new Person("li");
p1.say();
p2.say();
alert(p1.say==p2.say); //true
優點:解決了前面提到的問題。
問題:封裝不夠完美。
5、動態原形方式
function Person(name){
this.name = name;
if(Person.prototype.say == undefined){
Person.prototype.say = function(){
alert("I am "+this.name);
}
}
}
var p1 = new Person("wang");
var p2 = new Person("li");
p1.say();
p2.say();
alert(p1.say==p2.say); //true
結論:一種完美的解決方案。
6、對象的創建 - JSON
var person = {};
var girl = {
name:“miss wang”,
age:20,
show = function(){
alert("my name is " + this.name);
}
}
繼承的實現方式
1、 對象冒充
function People(name){
this.name = name;
this.say = function(){
alert("I am "+this.name);
}
}
function WhitePeople(name){
this.inherit = People;
this.inherit(name);
delete this.inherit;
this.color = function(){
alert("I am white people.");
}
}
var p = new WhitePeople("wang");
p.say();
p.color();
alert(p instanceof People); //false
結論:支持多重繼承,但後面的類可以覆蓋前面類的屬性和方法。繼承後的對象類型和父類對象不匹配
2、利用call()和apply()冒充
function People(name,age){
this.name = name;
this.age = age;
this.say = function(){
alert("I am "+this.name+" "+this.age);
}
}
function WhitePeople(name,age){
//People.call(this,name,age);//call方式以多個參數進行傳值
People.apply(this,[name,age]);//apply方式以數組方式進行傳值
this.color = function(){
alert("I am white people.");
}
}
var p = new WhitePeople("wang",34);
p.say();
p.color();
alert(p instanceof People);
3、原型鏈繼承
//父類
function People(name){
this.name = name;
}
People.prototype.say = function(){
alert("I am "+this.name);
}
//子類
function ChinaPeople(name,area){
People.call(this,name);
this.area = area;
}
ChinaPeople.prototype = new People();
ChinaPeople.prototype.from = function(){
alert("I'am from "+this.area);
}
var p = new ChinaPeople("wang","si chuan");
p.say();
p.from();
alert(p instanceof People); //true
結論:不支持多重繼承,繼承後的對象類型和父類對象匹配
js自定義類和對象(一)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
C# 調用API接口處理公共類 自帶JSON實體互轉類
笑面虎WJ
2018-08-27 19:54:17
運用JS設置cookie、讀取cookie、刪除cookie
笑面虎WJ
2018-08-27 19:54:00
Asp.Net alert彈出提示信息的5種方法
笑面虎WJ
2018-08-27 19:54:00
用canvas做視頻截圖遇到的坑(已填坑)
史上最强的弟子
2018-08-27 19:52:32
Javascript創建對象的幾種方式
码不码代码
2018-08-27 19:19:11
JS控制iframe報沒有權限解決方法
womoney7
2018-08-27 19:15:43
關於百度座標軸轉換的問題。
忽晴忽雨的江湖
2018-08-27 19:10:40
關於微信支付chooseWXPay
忽晴忽雨的江湖
2018-08-27 19:10:28
關於百度地圖覆蓋物重疊的問題
忽晴忽雨的江湖
2018-08-27 19:10:27
關於IIS下字體跨域問題
忽晴忽雨的江湖
2018-08-27 19:10:18
PHP+linux+Phantomjs實現截取FineBI需要登陸的網頁圖片
cailongbiaoyuli
2018-08-27 18:49:39