javascript進階-原型prototype

1、javascript原型認識

不少編程語言都有類的概念，咱們能夠拿原型和類進行比較，看看它們之間的區別以及相同點在哪裏。

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

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

 

2、設置對象的原型

一、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’。

二、構造函數

構造函數能夠用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時實際上是有三個步驟。一、建立新對象bensz 二、設置bensz的_proto_ ，這是_proto_屬性是指向car.prototype，三、Car.apply(bensz,[]),bensz執行Car上的logo賦值操做，這時bensz對象有了logo屬性。

 

3、原型鏈

實例：

//首先構造函數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類型的對象。

過程：一、建立一個Car構造函數，且設置它的prototype屬性。二、建立一個Bensz構造函數，它的prototype屬性是Car類型的對象，這個時候因爲是new關鍵字建立的對象，這個對象就具備了_proto_屬性，這個屬性就指向Car.prototype。三、建立一個bensz1對象，也是因爲是new關鍵字建立，它也有一個_proto_屬性，這個屬性就指向構造函數Bensz的prototype屬性，即Bensz.prototype。

除此以外，咱們能夠發現Car.prototype能夠利用new Object建立，由於它自己就是一個對象，因此它也具備_proto_屬性，且指向的是Object.prototype。

因此整條原型鏈是：一、bensz1._proto_ —— 二、Bensz.prototype(new Car('bensz')) , Bensz.prototype._proto_—— 三、Car.prototype,Car.prototype._proto_——四、Object.prototype。

 

訪問屬性：先在自己的對象上找，若是沒有沿着原型鏈往上找

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