JavaScript对象模式

工厂模式

工厂模式优缺点

  • 和现实中的工厂差不多
  • 在函数内部创建了一个新对象,最后返回加工后的这个新对象
  • (缺点) 虽然new的是共同新的一个函数,但是其中的方法做对比,返回false,也就是说的new的函数,中得方法,不是共享同一个地址。
//对象举例
function createObject(){
    //先创建一个新对象
    var obj=new Object();
    //赋予新对象属性
    obj.name="西瓜汁"; //属性
    //赋予新对象方法
    obj.run=function(){
        return "贴了商标了";
    }
    //返回对象
    return obj;//出厂 
}
var o1=new createObject();
var o2=new createObject();
console.log(o1===o2); //false;

构造函数模式

和工厂模式的区别

  • 构造函数中,不需要再内部创建对象(给这个对象添加属性,方法,也不用return对象)
  • 如果要写构造函数模式,函数的首字母需要大写
//对象举例
function  CreateFn(){
    this.str="构造函数";
    this .run=function(){
        return "js构造函数方法";
    }
}
//创建新对象
var obj1=new CreateFn();
var obj2=new CreateFn();
//输出
console.log(obj1.str);
console.log(obj2.str);
console.log(obj1.run===obj2.run); //false

原型模式

  • 每当创建一个函数,都有一个prototype(函数)的属性
  • 原型(prototype)这个属性的指针,指向于一个对象,而这个对象的用途可以由特定类型的所有对象实例共享的方法和属性。
  • 原型(prototype)是共享所有的属性和方法,也就是说,如果new了2个函数(实例化),他们的方法是共享的,做对比返回的是true.

缺点

  • 因为是共享的方法,公用同一个内存地址,如果后期修改一个,则全部修改。
//对象举例
function fn(){
    fn.prototype.userName="张三";
    fn.prototype.run=function(){
        return "这是一个共享的方法";
    }
}
var obj1=new fn();
var obj2=new fn();
console.log(obj1.run===obj2.run); //true  说明这两个方法是共享的

组合使用构造器和原型模式

  • 构造函数:定义实例属性.(私有)
  • 原型:定义和共享属性
  • 优点: 每一个实例都会有自己的一份实例属性,但又同时共享着同一个方法。
//对象举例
function CreateFn(){
    this.userName="zhangsan";
    this.age=18;
    this.arr=[1,2,3];
}
//共享方法
CreateFn.prototype.run=function(){
    return "我是共享的";
}

//创建新的对象
var obj1=new CreateFn();
var obj2=new CreateFn();
console.log(obj1.run===obj2.run); //true
//修改obj1的属性
obj1.arr[1]="李四";
console.log(obj1.arr); // [1,"李四",3]
console.log(obj2.arr); ///[1,2,3]

//传参数
//对象举例
function CreateFn(name,age) {
    this.userName = name;
    this.age = age;
    this.arr = [1, 2, 3];
}
//共享方法
CreateFn.prototype.run = function () {
    return "我是共享的";
}

//创建新的对象
var obj1 = new CreateFn("张三",18);
var obj2 = new CreateFn("李四",22);
console.log(obj1.userName); //张三
console.log(obj2.userName); //李四

动态原型模式

  • 动态原型模式是将所有的信息(属性和方法)都封装在构造函数中,而通过构造函数来初始化原型
  • 解决: 第一个对象实例化得时候就初始化原型,后面的就不需要初始化。
function CreateFn(){
    this.userName="张三";
    //原型只初始化一次
    if(typeof this.run!="function"){
        console.log(1111);
        CreateFn.prototype.run=function(){
            return "共享的run方法"
        }
    }
}
var obj1=new CreateFn();
var obj2=new CreateFn();
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值