JS構造函數和實例化的關系及原型引入

Posted on by

1、 構造函數與實例化

當我們的編程是面向對象的時候，先是抽象的過程=>然後實例化的過程，比如我們抽象一個人，我知道一個人的基本信息。名稱，年齡，性別，….等等

我們把先是抽象的，在抽象完成後，我們在實例化。

2、構造函數與實例化之間的關系？

//這個自定義的構造函數在抽象

function Person(name,age,sex){

    this.name=name;

    this.age=age;

    this.sex=sex;

    this.say=function(){

        console.log("我叫",name)

    }

}

// 這個過程是實例化

let per1=new Person('司藤',300,'女');

per1.say();//調用





//let per1=new Person('司藤',300,'女');

通過上面這一行代碼。

我們可以得出一個結論：

構造函數與實例對象之間的關系是:

實例對象需要通過構造函數來創建的。

同時:我們可以知道實例對象的構造器就是構造函數

我們來證明這一句話是否正確;上面的代碼不改變。

console.log( per1.constructor===Person ) //返回的是true

充分說明:實例對象的構造器就是構造函數這一句話是正確的。

3、per1.say是否等於per2.say

 function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=function(){

        console.log('我可以不吃飯');

    }

}

var per1=new Person("司藤",300,'耍');

var per2=new Person('白淺','10000','耍');

per1.say();

per2.say();

console.log( per1.say==per2.say ) //false

4、per1.say不等於per2.say得出的結論

因為console.log( per1.say==per2.say ) //false

我們可以得出一個結論。

那就是per1.say()和per2.say()調用的不是同一個方法

那麼他們的內容是否是相等的的呢？

console.log( per1.say()==per2.say() ) //true

說明內容是相等的

5、舉例代碼問題

5.1代碼出現的問題

function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=function(){

        console.log('我可以不吃飯');

    }

};

for (var index = 0; index < 100; index++) {

    var per=new Person("司藤",300,'耍');

    per.say();

}

這一段代碼：是它在內存中開辟瞭100個空間。每個空間都有一個say方法。但是每一個say方法都是不同的。可是他們輸出的內容是相同。或者說執行的邏輯是相同的。這樣就造成瞭空間浪費。所以在項目中，這樣就造成瞭浪費空間。

我們可不可以來優化呢 ?

5.2優化代碼解決造成空間浪費

function comSay(){

    // 執行相同的邏輯

    console.log('我可以不吃飯')

};



function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

    this.say=comSay;//不要加括號

};

var per1=new Person("司藤",300,'耍');

var per2=new Person('白淺','10000','耍');

console.log( per1.say==per2.say ) //true

這樣我們就節約瞭空間。每次調用的時候，都是同一個方法。

5.3處理使用這種方法，我們還可以使用原型的方式

function Person(name,age,like) {

    this.name=name;

    this.age=age;

    this.like=like;

};

Person.prototype.comSay=function(){

    console.log('我可以不吃飯')

}

var per1=new Person("司藤",300,'耍');

var per2=new Person('白淺','10000','耍');

console.log( per1.comSay==per2.comSay ) //true

// 我們還可以通過原型來解決數據共享

原型的作用：數據共享，節約空間。

到此這篇關於JS構造函數和實例化的關系及原型引入的文章就介紹到這瞭,更多相關JS構造函數和實例化的關系及原型引入內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：