由于已經(jīng)全面轉(zhuǎn)向Typescript，把Javascript的一些實(shí)踐記錄下來(lái)幕屹，防老年癡呆
約定
返回必須是單純數(shù)據(jù)類型满葛，對(duì)象的所有屬性都必須直接包含其中昌罩，例如：
let child = {
a:1,
b:2,
c(){console.log('the func')}
}
好處：
-
編輯器可以識(shí)別所有屬性阱穗，方便開(kāi)發(fā)
當(dāng)然jsx的props也可以識(shí)別饭冬，這里就不另貼圖了 可預(yù)期對(duì)象的結(jié)果
屬性結(jié)構(gòu)的類
思路取自阮一峰的Javascript定義類（class）的三種方法中的第三個(gè)方法，添加了方法重載的實(shí)現(xiàn)方式揪阶，并且返回類型約定為IDE容易識(shí)別的結(jié)構(gòu)形態(tài)
最基礎(chǔ)的類昌抠，和其實(shí)例化、調(diào)用函數(shù)
let Dog = {
init(){
let child = {
name: 'the dog',
say(){
console.log('Wang!Wang!!!')
}
}
return child
}
}
let dog = Dog.init()
dog.say()
帶有靜態(tài)變量的類
let Dog = {
staticAge: 10,
init(name){
let _this = this
let child = {
name: name || 'the dog',
say(){
console.log(`I'm ${_this.staticAge}, ${child.name}`)
}
}
return child
}
}
let dog1 = Dog.init('red')
let dog2 = Dog.init('yellow')
let dog3 = Dog.init('bbb')
dog1.say()
dog2.say()
Dog.staticAge = 20
dog1.say()
dog2.say()
類的繼承鲁僚， 方法重載炊苫， 子屬性裁厅，父屬性調(diào)用
let Dog = {
init(name){
let child = {
name: name || 'the dog',
say(){
console.log('Wang!Wang!!!')
}
}
return child
}
}
let WolfDog = {
init(name, age) {
let father = Dog.init(name)
let child = {
name: 'mini ' + name,
age: age || 10,
say(){
//函數(shù)重載
father.say()
console.log('Wooooooo!!!')
},
hello(){
//讀取子熟悉和父屬性
console.log(`I'm ${child.name}, my father's is ${father.name}`)
}
}
return Object.assign(Dog.init(name), child)
}
}
let wolf = WolfDog.init('tim', 50)
wolf.say() //Wang!Wang!!! Wooooooo!!!
wolf.hello() //I'm mini tim, my father's is tim
方法結(jié)構(gòu)的類(優(yōu)勢(shì)寫(xiě)起來(lái)美觀，但是不推薦劝评，原因最后有寫(xiě))
這個(gè)思路和屬性結(jié)構(gòu)的類是一樣的姐直，都是在內(nèi)部創(chuàng)建一個(gè)臨時(shí)的子對(duì)象倦淀，然后返回此子對(duì)象
約定：類的首字母必須大寫(xiě)蒋畜，以區(qū)分類和函數(shù)
類的創(chuàng)建，實(shí)例化撞叽，調(diào)用函數(shù)
let Dog = function(name) {
let _this = this
let child = {
name: name || 'the Dog',
say(){
console.log(child.name + ': wang!wang!!!')
}
}
return child
}
let dog1 = Dog('redDog')
let dog2 = Dog('yelloDow')
dog1.say() //redDog: wang!wang!!!
dog2.say() //yelloDow: wang!wang!!!
類的靜態(tài)屬性
let Dog = function(name) {
this.staticAge = 10
let _this = this
let child = {
name: name || 'the Dog',
say(){
console.log(child.name + ': wang!wang!!!')
console.log('I am ' + _this.staticAge)
},
setStaticAge(newAge) {
_this.staticAge = newAge
}
}
return child
}
let dog1 = Dog('redDog')
let dog2 = Dog('yelloDow')
dog1.say() //redDog: wang!wang!!!
dog1.setStaticAge(20)
dog2.say() //yelloDow: wang!wang!!!
類的繼承姻成， 方法重載， 子屬性愿棋，父屬性調(diào)用
let Dog = function(name){
let child = {
name: name,
say(){
console.log(child.name + ': wang!wang!!!')
}
}
return child
}
let WolfDog = function(name, age) {
let father = Dog(name)
let child = {
name: 'mini' + father.name,
age: age,
say(){
father.say()
console.log(child.name + ': wooooooo!!!')
}
}
return Object.assign(Dog(name), child)
}
let wolf = WolfDog('blueWolf', 15)
wolf.say() //blueWolf: wang!wang!!!, miniblueWolf: wooooooo!!!
console.log(wolf.name) //miniblueWolf
不推薦的理由
雖然方法結(jié)構(gòu)的類更加美觀科展，但是現(xiàn)在發(fā)現(xiàn)無(wú)法有多個(gè)構(gòu)造函數(shù)，而屬性結(jié)構(gòu)的類可以有多個(gè)構(gòu)造函數(shù)
//熟悉Objective-C的朋友應(yīng)該很熟悉這種工廠方法：
Dog.init('redDog')
Dog.initWithMagic('lightning',1000)
