JS構(gòu)造函數(shù)和實(shí)例化的關(guān)系及原型引入舉例分析

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

1、 構(gòu)造函數(shù)與實(shí)例化

當(dāng)我們的編程是面向?qū)ο蟮臅r(shí)候，先是抽象的過程=>然后實(shí)例化的過程，比如我們抽象一個(gè)人，我知道一個(gè)人的基本信息。名稱，年齡，性別，....等等

我們把先是抽象的，在抽象完成后，我們在實(shí)例化。

2、構(gòu)造函數(shù)與實(shí)例化之間的關(guān)系？

//這個(gè)自定義的構(gòu)造函數(shù)在抽象

function Person(name,age,sex){

    this.name=name;

    this.age=age;

    this.sex=sex;

    this.say=function(){

        console.log("我叫",name)

    }

}

// 這個(gè)過程是實(shí)例化

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

per1.say();//調(diào)用





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

通過上面這一行代碼。

我們可以得出一個(gè)結(jié)論：

構(gòu)造函數(shù)與實(shí)例對象之間的關(guān)系是:

實(shí)例對象需要通過構(gòu)造函數(shù)來創(chuàng)建的。

同時(shí):我們可以知道實(shí)例對象的構(gòu)造器就是構(gòu)造函數(shù)

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

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

充分說明:實(shí)例對象的構(gòu)造器就是構(gòu)造函數(shù)這一句話是正確的。

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得出的結(jié)論

因?yàn)閏onsole.log( per1.say==per2.say ) //false

我們可以得出一個(gè)結(jié)論。

那就是per1.say()和per2.say()調(diào)用的不是同一個(gè)方法

那么他們的內(nèi)容是否是相等的的呢？

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

說明內(nèi)容是相等的

5、舉例代碼問題

5.1代碼出現(xiàn)的問題

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();

}

這一段代碼：是它在內(nèi)存中開辟了100個(gè)空間。每個(gè)空間都有一個(gè)say方法。但是每一個(gè)say方法都是不同的?？墒撬麄冚敵龅膬?nèi)容是相同?；蛘哒f執(zhí)行的邏輯是相同的。這樣就造成了空間浪費(fèi)。所以在項(xiàng)目中，這樣就造成了浪費(fèi)空間。

我們可不可以來優(yōu)化呢 ?

5.2優(yōu)化代碼解決造成空間浪費(fèi)

function comSay(){

    // 執(zhí)行相同的邏輯

    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

這樣我們就節(jié)約了空間。每次調(diào)用的時(shí)候，都是同一個(gè)方法。

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

// 我們還可以通過原型來解決數(shù)據(jù)共享

原型的作用：數(shù)據(jù)共享，節(jié)約空間。

到此，關(guān)于“JS構(gòu)造函數(shù)和實(shí)例化的關(guān)系及原型引入舉例分析”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！