前端筆記 2020.4.1（工廠模式，構造函數，原型模式）建立對象

工廠模式：（不知道對象的類型）

//工廠模式
function createPerson(name,age,job){
    var o={
        name:name,
        age:age,
        job:job,
        sayName(){
            console.log(`我是${this.name}`)
        }
    }
    return o;
}
let p1=createPerson("小明",25,"前端開發")
console.log(p1)
p1.sayName()

結果p1

 

構造函數模式：（知道對象的類型）

//構造函數模式
function Person(name,age,job){
    this.name=name
    this.age=age
    this.job=job
    this.sayName=function(){
        console.log(`我是${this.name}`)
    }
}
let p2=new Person("小明",25,"前端開發")
console.log(p2)
p2.sayName()

結果p2

p2的constructor就是當前類型

p1和p2都數據Object類型，但只有p2屬於Person類型

 

使用call或apply改變this指向：（p3是使用Person建立的個Object類型的對象）

let p3={}
Person.call(p3,"小紅",26,"測試")
console.log(p3)
p3.sayName()

結果

 

原型模式：（相同的屬性或方法能夠提取出來）

//使用原型模式
function Person2(name,age,job){
    this.name=name
    this.age=age
    this.job=job
}
//相同的屬性或方法能夠提取出來
Person2.prototype.sayName=function(){
    console.log(`我是${this.name}`)
}
let p4=new Person2("張三",27,"後端開發")
console.log(p4)
p4.sayName()

結果