javaScript 面向?qū)ο笾畼?gòu)造函數(shù)、工廠方式、字面量
極客小俊
你不用拼過(guò)聰明人，你只需要拼過(guò)那些懶人 你就一定會(huì)超越大部分人!
什么是面向?qū)ο缶幊?
面向?qū)ο蟮挠⑽娜Q(chēng):Object Oriented Programming , 簡(jiǎn)稱(chēng)OOP
首先我們要先了解面向過(guò)程的編程思想, ?就是代碼從上到下都沒(méi)有封裝的意思，某寫(xiě)代碼裸露在外、沒(méi)有模塊化、代碼雜亂無(wú)章的寫(xiě)法. 并且還不好維護(hù)，也不便于后期二次修改
面向?qū)ο蟮木幊趟枷? ?通俗的說(shuō)就是要具備代碼好維護(hù)、代碼重用性高、耦合度低、高內(nèi)聚、模塊化、便于修改
名詞解釋:
低耦合: 指讓每個(gè)模塊盡可能的獨(dú)立完成某個(gè)特定的子功能。
面向?qū)ο蟮闹饕攸c(diǎn):
抽象:抓住核心問(wèn)題, 去掉相關(guān)性不強(qiáng)的代碼, 把類(lèi)似一樣的功能性代碼放在一起、
[把這個(gè)功能所需要的相同功能代碼抽取出來(lái),然后進(jìn)行封裝]
封裝:只能通過(guò)對(duì)象來(lái)訪問(wèn)方法 ? ?[提高可維護(hù)性]
繼承:從已有對(duì)象上繼承出新的對(duì)象 ?[提高代碼重用性]
多態(tài):讓同一個(gè)[接口] 被不同的對(duì)象所繼承或者實(shí)現(xiàn)，從而產(chǎn)生不同的處理方式
js是一門(mén)基于對(duì)象的語(yǔ)言
js是一門(mén)解釋型的語(yǔ)言
js是一門(mén)腳本語(yǔ)言、弱類(lèi)型語(yǔ)言!
分析什么是對(duì)象?
對(duì)象:具有特征和行為或者說(shuō) 有屬性和方法, 具體特指的某一個(gè)事物
對(duì)象的組成
屬性 就是變量 表示一個(gè)對(duì)象的狀態(tài) ? ? ?對(duì)象下面的變量就叫做:屬性
方法 就是函數(shù) ?表示一個(gè)對(duì)象的行為過(guò)程 ?對(duì)象下面的函數(shù)就叫做:方法
javascript創(chuàng)建對(duì)象的三種基本方式
1.調(diào)用系統(tǒng)的構(gòu)造函數(shù)創(chuàng)建對(duì)象
創(chuàng)建對(duì)象也叫實(shí)例化對(duì)象, Object是系統(tǒng)的構(gòu)造函數(shù)
?//語(yǔ)法
?var 變量名 = new Object();
如何添加對(duì)象的屬性和方法
添加屬性: 如何添加屬性？ ?
?var 變量名 = new Object();
?變量名.屬性名=值;
添加方法: 如何添加方法? ?
?var 變量名 = new Object();
?
?變量名.方法名=function(){
? ? ?..代碼段...
?}
? ? ?
?或
?
?function 函數(shù)名(){
? ? ?
?}
?變量名.方法名=函數(shù)名;
案例:
?var obj=new Object();
?obj.name='張三';
?obj.age=33;
?obj.city='重慶';
?obj.say=function(){
? ? ?alert('張三說(shuō)話(huà)了!');
?}
?console.log(obj);
這種創(chuàng)建方式的缺點(diǎn)是:
1.如果使用這種方式創(chuàng)建了多個(gè)對(duì)象、會(huì)產(chǎn)生對(duì)象不能分辨出到底屬于哪一個(gè)類(lèi)型!
2.每創(chuàng)建 一個(gè)對(duì)象都需要new Object() 一次 耗費(fèi)內(nèi)存空間、 不能一次性創(chuàng)建多個(gè)對(duì)象
小知識(shí): 如何判斷某一個(gè)對(duì)象引用變量是不是屬于某一個(gè)類(lèi)型?
語(yǔ)法: 對(duì)象引用變量名稱(chēng) instanceof 類(lèi)名稱(chēng) ?返回true就是屬于這個(gè)類(lèi) 返回false不屬于這種類(lèi)型
this關(guān)鍵字的基本使用
在當(dāng)前的對(duì)象方法中，可以使用this關(guān)鍵字代表當(dāng)前對(duì)象
小知識(shí): 訪問(wèn)對(duì)象屬性和方法的另一種寫(xiě)法: 對(duì)象[“屬性名”] 或 對(duì)象
案例代碼如下:
?var obj2=new Object();
?obj2.name='李四';
?obj2.age=66;
?obj2.city='北京';
?obj2.say=function(){
? ? ?console.log('李四說(shuō)話(huà)了');
? ? ?console.log(this.name);
?}
?console.log(obj2["name"]);
?obj2["say"]();
?
2.工廠方式與構(gòu)造函數(shù)
工廠方式也可以叫做封裝函數(shù)
優(yōu)點(diǎn): 代碼復(fù)用性提升、不同的數(shù)據(jù)當(dāng)做參數(shù)進(jìn)行傳遞
自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象
了解一下如何一次性創(chuàng)建多個(gè)對(duì)象? ?
工廠方法 方法1: 首先把創(chuàng)建對(duì)象的系統(tǒng)構(gòu)造對(duì)象相關(guān)代碼封裝在一個(gè)函數(shù)中,不同的數(shù)據(jù)當(dāng)做參數(shù)進(jìn)行傳遞,然后返回創(chuàng)建好的對(duì)象
案例代碼如下:
?function createObject(username,age){
? ? ?var obj=new Object();
? ? ?obj.name=username;
? ? ?obj.age=age;
? ? ?obj.city='重慶';
? ? ?obj.say=function(){
? ? ? ? ?console.log(this.name+'的年齡是:'+this.age);
? ? ?}
? ? ?return obj;
?}
?
?var obj1=createObject('張三',23);
?var obj2=createObject('李四',66);
?obj1.say();
?obj2.say();
工廠方法 方法2:自定義構(gòu)造函數(shù)創(chuàng)建對(duì)象, 自己定義一個(gè)構(gòu)造函數(shù),創(chuàng)建對(duì)象
優(yōu)點(diǎn): 可以區(qū)分出對(duì)象引用屬于哪一類(lèi)
案例代碼如下
?//Person就是構(gòu)造函數(shù)
?function Person(username,age,city){
? ? ?this.name=username;
? ? ?this.age=age;
? ? ?this.city=city;
? ? ?this.say=function(){
? ? ? ? ?console.log(this.name+'的年齡是:'+this.age);
? ? ?}
?}
?
?
?var obj1=new Person('張三',33,'北京市');
?var obj2=new Person('李四',66,'重慶市');
?obj1.say();
?obj2.say();
小結(jié): 通過(guò)上面的案例可以小結(jié)出一個(gè)概念: 就是函數(shù)如果前面有new關(guān)鍵字，那么這個(gè)函數(shù)就是構(gòu)造函數(shù)，否則就是一個(gè)普通函數(shù)
==在javascript中使用new關(guān)鍵字來(lái)修飾一個(gè) 普通函數(shù)的解答
系統(tǒng)做4件事情
首先這個(gè)函數(shù)就成為了 構(gòu)造函數(shù), ?因?yàn)?new 后面跟一個(gè)函數(shù) 這樣的函數(shù)就叫構(gòu)造函數(shù)
在內(nèi)存中開(kāi)辟一塊(申請(qǐng)一塊空閑的空間)空間,存儲(chǔ)創(chuàng)建的新對(duì)象
構(gòu)造函數(shù)中的this就設(shè)置為當(dāng)前的對(duì)象
就是說(shuō)當(dāng)new寫(xiě)在一個(gè)函數(shù)前面的時(shí)候、這個(gè)函數(shù)中的this就是創(chuàng)建出來(lái)的對(duì)象、并且函數(shù)的返回值直接默認(rèn)就是this了 隱式返回,可以使用如下代碼進(jìn)行測(cè)試得出結(jié)論
?function Obj() {
?
?}
?//觀察返回值
?console.log(Obj()); ? ? ? //undefined
?console.log(new Obj()); ? //Obj {}
?//所以this這個(gè)對(duì)象會(huì)返回, [ 這里的返回是自動(dòng)的 無(wú)需在構(gòu)造函數(shù)中使用return]如果有設(shè)置對(duì)象的屬性和方法就設(shè)置值
3.字面量的方式創(chuàng)建對(duì)象
json對(duì)象是創(chuàng)建對(duì)象的一種字面量表示形式
var 變量名 = { } ? //這就叫字面量方式創(chuàng)建對(duì)象
案例代碼
?var obj={};
?obj.name='張三';
?obj.age=22;
?obj.city='北京市';
?obj.fn=function () {
? ? ?console.log('我的名字叫'+this.name+' 我的年齡是:'+this.age+' 我在'+this.city+'生活和工作!');
?}
?
?obj.fn();
推薦寫(xiě)法:
字面量?jī)?yōu)化后的形式:其實(shí)就是json數(shù)據(jù)格式的形式 [推薦寫(xiě)法]
案例代碼
?var obj2={
? ? ?name:'張三',
? ? ?age:22,
? ? ?city:'北京市',
? ? ?fn:function () {
? ? ? ? ?console.log(this);
? ? ? ? ?console.log('我的名字叫'+this.name+' 我的年齡是:'+this.age+' 我在'+this.city+'生活和工作!');
? ? ?}
?};
?
?obj2.fn();
注意: var obj =new Object() 與 var obj = { } 是完全一樣的 只是一個(gè)在內(nèi)存中的堆區(qū)中開(kāi)空間 而另一個(gè)在棧區(qū)開(kāi)辟空間
?function Obj() {
?
?}
?var test=new Obj(); ?//在內(nèi)存中的堆區(qū)中開(kāi)空間
?console.log(test);
?
?var json={} ? //在棧區(qū)開(kāi)辟空間 用完即釋放
?console.log(json);
大家的支持就是我堅(jiān)持下去的動(dòng)力!
javaScript 面向?qū)ο笾畼?gòu)造函數(shù)、工廠方式、字面量的評(píng)論 (共 條)
你需要登录后才可以评论。