javascript
JS 面向对象与原型
創(chuàng)建對象
創(chuàng)建一個對象，然后給這個對象新建屬性和方法。
var box = new Object(); //創(chuàng)建一個 Object 對象
box.name = 'Lee'; //創(chuàng)建一個 name 屬性并賦值
box.age = 100; //創(chuàng)建一個 age 屬性并賦值
box.run = function () { //創(chuàng)建一個 run()方法并返回值
return this.name + this.age + '運行中...';
};
alert(box.run()); //輸出屬性和方法的值
上面創(chuàng)建了一個對象，并且創(chuàng)建屬性和方法，在 run()方法里的 this，就是代表 box 對象
本身。這種是 JavaScript 創(chuàng)建對象最基本的方法，但有個缺點，想創(chuàng)建一個類似的對象，就
會產(chǎn)生大量的代碼。
var box2 = box; //得到 box 的引用
box2.name = 'Jack'; //直接改變了 name 屬性
alert(box2.run()); //用 box.run()發(fā)現(xiàn) name 也改變了
var box2 = new Object();
box2.name = 'Jack';
box2.age = 200;
box2.run = function () {
return this.name + this.age + '運行中...';
};
alert(box2.run()); //這樣才避免和 box 混淆，從而保持獨立
為了解決多個類似對象聲明的問題，我們可以使用一種叫做工廠模式的方法，這種方法
就是為了解決實例化對象產(chǎn)生大量重復(fù)的問題。
function createObject(name, age) { //集中實例化的函數(shù)
var obj = new Object();
obj.name = name;
obj.age = age;
obj.run = function () {
return this.name + this.age + '運行中...';
};
return obj;
}
var box1 = createObject('Lee', 100); //第一個實例
var box2 = createObject('Jack', 200); //第二個實例
alert(box1.run());
alert(box2.run()); //保持獨立
工廠模式解決了重復(fù)實例化的問題，但還有一個問題，那就是識別問題，因為根本無法
搞清楚他們到底是哪個對象的實例。
alert(typeof box1); //Object
alert(box1 instanceof Object); //true
ECMAScript 中可以采用構(gòu)造函數(shù)(構(gòu)造方法)可用來創(chuàng)建特定的對象。類型于 Object 對
象。
function Box(name, age) { //構(gòu)造函數(shù)模式
this.name = name;
this.age = age;
this.run = function () {
return this.name + this.age + '運行中...';
};
}
var box1 = new Box('Lee', 100); //new Box()即可
var box2 = new Box('Jack', 200);
alert(box1.run());
alert(box1 instanceof Box); //很清晰的識別他從屬于 Box
使用構(gòu)造函數(shù)的方法，即解決了重復(fù)實例化的問題，又解決了對象識別的問題，但問題
是，這里并沒有 new Object()，為什么可以實例化 Box()，這個是哪里來的呢？
使用了構(gòu)造函數(shù)的方法，和使用工廠模式的方法他們不同之處如下：
1.構(gòu)造函數(shù)方法沒有顯示的創(chuàng)建對象(new Object())；
2.直接將屬性和方法賦值給 this 對象；
3.沒有 renturn 語句。
構(gòu)造函數(shù)的方法有一些規(guī)范：
1.函數(shù)名和實例化構(gòu)造名相同且大寫，(PS：非強制，但這么寫有助于區(qū)分構(gòu)造函數(shù)和
普通函數(shù))；
2.通過構(gòu)造函數(shù)創(chuàng)建對象，必須使用 new 運算符。
既然通過構(gòu)造函數(shù)可以創(chuàng)建對象，那么這個對象是哪里來的，new Object()在什么地方
執(zhí)行了？執(zhí)行的過程如下：
1.當(dāng)使用了構(gòu)造函數(shù)，并且 new 構(gòu)造函數(shù)()，那么就后臺執(zhí)行了 new Object()；
2.將構(gòu)造函數(shù)的作用域給新對象，(即 new Object()創(chuàng)建出的對象)，而函數(shù)體內(nèi)的 this 就
代表 new Object()出來的對象。
3.執(zhí)行構(gòu)造函數(shù)內(nèi)的代碼；
4.返回新對象(后臺直接返回)。
關(guān)于 this 的使用，this 其實就是代表當(dāng)前作用域?qū)ο蟮囊谩Ｈ绻谌址秶?this 就代
表 window 對象，如果在構(gòu)造函數(shù)體內(nèi)，就代表當(dāng)前的構(gòu)造函數(shù)所聲明的對象。
var box = 2;
alert(this.box); //全局，代表 window
構(gòu)造函數(shù)和普通函數(shù)的唯一區(qū)別，就是他們調(diào)用的方式不同。只不過，構(gòu)造函數(shù)也是函
數(shù)，必須用 new 運算符來調(diào)用，否則就是普通函數(shù)。
var box = new Box('Lee', 100); //構(gòu)造模式調(diào)用
alert(box.run());
Box('Lee', 20); //普通模式調(diào)用，無效
var o = new Object();
Box.call(o, 'Jack', 200) //對象冒充調(diào)用
alert(o.run());
探討構(gòu)造函數(shù)內(nèi)部的方法(或函數(shù))的問題，首先看下兩個實例化后的屬性或方法是否相
等。
var box1 = new Box('Lee', 100); //傳遞一致
var box2 = new Box('Lee', 100); //同上
alert(box1.name == box2.name); //true，屬性的值相等
alert(box1.run == box2.run); //false，方法其實也是一種引用地址
alert(box1.run() == box2.run()); //true，方法的值相等，因為傳參一致
可以把構(gòu)造函數(shù)里的方法(或函數(shù))用 new Function()方法來代替，得到一樣的效果，更加
證明，他們最終判斷的是引用地址，唯一性。
function Box(name, age) { //new Function()唯一性
this.name = name;
this.age = age;
this.run = new Function("return this.name + this.age + '運行中...'");
}
我們可以通過構(gòu)造函數(shù)外面綁定同一個函數(shù)的方法來保證引用地址的一致性，但這種做
法沒什么必要，只是加深學(xué)習(xí)了解：
function Box(name, age) {
this.name = name;
this.age = age;
this.run = run;
}
function run() { //通過外面調(diào)用，保證引用地址一致
return this.name + this.age + '運行中...';
}
雖然使用了全局的函數(shù) run()來解決了保證引用地址一致的問題，但這種方式又帶來了
一個新的問題，全局中的 this 在對象調(diào)用的時候是 Box 本身，而當(dāng)作普通函數(shù)調(diào)用的時候，
this 又代表 window。
原型
我們創(chuàng)建的每個函數(shù)都有一個 prototype(原型)屬性，這個屬性是一個對象，它的用途是
包含可以由特定類型的所有實例共享的屬性和方法。邏輯上可以這么理解：prototype 通過
調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個對象的原型對象。使用原型的好處可以讓所有對象實例共享它所
包含的屬性和方法。也就是說，不必在構(gòu)造函數(shù)中定義對象信息，而是可以直接將這些信息
添加到原型中。
function Box() {} //聲明一個構(gòu)造函數(shù)
Box.prototype.name = 'Lee'; //在原型里添加屬性
Box.prototype.age = 100;
Box.prototype.run = function () { //在原型里添加方法
return this.name + this.age + '運行中...';
};
比較一下原型內(nèi)的方法地址是否一致：
var box1 = new Box();
var box2 = new Box();
alert(box1.run == box2.run); //true，方法的引用地址保持一致
我們可以通過 hasOwnProperty()方法檢測屬性是否存在實例中，也可以通過 in 來判斷
實例或原型中是否存在屬性。那么結(jié)合這兩種方法，可以判斷原型中是否存在屬性。
function isProperty(object, property) { //判斷原型中是否存在屬性
return !object.hasOwnProperty(property) && (property in object);
}
var box = new Box();
alert(isProperty(box, 'name')) //true，如果原型有
為了讓屬性和方法更好的體現(xiàn)封裝的效果，并且減少不必要的輸入，原型的創(chuàng)建可以使
用字面量的方式：
function Box() {};
Box.prototype = { //使用字面量的方式
name : 'Lee', age : 100, run : function () {
return this.name + this.age + '運行中...';
}
};
使用構(gòu)造函數(shù)創(chuàng)建原型對象和使用字面量創(chuàng)建對象在使用上基本相同，但還是有一些區(qū)
別，字面量創(chuàng)建的方式使用 constructor 屬性不會指向?qū)嵗?#xff0c;而會指向 Object，構(gòu)造函數(shù)創(chuàng)建
的方式則相反。
var box = new Box();
alert(box instanceof Box);
alert(box instanceof Object);
alert(box.constructor == Box); //字面量方式，返回 false，否則，true
alert(box.constructor == Object); //字面量方式，返回 true，否則，false
如果想讓字面量方式的 constructor 指向?qū)嵗龑ο?#xff0c;那么可以這么做：
Box.prototype = {
constructor : Box, //直接強制指向即可
};
PS：字面量方式為什么 constructor 會指向 Object？因為 Box.prototype={};這種寫法其實
就是創(chuàng)建了一個新對象。而每創(chuàng)建一個函數(shù)，就會同時創(chuàng)建它 prototype，這個對象也會自
動獲取 constructor 屬性。所以，新對象的 constructor 重寫了 Box 原來的 constructor，因此會
指向新對象，那個新對象沒有指定構(gòu)造函數(shù)，那么就默認(rèn)為 Object。
原型的聲明是有先后順序的，所以，重寫的原型會切斷之前的原型。
function Box() {};
Box.prototype = { //原型被重寫了
constructor : Box, name : 'Lee', age : 100, run : function () {
return this.name + this.age + '運行中...';
}
};
Box.prototype = {
age = 200
};
var box = new Box(); //在這里聲明
alert(box.run()); //box 只是最初聲明的原型
原型對象不僅僅可以在自定義對象的情況下使用，而 ECMAScript 內(nèi)置的引用類型都可
以使用這種方式，并且內(nèi)置的引用類型本身也使用了原型。
alert(Array.prototype.sort); //sort 就是 Array 類型的原型方法
alert(String.prototype.substring); //substring 就是 String 類型的原型方法
String.prototype.addstring = function () { //給 String 類型添加一個方法
return this + '，被添加了！'; //this 代表調(diào)用的字符串
};
alert('Lee'.addstring()); //使用這個方法
PS：盡管給原生的內(nèi)置引用類型添加方法使用起來特別方便，但我們不推薦使用這種
方法。因為它可能會導(dǎo)致命名沖突，不利于代碼維護。
原型模式創(chuàng)建對象也有自己的缺點，它省略了構(gòu)造函數(shù)傳參初始化這一過程，帶來的缺
點就是初始化的值都是一致的。而原型最大的缺點就是它最大的優(yōu)點，那就是共享。
原型中所有屬性是被很多實例共享的，共享對于函數(shù)非常合適，對于包含基本值的屬性
也還可以。但如果屬性包含引用類型，就存在一定的問題：
function Box() {};
Box.prototype = {
constructor : Box, name : 'Lee', age : 100, family : ['父親', '母親', '妹妹'], //添加了一個數(shù)組屬性
run : function () {
return this.name + this.age + this.family;
}
};
var box1 = new Box();
box1.family.push('哥哥'); //在實例中添加'哥哥' alert(box1.run());
var box2 = new Box();
alert(box2.run()); //共享帶來的麻煩，也有'哥哥'了
PS：數(shù)據(jù)共享的緣故，導(dǎo)致很多開發(fā)者放棄使用原型，因為每次實例化出的數(shù)據(jù)需要
保留自己的特性，而不能共享。
為了解決構(gòu)造傳參和共享問題，可以組合構(gòu)造函數(shù)+原型模式：
function Box(name, age) { //不共享的使用構(gòu)造函數(shù)
this.name = name;
this.age = age;
this. family = ['父親', '母親', '妹妹'];
};
Box.prototype = { //共享的使用原型模式
constructor : Box, run : function () {
return this.name + this.age + this.family;
}
};
PS：這種混合模式很好的解決了傳參和引用共享的大難題。是創(chuàng)建對象比較好的方法。
原型模式，不管你是否調(diào)用了原型中的共享方法，它都會初始化原型中的方法，并且在
聲明一個對象時，構(gòu)造函數(shù)+原型部分讓人感覺又很怪異，最好就是把構(gòu)造函數(shù)和原型封裝
到一起。為了解決這個問題，我們可以使用動態(tài)原型模式。
function Box(name ,age) { //將所有信息封裝到函數(shù)體內(nèi)
this.name = name;
this.age = age;
if (typeof this.run != 'function') { //僅在第一次調(diào)用的初始化
Box.prototype.run = function () {
return this.name + this.age + '運行中...';
};
}
}
var box = new Box('Lee', 100);
alert(box.run());
當(dāng)?shù)谝淮握{(diào)用構(gòu)造函數(shù)時，run()方法發(fā)現(xiàn)不存在，然后初始化原型。當(dāng)?shù)诙握{(diào)用，就
不會初始化，并且第二次創(chuàng)建新對象，原型也不會再初始化了。這樣及得到了封裝，又實現(xiàn)
了原型方法共享，并且屬性都保持獨立。
if (typeof this.run != 'function') {
alert('第一次初始化'); //測試用
Box.prototype.run = function () {
return this.name + this.age + '運行中...';
};
}
var box = new Box('Lee', 100); //第一次創(chuàng)建對象
alert(box.run()); //第一次調(diào)用
alert(box.run()); //第二次調(diào)用
var box2 = new Box('Jack', 200); //第二次創(chuàng)建對象
alert(box2.run());
alert(box2.run());
PS：使用動態(tài)原型模式，要注意一點，不可以再使用字面量的方式重寫原型，因為會
切斷實例和新原型之間的聯(lián)系。
以上講解了各種方式對象創(chuàng)建的方法，如果這幾種方式都不能滿足需求，可以使用一開
始那種模式：寄生構(gòu)造函數(shù)。
function Box(name, age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.run = function () {
return this.name + this.age + '運行中...';
};
return obj;
}
寄生構(gòu)造函數(shù)，其實就是工廠模式+構(gòu)造函數(shù)模式。這種模式比較通用，但不能確定對
象關(guān)系，所以，在可以使用之前所說的模式時，不建議使用此模式。
在什么情況下使用寄生構(gòu)造函數(shù)比較合適呢？假設(shè)要創(chuàng)建一個具有額外方法的引用類
型。由于之前說明不建議直接 String.prototype.addstring，可以通過寄生構(gòu)造的方式添加。
function myString(string) {
var str = new String(string);
str.addstring = function () {
return this + '，被添加了！';
};
return str;
}
var box = new myString('Lee'); //比直接在引用原型添加要繁瑣好多
alert(box.addstring());
在一些安全的環(huán)境中，比如禁止使用 this 和 new，這里的 this 是構(gòu)造函數(shù)里不使用 this，
這里的 new 是在外部實例化構(gòu)造函數(shù)時不使用 new。這種創(chuàng)建方式叫做穩(wěn)妥構(gòu)造函數(shù)。
function Box(name , age) {
var obj = new Object();
obj.run = function () {
return name + age + '運行中...'; //直接打印參數(shù)即可
};
return obj;
}
var box = Box('Lee', 100); //直接調(diào)用函數(shù)
alert(box.run());
PS：穩(wěn)妥構(gòu)造函數(shù)和寄生類似。
繼承
繼承是面向?qū)ο笾幸粋€比較核心的概念。其他正統(tǒng)面向?qū)ο笳Z言都會用兩種方式實現(xiàn)繼
承：一個是接口實現(xiàn)，一個是繼承。而 ECMAScript 只支持繼承，不支持接口實現(xiàn)，而實現(xiàn)
繼承的方式依靠原型鏈完成。
function Box() { //Box 構(gòu)造
this.name = 'Lee';
}
function Desk() { //Desk 構(gòu)造
this.age = 100;
}
Desk.prototype = new Box(); //Desc 繼承了 Box，通過原型，形成鏈條
var desk = new Desk();
alert(desk.age);
alert(desk.name); //得到被繼承的屬性
function Table() { //Table 構(gòu)造
this.level = 'AAAAA';
}
Table.prototype = new Desk(); //繼續(xù)原型鏈繼承
var table = new Table();
alert(table.name); //繼承了 Box 和 Desk
在 JavaScript 里，被繼承的函數(shù)稱為超類型(父類，基類也行，其他語言叫法)，繼承的
函數(shù)稱為子類型(子類，派生類)。繼承也有之前問題，比如字面量重寫原型會中斷關(guān)系，使
用引用類型的原型，并且子類型還無法給超類型傳遞參數(shù)。
為了解決引用共享和超類型無法傳參的問題，我們采用一種叫借用構(gòu)造函數(shù)的技術(shù)，或
者成為對象冒充(偽造對象、經(jīng)典繼承)的技術(shù)來解決這兩種問題
function Box(age) {
this.name = ['Lee', 'Jack', 'Hello']
this.age = age;
}
function Desk(age) {
Box.call(this, age); //對象冒充，給超類型傳參
}
var desk = new Desk(200);
alert(desk.age);
alert(desk.name);
desk.name.push('AAA'); //添加的新數(shù)據(jù)，只給 desk
alert(desk.name);
借用構(gòu)造函數(shù)雖然解決了剛才兩種問題，但沒有原型，復(fù)用則無從談起。所以，我們需
要原型鏈+借用構(gòu)造函數(shù)的模式，這種模式成為組合繼承。
function Box(age) {
this.name = ['Lee', 'Jack', 'Hello']
this.age = age;
}
Box.prototype.run = function () {
return this.name + this.age;
};
function Desk(age) {
Box.call(this, age); //對象冒充
}
Desk.prototype = new Box(); //原型鏈繼承
var desk = new Desk(100);
alert(desk.run());
還有一種繼承模式叫做：原型式繼承；這種繼承借助原型并基于已有的對象創(chuàng)建新對象，
同時還不必因此創(chuàng)建自定義類型。
function obj(o) { //傳遞一個字面量函數(shù)
function F() {} //創(chuàng)建一個構(gòu)造函數(shù)
F.prototype = o; //把字面量函數(shù)賦值給構(gòu)造函數(shù)的原型
return new F(); //最終返回出實例化的構(gòu)造函數(shù)
}
var box = { //字面量對象
name : 'Lee', arr : ['哥哥','妹妹','姐姐']
};
var box1 = obj(box); //傳遞
alert(box1.name);
box1.name = 'Jack';
alert(box1.name);
alert(box1.arr);
box1.arr.push('父母');
alert(box1.arr);
var box2 = obj(box); //傳遞
alert(box2.name);
alert(box2.arr); //引用類型共享了
寄生式繼承把原型式+工廠模式結(jié)合而來，目的是為了封裝創(chuàng)建對象的過程。
function create(o) { //封裝創(chuàng)建過程
var f= obj(o);
f.run = function () {
return this.arr; //同樣，會共享引用
};
return f;
}
組合式繼承是 JavaScript 最常用的繼承模式；但，組合式繼承也有一點小問題，就是超
類型在使用過程中會被調(diào)用兩次：一次是創(chuàng)建子類型的時候，另一次是在子類型構(gòu)造函數(shù)的
內(nèi)部。
function Box(name) {
this.name = name;
this.arr = ['哥哥','妹妹','父母'];
}
Box.prototype.run = function () {
return this.name;
};
function Desk(name, age) {
Box.call(this, name); //第二次調(diào)用 Box
this.age = age;
}
Desk.prototype = new Box(); //第一次調(diào)用 Box
以上代碼是之前的組合繼承，那么寄生組合繼承，解決了兩次調(diào)用的問題。
function obj(o) {
function F() {}
F.prototype = o;
return new F();
}
function create(box, desk) {
var f = obj(box.prototype);
f.constructor = desk;
desk.prototype = f;
}
function Box(name) {
this.name = name;
this.arr = ['哥哥','妹妹','父母'];
}
Box.prototype.run = function () {
return this.name;
};
function Desk(name, age) {
Box.call(this, name);
this.age = age;
}
inPrototype(Box, Desk); //通過這里實現(xiàn)繼承
var desk = new Desk('Lee',100);
desk.arr.push('姐姐');
alert(desk.arr);
alert(desk.run()); //只共享了方法
var desk2 = new Desk('Jack', 200);
alert(desk2.arr); //引用問題解決
轉(zhuǎn)載于:https://blog.51cto.com/8818968/1981103
總結(jié)
以上是生活随笔為你收集整理的JS 面向对象与原型的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 管理信息系统的开发和管理
- 下一篇： SVN仓库迁移