JavaScript-No.01 JavaScript实现封装、继承、多态

最新推荐文章于 2024-08-03 17:05:14 发布

weixin_34235457

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量64

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/shma1664/blog/316859

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、定义类
1）基础方式：

function User(userId, userName, userAge, userScore) {
    this._userId = userId;
    this._userName = userName;
    this._userAge = userAge;
    this._userScore = userScore;
 
    this.downloadResource=function() {
        return "User类：下载资源";
    };
 
    shareResource=function() {
        this._userScore += 5;
        return "User类：分享资源";
    };
    showInfo=function() {
        var str_tmp = "";
        str_tmp += "userId : " + this._userId + "<br/>" + "name : " + this._userName + "<br />" + "UserAge : " + this._userAge + "<br />" + "userScore : " + this._userScore;
        return str_tmp;
    };
}

2）优雅方式：

//类的创建模型
var Class = {
    create : function() {
                return function() {
                            this.initialize.apply(this, arguments);
                }
    }
};
 
//创建User类
var User = Class.create();
User.prototype = {
    initialize : function(userId, userName, userAge, userScore) {
        this._userId = userId;
        this._userName = userName;
        this._userAge = userAge;
        this._userScore = userScore;
    },
 
    downloadResource : function() {
        return "User类：下载资源";
    },
 
    shareResource : function() {
        this._userScore += 5;
        return "User类：分享资源";
    },
    showInfo:function() {
        var str_tmp = "";
        str_tmp += "userId : " + this._userId + "<br/>" + "name : " + this._userName + "<br />" + "UserAge : " + this._userAge + "<br />" + "userScore : " + this._userScore;
        return str_tmp;
    }
 
 
};
 
var user = new User('070101061', 'shma1664', 21, 98);
alert(user.downloadResource());
alert(user.shareResource());
alert(user.showInfo());

2、继承和多态

1）基础方式：

//定义会员类，继承User
function Member(userId, userName, userAge, userScore, offLineSpace, level) {
    this._offLineSpace = offLineSpace;
    this._level = level;
    //初始化基类参数
    User.call(this, userId, userName, userAge, userScore);
}
 
//更改Member的prototype属性，实现继承
Member.prototype = new User();
 
//添加public方法，会员类有权限使用云点播
Member.prototype.cloudPlay = function() {
    return "Member类：云点播";
};
 
//添加public方法，会员类有权限使用离线下载
Member.prototype.offLineDownload=function() {
    return "Member：离线下载";
};
 
//重写分享方法,相当于override abstract(或virtual)方法
Member.prototype.shareResource=function() {
    this._userScore += 10;
    return "Member类：分享资源";
};
 
//重写显示用户的方法,相当于override abstract(或virtual)方法
Member.prototype.showInfo=function() {
    var str_tmp = "";
    str_tmp += "userId : " + this._userId + "<br/>" + "name : " + this._userName + "<br />" + "UserAge : " + this._userAge + "<br />" + "userScore : " + this._userScore + " offLineSpace : " + this._offLineSpace + "<br/>" + "level : " + this._level;
    return str_tmp;
};
 
var member = new Member('070101061', '马韶华', '22', 93, 1, 1);
alert(member.cloudPlay());
alert(member.offLineDownload());
alert(member.shareResource());
alert(member.downloadResource());
alert(member.showInfo());

2）优雅方式：

var Member = Class.create();
var repeater = new User();
 
Object.prototype.extend=function(obj){
     for(var item in obj){
         this[item]=obj[item];
     }
};
 
var fn = {
    initialize : function(userId, userName, userAge, userScore, offLineSpace, level) {
        this._offLineSpace = offLineSpace;
        this._level = level;
        //初始化基类参数
        User.prototype.initialize.call(this, userId, userName, userAge, userScore);
    },
 
    //添加public方法，会员类有权限使用云点播
    cloudPlay : function() {
        return "Member类：云点播";
    },
 
    //添加public方法，会员类有权限使用离线下载
    offLineDownload:function() {
        return "Member：离线下载";
    },
 
    //重写分享方法,相当于override abstract(或virtual)方法
    shareResource:function() {
        this._userScore += 10;
        return "Member类：分享资源";
    },
 
    //重写显示用户的方法,相当于override abstract(或virtual)方法
    showInfo:function() {
        var str_tmp = "";
        str_tmp += "userId : " + this._userId + "<br/>" + "name : " + this._userName + "<br />" + "UserAge : " + this._userAge + "<br />" + "userScore : " + this._userScore + " offLineSpace : " + this._offLineSpace + "<br/>" + "level : " + this._level;
        return str_tmp;
    }
};
 
