JS原型與面向對象總結


ECMAScript有兩種開發模式:1.函數式(過程化)2.面向對象(OOP)。面向對象的語言有一個標志,那就是類的概念,而通過類可以創建任意多個具有相同屬性和方法的對象。但

是,ECMAScript沒有類的概念,因此它的對象也與基於類的語言中的對象有所不同。

創建對象

創建一個對象,然后給這個對象新建屬性和方法。

var box = new Object();   //創建一個 Object對象

box.name = 'Lee';//創建一個 name屬性並賦值

box.age = 100;//創建一個 age屬性並賦值

box.run = function () {//創建一個 run()方法並返回值

return this.name + this.age + '運行中...';

};

alert(box.run());//輸出屬性和方法的值

上面創建了一個對象,並且創建屬性和方法,在 run()方法里的 this,就是代表 box對象

本身。這種是 JavaScript創建對象最基本的方法,但有個缺點,想創建一個類似的對象,就

會產生大量的代碼。

var box2 = box;

//得到 box的引用

box2.name = 'Jack';

//直接改變了 name屬性

alert(box2.run())

// box.run()發現 name也改變了

var box2 = new Object();

box2.name = 'Jack';

box2.age = 200;

box2.run = function () {

return this.name + this.age + '運行中...';

};

alert(box2.run());

//這樣才避免和 box混淆,從而保持獨立

為了解決多個類似對象聲明的問題,我們可以使用一種叫做工廠模式的方法,這種方法

就是為了解決實例化對象產生大量重復的問題。

function createObject(name, age) { //集中實例化的函數

  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());   //Lee100運行中...

alert(box2.run());   //Jack200運行中...

//保持獨立

工廠模式解決了重復實例化的問題,但還有一個問題,那就是識別問題,因為根本無法

搞清楚他們到底是哪個對象的實例。

alert(typeof box1);           //Object

alert(box1 instanceof Object);//true

ECMAScript中可以采用構造函數(構造方法)可用來創建特定的對象。類型於  Object

象。

function Box(name, age) {//構造函數模式

this.name = name;

this.age = age;

  this.run = function () {

  return this.name + this.age + '運行中...';

  };

}

var box1 = new Box('Lee', 100);

var box2 = new Box('Jack',200);

alert(box1.run());
alert(box1 instanceof Box); //很清晰的識別他從屬於 Box

使用構造函數的方法,即解決了重復實例化的問題,又解決了對象識別的問題,但問題是,這里並沒有 new Object(),為什么可以實例化 Box(),這個是哪里來的呢?


使用了構造函數的方法,和使用工廠模式的方法他們不同之處如下:

1.構造函數方法沒有顯示的創建對象(new Object());
2.直接將屬性和方法賦值給 this 對象;
3.沒有 renturn 語句。
構造函數的方法有一些規范
1.函數名和實例化構造名相同且大寫,(PS:非強制,但這么寫有助於區分構造函數和
普通函數);
2.通過構造函數創建對象,必須使用 new 運算符。
既然通過構造函數可以創建對象,那么這個對象是哪里來的,new Object()在什么地方執行了?執行的過程如下:
1.當使用了構造函數,並且 new 構造函數(),那么就后台執行了 new Object();
2.將構造函數的作用域給新對象,(即 new Object()創建出的對象),而函數體內的 this 就
代表 new Object()出來的對象。
3.執行構造函數內的代碼;
4.返回新對象(后台直接返回)。

關於 this 的使用,this 其實就是代表當前作用域對象的引用。如果在全局范圍 this 就代表 window 對象,如果在構造函數體內,就代表當前的構造函數所聲明的對象。
var box = 2;
alert(this.box); //全局,代表 window
構造函數和普通函數的唯一區別,就是他們調用的方式不同。只不過,構造函數也是函數,必須用 new 運算符來調用,否則就是普通函數。
var box = new Box('Lee', 100); //構造模式調用
alert(box.run());
Box('Lee', 20); //普通模式調用,無效
var o = new Object();
Box.call(o, 'Jack', 200) //對象冒充調用
alert(o.run());
探討構造函數內部的方法(或函數)的問題,首先看下兩個實例化后的屬性或方法是否相
等。
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,方法的值相等,因為傳參一致
可以把構造函數里的方法(或函數)用 new Function()方法來代替,得到一樣的效果,更加證明,他們最終判斷的是引用地址,唯一性。
function Box(name, age) { //new Function()唯一性
this.name = name;
this.age = age;
this.run = new Function("return this.name + this.age + '運行中...'");
}
我們可以通過構造函數外面綁定同一個函數的方法來保證引用地址的一致性,但這種做法沒什么必要,只是加深學習了解:
function Box(name, age) {
this.name = name;
this.age = age;
this.run = run;
}
function run() { //通過外面調用,保證引用地址一致
return this.name + this.age + '運行中...';
}
雖然構造函數創建對象可以使用全局的函數 run()來解決了保證引用地址一致的問題,但這種方式又帶來了一個新的問題,全局中的 this 在對象調用的時候是 Box 本身,而當作普通函數調用的時候 ,this 又代表 window
三. 原型
我們創建的每個函數都有一個 prototype(原型)屬性,這個屬性是一個對象,它的用途是包含可以由特定類型的所有實例共享的屬性和方法。邏輯上可以這么理解:prototype 通過調用構造函數而創建的那個對象的原型對象。使用原型的好處可以讓所有對象實例共享它所包含的屬性和方法。也就是說,不必在構造函數中定義對象信息,而是可以直接將這些信息添加到原型中。
function Box() {} //聲明一個構造函數
Box.prototype.name = 'Lee'; //在原型里添加屬性
Box.prototype.age = 100;
Box.prototype.run = function () { //在原型里添加方法
return this.name + this.age + '運行中...';
};
比較一下原型內的方法地址是否一致:

