Javascript學習筆記8 用JSON做原型

來源:互聯網
上載者:User

代碼如下: 複製代碼 代碼如下:<script type="text/javascript">
var People = {
name: "kym",
age: 21,
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
}
alert(People.name);
People.SayHello();
</script>

但是我們是不能重用這個對象的,我們如何把這個對象作為原型的呢?

首先,在一個JSON對象有一個構造方法是不可能的了,那麼我們就做一個簡單的“工廠”吧,寫一個方法來專門負責建立。 複製代碼 代碼如下:<script type="text/javascript">
var People = {
Create: function (name, age) {
this.name = name;
this.age = age;
},
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
}
People.Create("kym", 21);
People.SayHello();
</script>

但是通過這個方法我們卻發現,我們沒有辦法用People作為原型,讓我們回顧一下:Javascript學習筆記7——原型鏈的原理 這篇文章,我們想一下這個過程:

var p=new People();==>p.__proto__=People.prototype。於是當我們p.SayHello()的時候就會去People.prototype中去找,結果什麼都找不到。

如果可以People.prototype.SayHello=function(){}就可以解決這個問題。但是我們知道,只有function才可以有prototype。

那麼我們想想之前的推導公式,怎麼樣能讓p.SayHello()呢?如果可以p.__proto__=People就好了。那麼我們想個辦法:

既然在new的時候,某個對象的__proto__只能等於某個函數的prototype,我們設定一個函數X,令p.__proto__=X.prototype,我們再令X.prototype=People。這樣的關係是這樣: 複製代碼 代碼如下:<script type="text/javascript">
var People = {
Create: function (name, age) {
this.name = name;
this.age = age;
},
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
};

var X = function () { };
X.prototype = People;
var p = new X();
p.Create("kym", 21);
p.SayHello();
</script>

這樣就相當於用X做了一個中間變數,使得我們可以訪問JSON對象的內部屬性。但是這樣是不是不太優雅呢?我們每次建立一個對象時,都需要來寫這樣一個輔助的函數。那好,我們就把這個過程封裝起來: 複製代碼 代碼如下:var Factory = {
CreatePeople : function (className,name,age) {
var temp = function () {
className.Create(name, age);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
var people = Factory.CreatePeople(People,"kym",21);
people.SayHello();

但是這樣也有一個缺點,就是每次我增加一個類,就需要向Factory裡註冊一個新方法,這樣是很麻煩的,我在很久以前的 玩轉方法:call和apply 中說過關於call和apply的區別,因為這裡的參數不固定,我們不可能一一列舉,因此我們在這裡可以用apply來改善這個方法: 複製代碼 代碼如下:<script type="text/javascript">
var People = {
Create: function (name, age) {
this.name = name;
this.age = age;
},
SayHello: function () {
alert("Hello,My name is " + this.name + ".I am " + this.age);
}
};

var Factory = {
Create: function (className, params) {
var temp = function () {
className.Create.apply(this, params);
};
temp.prototype = className;
var result = new temp();
return result;
}
};
var people = Factory.Create(People,["kym",21]);
people.SayHello();
</script>

這樣,一個完整的建立類就誕生了!那麼我們每次建立“類”時就都可以用JSON來做了,然後使用者每次都統一來調用Factory.Create()就可以了!

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.