repeater.extend(fn);
Member.prototype = repeater;
 
var member = new Member('070101061', '马韶华', '22', 93, 1, 1);
alert(member.cloudPlay());
alert(member.offLineDownload());
alert(member.shareResource());
alert(member.downloadResource());
alert(member.showInfo());

3、第一种基础方式完整：

/*
* OOP javascript demo
* namespace OOP
* developing tools UltraEdit
* author 李检全
* email lijianquan07@gmail.com
* qq 55643287
* date 2012-02-05
*/
(function(win){
    if(!win[´OOP´])
        win[´OOP´]={};
 
    //申明User类，其中users为一个数组，数组中的数据是单个user的信息
    function User(userid,uname,uage,uscore){
        this._userid=userid;
        this._name=uname;
        this._age=uage;
        this._score=uscore;
    }
    /*对User类添加引用*/
    win[´OOP´][´User´]=User;
    //添加public 方法
    /*用户下载资源*/
    User.prototype.downloadResource=function(){
        return "User类：下载资源";
    };
    //添加public 方法
    /*分享资源（abstract或者virtual方法）*/
    User.prototype.shareResource=function(user){
        this._score+=5;
        return "User类：分享资源";
    };
    //添加public方法
    /*显示用户信息（abstract或者virtual方法）*/
    User.prototype.showInfo=function(){
        var str_tmp="";
        str_tmp+="userid:"+this._userid+"<br/>";
        str_tmp+="name:"+this._name+"<br/>";
        str_tmp+="age:"+this._age+"<br/>";
        str_tmp+="score:"+this._score+"<br/>";
        return str_tmp;
    };
    //定义会员类
    function Member(userid,uname,uage,uscore,offlineSpace,level){
        this._offlineSpace=offlineSpace;
        this._level=level;
        /*初始化基类参数*/
        User.call(this,userid,uname,uage,uscore);
    }
    win[´OOP´][´Member´]=Member;
    /*更改Member的prototype属性，以实现继承*/
    Member.prototype=new User();
    //添加public 方法
    //会员类有权限使用云点播
    Member.prototype.cloudPlay=function(){
        return "Member类：云点播";
    };
    //添加public 方法
    //会员类有权限使用离线下载
    Member.prototype.offlineDownload=function(){
        return "Member类：离线下载";
    };
    //相当于override abstract(或virtual)方法
    /*重写基类分享资源方法，假设计算积分方式不一样*/
    Member.prototype.shareResource=function(){
        this._score+=10;
        return "Member类：分享资源";
    };
    //相当于override abstract(或virtual)方法
    /*重写显示用户信息方法*/
    Member.prototype.showInfo=function(){
        var str_tmp="";
        str_tmp+="userid:"+this._userid+"<br/>";
        str_tmp+="name:"+this._name+"<br/>";
        str_tmp+="age:"+this._age+"<br/>";
        str_tmp+="score:"+this._score+"<br/>";
        str_tmp+="offline Space:"+this._offlineSpace+"<br/>";
        str_tmp+="level:"+this._level+"<br/>";
        return str_tmp;
    };
    /*使用场景函数*/
    function main(){
      var user=new User(´10000´,´david´,24,1000);
        var arr_tmp=new Array();
        arr_tmp.push("clas User");
        arr_tmp.push("===================================================");
        arr_tmp.push(user.showInfo());
        arr_tmp.push(user.downloadResource());
        arr_tmp.push(user.shareResource());
        arr_tmp.push("===================================================<br/><br/>");
 
        var member=new Member(´10001´,´beckham´,24,9000,"100Gb","十级");
        arr_tmp.push("class Member");
        arr_tmp.push("===================================================");
        arr_tmp.push(member.showInfo());
        arr_tmp.push(member.downloadResource());
        arr_tmp.push(member.cloudPlay());
        arr_tmp.push(member.offlineDownload());
        arr_tmp.push(member.shareResource());
        arr_tmp.push("===================================================");
        var tar_obj=document.getElementById("wrap");
        tar_obj.innerHTML=arr_tmp.join(´<br/>´);
    }
    win[´OOP´][´main´]=main;
    //执行结果
    window.onload=function(){
        main();
    };
 
})(window);