var box2 = new Box();
var box1 = new Box();

alert(box1.run == box2.run);//true,方法的引用地址保持一致

 

為了更進一步了解構造函數的聲明方式和原型模式的聲明方式,我們通過圖示來了解一構造函數方式下:

 

原型模式方式:

 

在原型模式聲明中,多了兩個屬性,這兩個屬性都是創建對象時自動生成的。__proto__屬性是實例指向原型對象的一個指針,它的作用就是指向構造函數的原型屬性  constructor通過這兩個屬性,就可以訪問到原型里的屬性和方法了。PSIE瀏覽器在腳本訪問__proto__會不能識別,火狐和谷歌瀏覽器及其他某些瀏覽器均能識別。雖然可以輸出,但無法獲取內部信息。

alert(box1.__proto__);//[object Object]

判斷一個對象是否指向了該構造函數的原型對象,可以使用 isPrototypeOf()方法來測試。

alert(Box.prototype.isPrototypeOf(box));            //只要實例化對象,即都會指向

 

 

原型模式的執行流程

 

1.先查找構造函數實例里的屬性或方法,如果有,立刻返回;

 

2.如果構造函數實例里沒有,則去它的原型對象里找,如果有,就返回;

 

雖然我們可以通過對象實例訪問保存在原型中的值,但卻不能訪問通過對象實例重寫原型中的值

 

var box1 = new Box();

 

alert(box1.name);//Lee,原型里的值

 

box1.name = 'Jack';

 

alert(box.1name);//Jack,就近原則

 

var box2 = new Box();

 

alert(box2.name);//Lee,原型里的值,沒有被 box1修改

 

 

 

如果想要 box1也能在后面繼續訪問到原型里的值,可以把構造函數里的屬性刪除即可,

 

具體如下:

 

delete box1.name;//刪除屬性

 

alert(box1.name);

 

如何判斷屬性是在構造函數的實例里,還是在原型里?可以使用 hasOwnProperty()函數來驗證:

 

alert(box.hasOwnProperty('name'));//實例里有返回 true,否則返回  false

 

構造函數實例屬性和原型屬性示意圖

in 操作符會在通過對象能夠訪問給定屬性時返回 true,無論該屬性存在於實例中還是原
型中。
alert('name' in box); //true,存在實例中或原型中
我們可以通過 hasOwnProperty()方法檢測屬性是否存在實例中,也可以通過 in 來判斷
實例或原型中是否存在屬性。那么結合這兩種方法,可以判斷原型中是否存在屬性。
function isProperty(object, property) { //判斷原型中是否存在屬性
return !object.hasOwnProperty(property) && (property in object);
}
var box = new Box();
alert(isProperty(box, 'name')) //true,如果原型有
為了讓屬性和方法更好的體現封裝的效果,並且減少不必要的輸入,原型的創建可以使用字面量的方式:
function Box() {};
Box.prototype = { //使用字面量的方式
name : 'Lee',
age : 100,
run : function () {
return this.name + this.age + '運行中...';
}
};
使用構造函數創建原型對象和使用字面量創建對象在使用上基本相同,但還是有一些區別,字面量創建的方式使用 constructor 屬性不會指向實例,而會指向 Object,構造函數創建的方式則相反。
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 指向實例對象,那么可以這么做:
Box.prototype = {
constructor : Box, //直接強制指向即可
};
PS:字面量方式為什么 constructor 會指向 Object?因為 Box.prototype={};這種寫法其實就是創建了一個新對象。而每創建一個函數,就會同時創建它 prototype,這個對象也會自動獲取 constructor 屬性。所以,新對象的 constructor 重寫了 Box 原來的 constructor,因此會指向新對象,那個新對象沒有指定構造函數,那么就默認為 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 內置的引用類型都可以使用這種方式,並且內置的引用類型本身也使用了原型。

