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

這篇文章主要介紹“JS構造函數和實例化的關系及原型引入舉例分析”，在日常操作中，相信很多人在JS構造函數和實例化的關系及原型引入舉例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS構造函數和實例化的關系及原型引入舉例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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構造函數和實例化的關系及原型引入舉例分析”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！