JavaScript面向对象

定义JavaScript对象的两种方式

在JavaScript中定义JavaScript对象有两种方式:

方式一:

    var Book ={
            getBookName:function(){  
                alert("获取书的名称") ;
            }

        };    

方式二


        var oBook = function(){};

        oBook.getBookName=function(){
            alert("添加获取新书的名称");
        }
var  newBook = new  Book();    newBook.getBookName(); 

JavaScript的中对象的属性
在JavaScript中对象的属性包括:私有属性 、 私有方法、共有属性、公有方法 、构造方法

var BookClass = function ( id,name ,price ){
            this.id=id; // 公有属性
            this.name=name;
            this.price=price;
            var privateVariable =0;    //同样私有属性不能被外部访问 增加this.XXX方法访问
            //添加私有方法  
            function  privateMethod() {
                 alert("私有方法, 想访问请增加this.xxxxx方法调用我")
            }
            this.getPrivateVariable=function(){
               alert(privateVariable);
            };

             this.setName(name){
                return this ;
            };
        }

JavaScript的中的原型
JavaScript是一种基于原型prototype的语言,所以每创建一个对象的时,它都有一个原型prototype指向其继承的属性和方法。这样通过prototype集成的属性和方法并不是对象本身的,而是通过prototype一级一级查询得到的。因此你会发现JavaScript通过this定义的属性和方法才是对象本身的。所以每次创建对象的时候this定义的部分会相应的创建,而通过prototype继承的属性和方法是每个对象通过prototype访问的,所以每次创建新对象的时候prototype部分则不会再次创建
这里写图片描述
JavaScript的中对象的安全模式

var Book = function ( id,name ,price ){
    this.id=id; // 公有属性
    this.name=name;
    this.price=price;
    }

var book= Book(1,天龙八部,88);
console.log(book);
var Book = function ( id,name ,price ){
      if( this instanceof  Book){
    this.id=id; // 公有属性
    this.name=name;
    this.price=price;
       }else{
    return new Book(d,name ,price)
       }

    }

var book= new  Book(1,天龙八部,88);
var book=  Book(1,天龙八部,88);

JavaScript的中的继承
JavaScript继承之类式继承(子类通过prototype关联父类)

    function   ParentClass(){
        this.parentValue=true;
    };
    ParentClass.prototype.getParentValue=function(){
        return this.parentValue;
    };
    function childClass(){
        this.cildValue=false
    };
    childClass.prototype=new ParentClass(); // 继承的关键部位

    childClass.prototype.getChildValue=function(){
        return this.cildValue;
    }
(function(){
            var childClassinstance= new childClass();
            alert(childClassinstance.getParentValue());
            alert(childClassinstance.getChildValue());
        }); 

JavaScript继承之构造函数继承(创建即继承,这种方法通过call调用继承)

    function   ParentClass(id){
        this.parentValue=true;
        this.id=id;
    };
    ParentClass.prototype.getParentValue=function(){
        return this.parentValue;
    };
    function childClass(id){
        ParentClass.calll(this,id);//构造函数继承的关键部位 ,大家注意点哦。
        this.cildValue=false
    };

    childClass.prototype.getChildValue=function(){
        return this.cildValue;
    }

JavaScript继承还包括组合继承、原型式继承、寄生组合模式继承。这些继承都是前两种继承的变种。大家可以去网上搜索下,深入理解下大神的们的写法。有机会的话下次给大家讲解
JavaScript的中的多态
JavaScript中的多态就是同一个方法,多种调用范式来个简单的代码实例。

function  add (){
            var arg=arguments;
            var len=arg.length;
            switch(len){
                case :0
                return 0; // 执行js函数表达式
                case :1
                return 11;// 执行js函数表达式


            }
        }

JavaScript的创建型模式
JavaScript的创建型模式。在接下来我们接触到的模式包括:
这里写图片描述
JavaScript简单工厂模式
简单工厂模式又叫静态工厂模式由一个工厂对象决定创建某一类产品或对象类的实例。主要用来创建同一类对象

    var LoginAlert =function(text){
        this.content=text;
     }
     LoginAlert.prototype.show=function(){
        // alert(this.content);//处理提示信息
     }
      var LoginConfirm =function(text){
        this.content=text;
     }
     LoginConfirm.prototype.show=function(){
        // alert(this.content);//处理提示信息
     }
      var LoginPrompt =function(text){
        this.content=text;
     }
     LoginPrompt.prototype.show=function(){
        // alert(this.content);//处理提示信息
     }
var  PopFactory =function (type,text){
    switch(type){
    case: 'alert'
           return new LoginAlert(text);
    case: 'confirm'
            return new LoginConfirm(text);
    case: 'prompt'
         return new LoginPrompt(text);
            }
     }
var creatPopFactory =function (type,text){
    var o =new Object();
    o.content=text;
    o.show = function (){
        // 显示部分处理逻辑
    }
    f(type=='alert'){
        //警示框差异部分
    }
    f(type=='confirm'){
        // 确认框差异部分
    }
    if(type=='prompt'){
        // 提示框差异部分
    }
}

根据现有的业务逻辑这个也是简单工厂实现的一种工厂模式:比较上次实现的模式和现在实现的模式的区别有哪些?
第一种实现模式:该模式是通过类实例化实现的。该实现模式如果所有的公有方法可以定义一个父类实现。(即可以公用一些属性方法)

第二种实现模式:通过创建一个新的类,包装增强其功能实现的。该实现方式不能共用一些公有的方法属性。因为每次都返回一个新的对象

先来个业务场景:现在网站有的部分收入是广告收入。假如A公司想在我们网站上加个广告,增加A公司的知名度。需求来了,如何处理呢?