alert(Array.prototype.sort); //sort 就是 Array 類型的原型方法
alert(String.prototype.substring); //substring 就是 String 類型的原型方法
String.prototype.addstring = function () { //給 String 類型添加一個方法
return this + ',被添加了!'; //this 代表調用的字符串
};
alert('Lee'.addstring()); //使用這個方法
PS:盡管給原生的內置引用類型添加方法使用起來特別方便,但我們不推薦使用這種方法。因為它可能會導致命名沖突,不利於代碼維護。


原型模式創建對象也有自己的缺點,它省略了構造函數傳參初始化這一過程,帶來的缺點就是初始化的值都是一致的。而原型最大的缺點就是它最大的優點,那就是共享。原型中所有屬性是被很多實例共享的,共享對於函數非常合適,對於包含基本值的屬性也還可以。但如果屬性包含引用類型,就存在一定的問題:
function Box() {};
Box.prototype = {
constructor : Box,
name : 'Lee',
age : 100,
family : ['父親', '母親', '妹妹'], //添加了一個數組屬性
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:數據共享的緣故,導致很多開發者放棄使用原型,因為每次實例化出的數據需要保留自己的特性,而不能共享。
為了解決構造傳參和共享問題,可以 組合構造函數+ 原型模式
function Box(name, age) { //不共享的使用構造函數
this.name = name;
this.age = age;
this. family = ['父親', '母親', '妹妹'];
};
Box.prototype = { //共享的使用原型模式
constructor : Box,
run : function () {
return this.name + this.age + this.family;
}
};
PS:這種混合模式很好的解決了傳參和引用共享的大難題。是創建對象比較好的方法。原型模式,不管你是否調用了原型中的共享方法,它都會初始化原型中的方法,並且在
聲明一個對象時,構造函數+原型部分讓人感覺又很怪異,最好就是把構造函數和原型封裝到一起。為了解決這個問題,我們可以使用 動態原型模式
function Box(name ,age) { //將所有信息封裝到函數體內
this.name = name;
this.age = age;
  if (typeof this.run != 'function') {         //僅在第一次調用的初始化
    Box.prototype.run = function () {
      return this.name + this.age + '運行中...';
    };
  }
}
var box = new Box('Lee', 100);
alert(box.run());
當第一次調用構造函數時,run()方法發現不存在,然后初始化原型。當第二次調用,就不會初始化,並且第二次創建新對象,原型也不會再初始化了。這樣及得到了封裝,又實現
了原型方法共享,並且屬性都保持獨立。

if (typeof this.run != 'function') {
  alert('第一次初始化'); //測試用
  Box.prototype.run = function () {
    return this.name + this.age + '運行中...';
  };
}
var box = new Box('Lee', 100); //第一次創建對象
alert(box.run()); //第一次調用
alert(box.run()); //第二次調用
var box2 = new Box('Jack', 200); //第二次創建對象
alert(box2.run());
alert(box2.run());
PS:使用動態原型模式,要注意一點,不可以再使用字面量的方式重寫原型,因為會切斷實例和新原型之間的聯系。


以上講解了各種方式對象創建的方法,如果這幾種方式都不能滿足需求,可以使用一開始那種模式:寄生構造函數
function Box(name, age) {
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.run = function () {
  return this.name + this.age + '運行中...';
  };
return obj;
}
寄生構造函數,其實就是工廠模式+構造函數模式。這種模式比較通用,但不能確定對象關系,所以,在可以使用之前所說的模式時,不建議使用此模式
在什么情況下使用寄生構造函數比較合適呢?假設要創建一個具有額外方法的引用類型。由於之前說明不建議直接 String.prototype.addstring,可以通過寄生構造的方式添加。
function myString(string) {
var str = new String(string);
str.addstring = function () {
return this + ',被添加了!';
};
return str;
}
var box = new myString('Lee'); //比直接在引用原型添加要繁瑣好多
alert(box.addstring());

在一些安全的環境中,比如禁止使用 this 和 new,這里的 this 是構造函數里不使用 this ,這里的 new 是在外部實例化構造函數時不使用 new。這種創建方式叫做穩妥構造函數
function Box(name , age) {
var obj = new Object();
obj.run = function () {
return name + age + '運行中...'; //直接打印參數即可
};
return obj;
}
var box = Box('Lee', 100); //直接調用函數
alert(box.run());
PS:穩妥構造函數和寄生類似。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM