JS構造函數和實例化的關系及原型引入
更新時間：2021年11月27日 11:49:07 作者：明月人倚樓
這篇文章主要介紹了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,'女');
通過上面這一行代碼。
我們可以得出一個結論：
構造函數與實例對象之間的關系是:
實例對象需要通過構造函數來創(chuàng)建的。
同時:我們可以知道實例對象的構造器就是構造函數
我們來證明這一句話是否正確;上面的代碼不改變。
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方法都是不同的?？墒撬麄冚敵龅膬热菔窍嗤；蛘哒f執(zhí)行的邏輯是相同的。這樣就造成了空間浪費。所以在項目中，這樣就造成了浪費空間。
我們可不可以來優(yōu)化呢 ?
5.2優(yōu)化代碼解決造成空間浪費
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é)約了空間。每次調用的時候，都是同一個方法。
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
// 我們還可以通過原型來解決數據共享
原型的作用：數據共享，節(jié)約空間。
到此這篇關于JS構造函數和實例化的關系及原型引入的文章就介紹到這了,更多相關JS構造函數和實例化的關系及原型引入內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了微信小程序圖片自適應支持多圖實例詳解的相關資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序 picker-view 組件詳解及簡單實例的相關資料,需要的朋友可以參考下2017-01-01
這篇文章主要給大家介紹的是JS中輕松遍歷對象屬性的幾種方式，文章從自身可枚舉屬性、Object.values() 返回屬性值、Object.entries()來展開介紹，感興趣的小伙伴可以參考一下2021-09-09
這篇文章主要為大家介紹了JavaScript集成公式編輯器示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
[藍色]非常好的js代碼...2006-06-06
這篇文章主要為大家介紹了npm腳本庫組織在項目中的地位詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了Express框架view對象使用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 支付功能開發(fā)錯誤總結的相關資料,需要的朋友可以參考下2017-02-02
Uncaught EvalError:Refused to evaluate a
這篇文章主要為大家介紹了Uncaught EvalError:Refused to evaluate a string as JavaScript解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
mui框架基于htm5plus的XMLHttpRequest，封裝了常用的Ajax函數。本文重點給大家介紹使用MUI框架模擬手機端的下拉刷新和上拉加載功能，感興趣的朋友參考下吧2017-09-09