javascript進階-原型prototype

一、javascript原型認識

很多編程語言都有類的概念，我們可以拿原型和類進行比較，看看它們之間的區別以及相同點在哪裡。

1、類：類是一個具體事物的抽象所以類是一個抽象的東西，在面向對象中類可以用來構造對象，這就是一個抽象—具體的過程。在現實生活中就好比：圖紙造汽車。

2、原型：javascript中用原型來構造對象是一個具體—具體的過程。在現實生活中就好比某品牌汽車—其他牌子汽車。

二、設置對象的原型

1、Object.create(proto[,propertiesObject])

proto一個對象，作為新創建對象的原型。

實例：

//新建一個原型對象car    
var car = {
            name:'car',
            start: function(){
                console.log(this.logo);
            }
        }
//使用原型對象創建新的對象
var Bensz = Object.create(car);
Bensz.logo = 'bensz';
//用新的對象Bensz調用start方法
Bensz.start();

上述代碼運行結果是列印出了‘bensz’。

2、構造函數

構造函數可以用prototype屬性設置原型，使用new創建對象。

實例：

//首先構造函數car
function Car(logo){
    this.logo = logo || 'unkown name';
}
//設置car的prototype屬性,這個屬性是一個對象
Car.prototype = {
    strat: function(){
        console.log(this.logo);
    }
}

var bensz = new Car('bensz');
bensz.strat(); 

上述代碼也能列印中'bensz'

圖解過程：

在用new關鍵字創建新的對象bensz時其實是有三個步驟。1、創建新對象bensz 2、設置bensz的_proto_ ，這是_proto_屬性是指向car.prototype，3、Car.apply(bensz,[]),bensz執行Car上的logo賦值操作，這時bensz對象有了logo屬性。

三、原型鏈

實例：

//首先構造函數car
function Car(logo){
    this.logo = logo || 'unkown name';
}
//設置car的prototype屬性,這個屬性是一個對象
Car.prototype = {
    strat: function(){
        console.log(this.logo);
    }
}
//創建一個構造函數bensz
function Bensz(serialno){
    this.serialno = serialno;
}
//設置bensz的prototype屬性 為了一個car類型的對象
Bensz.prototype = new Car('bensz');

var bensz1 = new Bensz(12345);

//定義了兩個構造函數，第二個構造函數的原型不是一個普通的Object，而是Car類型的對象。

過程：1、創建一個Car構造函數，且設置它的prototype屬性。2、創建一個Bensz構造函數，它的prototype屬性是Car類型的對象，這個時候由於是new關鍵字創建的對象，這個對象就具有了_proto_屬性，這個屬性就指向Car.prototype。3、創建一個bensz1對象，也是由於是new關鍵字創建，它也有一個_proto_屬性，這個屬性就指向構造函數Bensz的prototype屬性，即Bensz.prototype。

除此之外，我們可以發現Car.prototype可以利用new Object創建，因為它本身就是一個對象，所以它也具有_proto_屬性，且指向的是Object.prototype。

所以整條原型鏈是：1、bensz1._proto_ —— 2、Bensz.prototype(new Car('bensz')) , Bensz.prototype._proto_—— 3、Car.prototype,Car.prototype._proto_——4、Object.prototype。

訪問屬性：先在本身的對象上找，如果沒有沿著原型鏈往上找

修改與刪除屬性：只能修改和刪除對象自身的屬性