面向?qū)ο?/h1>
概述
面向?qū)ο螅∣bject-Oriented昼丑，OO）的語言有一個(gè)標(biāo)志呻逆，那就是它們都有類的概念，而通過類可以創(chuàng)建任意多個(gè)具有相同屬 性和方法的對象菩帝。
綜合思想：找有這個(gè)功能的對象咖城，做這個(gè)事情。（面向?qū)ο笸瑫r(shí)具備一個(gè)點(diǎn) 萬物皆對象（所有的內(nèi)容都可以被充當(dāng)為對象））
ECMAScript對象是一個(gè)無序?qū)傩缘募虾羯荩鋵傩钥梢园局狄巳浮ο蠡蚝瘮?shù)。
對象的每個(gè)屬性或方法都有一個(gè)名字控妻，而每個(gè)名字都映射到一個(gè)值州袒。
每個(gè)對象都是基于一個(gè)引用類型創(chuàng)建的。
ECMAScript 中沒有正式的類這個(gè)類型弓候。從各方面來看，ECMAScript 類就是一種特殊函數(shù)他匪。
示例
按照我們之前的寫法菇存，對應(yīng)的編程思維被稱為面向過程。面向就是著重點(diǎn)在于過程邦蜜。比如去吃面這個(gè)事情依鸥。
- 需要找面館
- 需要找服務(wù)員下單
- 等廚房做完
- 等服務(wù)員端上來
- 拿雙筷子準(zhǔn)備吃
行為是在過程中產(chǎn)生的，這種思想被稱為面向過程編程悼沈。
如果是面向?qū)ο蟮脑捈伲敲次覀兊暮诵木褪钦覍ο蟆τ谶@個(gè)事情我們的做法就是：
- 找面館
- 自己等著吃
從上面可以得到吃面這個(gè)事情絮供，著重點(diǎn)在于對象衣吠，一個(gè)對象是面館 ，一個(gè)對象是自己壤靶。這個(gè)過程產(chǎn)生的行為都屬于對象的方法缚俏，這個(gè)就是面向?qū)ο蟮乃枷搿?/p>
面向?qū)ο螅∣bject-Oriented昼丑，OO）的語言有一個(gè)標(biāo)志呻逆，那就是它們都有類的概念，而通過類可以創(chuàng)建任意多個(gè)具有相同屬 性和方法的對象菩帝。
綜合思想：找有這個(gè)功能的對象咖城，做這個(gè)事情。（面向?qū)ο笸瑫r(shí)具備一個(gè)點(diǎn) 萬物皆對象（所有的內(nèi)容都可以被充當(dāng)為對象））
ECMAScript對象是一個(gè)無序?qū)傩缘募虾羯荩鋵傩钥梢园局狄巳浮ο蠡蚝瘮?shù)。
對象的每個(gè)屬性或方法都有一個(gè)名字控妻，而每個(gè)名字都映射到一個(gè)值州袒。
每個(gè)對象都是基于一個(gè)引用類型創(chuàng)建的。
ECMAScript 中沒有正式的類這個(gè)類型弓候。從各方面來看，ECMAScript 類就是一種特殊函數(shù)他匪。
按照我們之前的寫法菇存，對應(yīng)的編程思維被稱為面向過程。面向就是著重點(diǎn)在于過程邦蜜。比如去吃面這個(gè)事情依鸥。
- 需要找面館
- 需要找服務(wù)員下單
- 等廚房做完
- 等服務(wù)員端上來
- 拿雙筷子準(zhǔn)備吃
行為是在過程中產(chǎn)生的，這種思想被稱為面向過程編程悼沈。
如果是面向?qū)ο蟮脑捈伲敲次覀兊暮诵木褪钦覍ο蟆τ谶@個(gè)事情我們的做法就是：
- 找面館
- 自己等著吃
從上面可以得到吃面這個(gè)事情絮供，著重點(diǎn)在于對象衣吠，一個(gè)對象是面館 ，一個(gè)對象是自己壤靶。這個(gè)過程產(chǎn)生的行為都屬于對象的方法缚俏，這個(gè)就是面向?qū)ο蟮乃枷搿?/p>
綜合一下，面向過程就是從過程中產(chǎn)生行為贮乳，面向?qū)ο笫菑男袨橹姓覍ο螅ㄕ液线m的對象做合適的事情）
構(gòu)建對象
使用new關(guān)鍵詞 來實(shí)例化對象
利用類里面的構(gòu)造器來構(gòu)建對象（es6的）類組件
與函數(shù)構(gòu)造函數(shù)一樣忧换，多數(shù)編程風(fēng)格都建議類名的首字母要大寫，以區(qū)別于通過它創(chuàng)建的實(shí)例向拆。
class Person{
constructor(age){ //構(gòu)造器 其實(shí)就是一個(gè)構(gòu)造函數(shù)
this.age = age
}
}
//new 關(guān)鍵詞來構(gòu)建
var person = new Person(18)
使用構(gòu)造函數(shù)來構(gòu)建 （es3的） 函數(shù)組件
function Person(age){
this.age = age
}
//new關(guān)鍵詞來構(gòu)建
var person = new Person(18)
構(gòu)建函數(shù)構(gòu)建的步驟
- 自動(dòng)構(gòu)建對象
- 手動(dòng)添加屬性
- 自動(dòng)返回對象
使用工廠模式來構(gòu)建對象
function factory(age){
//聲明一個(gè)對象
var obj = new Object()
obj.age = age
return obj
}
var person = factroy(18)
工廠模式構(gòu)建對象的步驟
- 手動(dòng)初始化一個(gè)對象
- 手動(dòng)給這個(gè)對象添加屬性
- 手動(dòng)將這個(gè)對象返回
工廠模式構(gòu)建對象的不足
不能很好的去將細(xì)節(jié)補(bǔ)充
可以構(gòu)建任何對象
-
instanceof 返回的值只能是Object
//當(dāng)前這個(gè)類的類型是否是Person類型 console.log(person instanceof Person); //false console.log(person instanceof Object); //true instanceOf這個(gè)表示的是當(dāng)前這個(gè)對象是通過哪個(gè)實(shí)例構(gòu)建的
super()
在靜態(tài)方法中可以通過 super 調(diào)用繼承的類上定義的靜態(tài)方法亚茬。
不要在調(diào)用 super()之前引用 this，否則會(huì)拋出 ReferenceError
-
super(); // 相當(dāng)于 super.constructor()
class Vehicle { constructor() { this.hasEngine = true; } } class Bus extends Vehicle { constructor() { // 不要在調(diào)用 super()之前引用 this浓恳，否則會(huì)拋出 ReferenceError super(); // 相當(dāng)于 super.constructor() console.log(this instanceof Vehicle); // true console.log(this); // Bus { hasEngine: true } } } new Bus(); //在靜態(tài)方法中可以通過 super 調(diào)用繼承的類上定義的靜態(tài)方法： class Vehicle { static identify() { console.log('vehicle'); } } class Bus extends Vehicle { static identify() { super.identify(); } } Bus.identify(); // vehicle
抽取對象
主要思想
- 不會(huì)動(dòng)的（名詞）抽為屬性
- 會(huì)動(dòng)的的 （動(dòng)詞）抽成方法
示例
人年紀(jì)18會(huì)走會(huì)跳會(huì)跑性別男上周考試成績15分
屬性：年紀(jì)刹缝，成績碗暗，性別
方法：走，跳赞草，跑
示例 tab欄切換（面向?qū)ο螅?/h5>
class Tab{
constructor(element){
//屬性
this.lis = element.querySelectorAll('ul>li')//里面的li
this.content = element.querySelectorAll('div>div') //顯示的內(nèi)容
//調(diào)用函數(shù)
this.handlerCick()
}
toggle(li){ //切換效果
//排他思想 先將所有的全部設(shè)置一個(gè)值 然后再給自己設(shè)置一個(gè)值
Array.from(this.lis).forEach((li)=>{
li.className = ""
})
li.className = "selected"
//排他
Array.from(this.content).forEach(div=>{
div.style.display = "none"
})
let index = Array.from(this.lis).findIndex(v=>{
return v == li
})
this.content[index].style.display = 'block'
}
handlerCick(){ //處理點(diǎn)擊事件
var _self = this
Array.from(this.lis).forEach((li)=>{
li.onclick = function(){
_self.toggle(this)
}
})
}
}
static 靜態(tài)修飾
class Tab{
constructor(element){
//屬性
this.lis = element.querySelectorAll('ul>li')//里面的li
this.content = element.querySelectorAll('div>div') //顯示的內(nèi)容
//調(diào)用函數(shù)
this.handlerCick()
}
toggle(li){ //切換效果
//排他思想 先將所有的全部設(shè)置一個(gè)值 然后再給自己設(shè)置一個(gè)值
Array.from(this.lis).forEach((li)=>{
li.className = ""
})
li.className = "selected"
//排他
Array.from(this.content).forEach(div=>{
div.style.display = "none"
})
let index = Array.from(this.lis).findIndex(v=>{
return v == li
})
this.content[index].style.display = 'block'
}
handlerCick(){ //處理點(diǎn)擊事件
var _self = this
Array.from(this.lis).forEach((li)=>{
li.onclick = function(){
_self.toggle(this)
}
})
}
}
static修飾的函數(shù) 使用類名.方法名
static修飾的函數(shù) 只會(huì)初始化一次 （每次調(diào)用的都是同一個(gè)函數(shù)）
class Person{
constructor(){
}
run(){
console.log('run');
}
static sayHello(){
console.log('hello');
}
}
new Person().run()
//靜態(tài)函數(shù) 調(diào)用 使用類名.方法名 （static修飾的函數(shù) 聲明一次）
Person.sayHello()
Person.sayHello()
Person.sayHello()
Person.sayHello()
console.log(Person.sayHello == Person.sayHello);//true
