首页 > 其他 > 详细

前端笔记 2020.4.1(工厂模式,构造函数,原型模式)创建对象

时间:2020-04-02 00:10:29      阅读:62      评论:0      收藏:0      [点我收藏+]

工厂模式:(不知道对象的类型)

//工厂模式
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()

结果

技术分享图片

 

前端笔记 2020.4.1(工厂模式,构造函数,原型模式)创建对象

原文:https://www.cnblogs.com/wuhairui/p/12616790.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!