var A=functioncontent ){
     this.content=content;
   //  通过闭包实现  直接运行方法  将广告部分插入到指定位置 
     (function (content ){
    var div=document.creatElement(“div”);
    div.innerHtml=content;  
    docment.getElementById(“container”).appendChild(div);
    })(content);    

}

思考一下:如果你们网站比较火,有一百家公司加入咋办??定义一百个全局变量 可取吗?
工厂方法模式:通过对产品类的抽象使其创建业务主要负责用于创建多类产品的实例

var  Factory = function(type ,content){
    if(!this instanceof Factory){
         var s= new  this[type] (content);
         return s;
    }else{
       return  new  Factory (type,content);
    }



}
Factory .prototype={
    A:function(){
      ....................  
               }

    B:function(){
      ....................  
               }

    C:function(){
      ....................  
               }

    D:function(){
      ....................  
               }

}

工厂方法模式:通过对产品类的工厂抽象使其业务用于对产品簇的创建,而不负责创建某一类产品的实例

抽象工厂模式在JavaScript使用不是很广泛,主要是因为JavaScript中不支持抽象创建与虚拟方法。它与简单工厂方法和工厂方法模式的区别是:简单工厂创建的是单一对象,工厂方法创建的是多个对象实例,而抽象工厂方法创建的是产品簇,只是指定了类的结构。这里我们就不做过多介绍了。
原型模式:用原型实例指向创建对象的类,使用于创建新的对象的类共享原型的属性和方法
实例场景1、图片的滑动效果这里包含左右滑动,上下滑动。如何实现呢?
JavaScript原型模式

 var   LoopImages = function (imgArr,Container){
    this.imgArr=imgArr;
            this.Container=Container;
            this.creatImage=function(){
        //创建轮播图片
    };
    this.changeImage(){
    // 换下一张图片
    }
}
    // 上下滑动
     var SlideLoopImage = function (imgArr ,Container){
        LoopImages.call(this,imgArr,Container);
        this.changeImage(){
                  // 重写继承的切换下一张图片方法
        }
     }
      // 左右滑动
     var LeftOrRightLoopImage = function (imgArr ,Container){
        LoopImages.call(this,imgArr,Container);

        this.changeImage(){
               // 重写继承的切换下一张图片方法
        }

     }
 var   LoopImages = function (imgArr,Container){
    this.imgArr=imgArr;
            this.Container=Container;

}

LoopImages.prototype={
    creatImage:function(){
        //创建轮播图片
    };
            changeImage:function(){
        // 换下一张图片
    }
 }
    // 上下滑动
     var SlideLoopImage = function (imgArr ,Container){
        LoopImages.call(this,imgArr,Container);
     }
    SlideLoopImage.prototype=new LoopImages ();

    SlideLoopImage.prototype.changeImage=function(){
    // 重写继承的切换下一张图片方法

    }
      // 左右滑动
     var LeftOrRightLoopImage = function (imgArr ,Container){
        LoopImages.call(this,imgArr,Container);

     }

    LeftOrRightLoopImage .prototype=new LoopImages ();

    LeftOrRightLoopImage .prototype.changeImage=function(){
    // 重写继承的切换下一张图片方法

    }

JavaScript建造者模式

建造者模式:将一个复杂对象的构建层与表示层相互分离,同样构建过程可以采用不同的表示。
区别:工厂模式是为了创建对象实例或者产品簇,关心最终的产出结果,不关注过程仅仅知道结果就可以了。所以通过工厂模式我们只是得到产品实例对象或者产品簇 。而建造者模式创建对象的时候更为复杂点,虽然最终的产出是实例对象,但更关注产品的创建过程的每一个细节。
实例 :

//  定义一个人的类
var  Human= function (param){
        // 技能
    this.skill = param && param.skill || '保密';
        // 爱好
    this.hobby = param && param.hobby || '保密';
}
Human.prototype={

    getSkill:function(){
             return this.skill;
    },  
    getHobby:function(){
             return this.hobby;
    }
}
// 建造者模式对实体类姓名的处理类
var  Named=function(name){
      var that=this ;
      (function(name,that){
         that.wholeName=name;
         that.FirstName=name.slice(0,name.indexOf(' '));
         that.SecondName=name.slice(0,name.indexOf(' '));
       })(name,that)

}

// 建造者模式对实体类工作的处理类
var  Work=function(work){
      var that=this ;
      (function(work,that){
    switch (work){
    case 'code':
    that.work='工程师';
    that.workDescript='每天沉醉于变成';
    break;
    case 'UI' :
    that.work='前端工程师';
    that.workDescript='处理前端页面问题';
    break;
    default:
    that.work=work;
    that.workDescript='没有找到相应的职位';
    }
         })(work,that)
};
    Work.prototype.changeWork=function(work){
        that.work=work;
    };
    Work.prototype.workDescript=function(setence){
        that.workDescript=setence;
    };
    // 建造者生产类
    var Person =function(name,work){
        var _person=new Human();

        _person.name=new  Named(name);;

        _person.work= new Work(work);

        return _person;

    };

JavaScript单例模式
单例模式:是只允许实例化一次对象类。常用来规划命名空间,井井有条的管理对象的属性和方法

//创建代码库
    var  A = {
        Util:{
            Util.method1:function (){},
            Util.method2:function (){}
        },
        Tool:{
            Tool.method1:function (){},
            Tool.method2:function (){}
        },
        Ajax:{
            get:function (){},
            Post:function (){}
        },
        Other:{
            get:function (){},
            Post:function (){}
        }
    }

懒性单例


var LazySingle= (function (){
     var _instance=null
     function Single(){
        return {
    pulbicMethod:function(){},
    publicProperty:function(){}
         }
     }
    return function(){
         if(!_instance){
    _instance=Single();
          }
         return _instance;
         }
})();
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值