4、第二种优雅方式完整代码：

/*
* OOP javascript demo
* namespace OOP
* developing tools UltraEdit
* author 李检全
* email lijianquan07@gmail.com
* qq 55643287
* date 2012-02-05
*/
/*
============================================================
    注释请看OOP1.src.js，注释就不重写了。
============================================================
*/
(function(win){
    if(!win[´OOP´])
        win[´OOP´]={};
    var Class={
        create:function(){
            return function(){
                this.inital.apply(this,arguments);
            };
        }
    };
    /*定义User类*/
    var User=Class.create();
    win[´OOP´][´User´]=User;
    User.prototype={
        inital:function(userid,uname,uage,uscore){
            this._userid=userid;
            this._name=uname;
            this._age=uage;
            this._score=uscore;
        },
        downloadResource:function(){
            return "User类：下载资源";
        },
        shareResource:function(){
            this._score+=5;
            return "User类：分享资源";
        },
        showInfo:function(){
                var str_tmp="";
                str_tmp+="userid:"+this._userid+"<br/>";
                str_tmp+="name:"+this._name+"<br/>";
                str_tmp+="age:"+this._age+"<br/>";
                str_tmp+="score:"+this._score+"<br/>";
                return str_tmp;
        }
    };
    /*定义Member类*/
    var Member=Class.create();
    win[´OOP´][´Member´]=Member;
    var repeater=new User();
    Object.prototype.extend=function(obj){
        for(var item in obj){
            this[item]=obj[item];
        }
    };
    var fn={
        inital:function(userid,uname,uage,uscore,offlineSpace,level){
                    this._offlineSpace=offlineSpace;
                    this._level=level;
                    /*初始化基类参数*/
                    User.prototype.inital.call(this,userid,uname,uage,uscore);
        },
        cloudPlay:function(){
            return "Member类：云点播";
        },
        offlineDownload:function(){
            return "Member类：离线下载";
        },
        shareResource:function(){
            this._score+=10;
            return "Member类：分享资源";
        },
        showInfo:function(){
            var str_tmp="";
            str_tmp+="userid:"+this._userid+"<br/>";
            str_tmp+="name:"+this._name+"<br/>";
            str_tmp+="age:"+this._age+"<br/>";
            str_tmp+="score:"+this._score+"<br/>";
            str_tmp+="offline Space:"+this._offlineSpace+"<br/>";
            str_tmp+="level:"+this._level+"<br/>";
            return str_tmp;
        }
    };
    repeater.extend(fn);
    Member.prototype=repeater;
    function main(){
      var user=new User(´10000´,´david´,24,1000);
        var arr_tmp=new Array();
        arr_tmp.push("clas User");
        arr_tmp.push("===================================================");
        arr_tmp.push(user.showInfo());
        arr_tmp.push(user.downloadResource());
        arr_tmp.push(user.shareResource());
        arr_tmp.push("===================================================<br/><br/>");
 
        var member=new Member(´10001´,´beckham´,24,9000,"100Gb","十级");
        arr_tmp.push("class Member");
        arr_tmp.push("===================================================");
        arr_tmp.push(member.showInfo());
        arr_tmp.push(member.downloadResource());
        arr_tmp.push(member.cloudPlay());
        arr_tmp.push(member.offlineDownload());
        arr_tmp.push(member.shareResource());
        arr_tmp.push("===================================================");
        var tar_obj=document.getElementById("wrap");
        tar_obj.innerHTML=arr_tmp.join(´<br/>´);
    }
    win[´OOP´][´main´]=main;
    //执行结果
    window.onload=function(){
        main();
    };
 
})(window);

转载于:https://my.oschina.net/shma1664/blog/316859