javascript种与对象结合理解jsUI框架

javascript类与对象结合理解jsUI框架以下代码都是网上找的,便于理解与方便查找学习之用!!构造函数方式func

javascript类与对象结合理解jsUI框架
以下代码都是网上找的,便于理解与方便查找学习之用!!

构造函数方式

function Car(sColor,iDoors,iMpg){

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.showColor = function(){

alert(this.color);

}

}

var Car1 = new Car("red",4,23);

Car1.showColor();

原型方式+构造方法

function Car(name){

this.name = name;

}

Car.prototype.color ="blue";

Car.prototype.doors = 4;

Car.prototype.mpg = 25;

Car.prototype.showColor = function(){

alert(this.color);

}

var Car1 = new Car();

car1.showColor();

function Person(name){

this.name = name;

}

Person.prototype={

printName:function(){

alert(this.name);

}

}

var person = new Person("kk");

person.printName();

动态原型方式----完美解决方案

function Car(sColor){

this.color = sColor;

if(Car.prototype.say =="undefined"){

Car.prototype.say = function(){

alert(this.color);

}

}

}

var Car1 = new Car("111");

Car1.say();

继承的实现方式

1、对象冒充

function Car(name){

this.name = name;

this.say = function(){

alert(this.name);

}

}

function bigCar(name){

this.inherit = Car;

this.inherit(name);

delete this.inherit;

this.color = function(){

alert("I am bigCar");

}

}

var car = new bigCar("futian");

car.say();

2、利用call()和apply()冒充

function Person(name,age){

this.name = name;

this.age = age;

this.say = function(){

alert(this.name);

}

}

function WhitePeople(name,age){

People.call(this,name,age);//call方式以多个参数进行传值

People.apply(this,[name,age]);//apply方式以数组方式进行传值

this.color=function(){

alert("i am");

}

}

var p = new WhitePeople("wang",34);

p.say();

p.color();

JS 实现 创建类、继承、方法添加、对象克隆、数组封装操作

一.对象的创建以及方法的添加





/** 1.类创建,可继承

* Parent,父类

*newparams,当前新创建类的参数集合,包括属性和方法

*/

window.Class = {

    Create: function (parent,newparams) {

        var NewFun=function () {

            if (typeof this.initialize != 'undefined') {

                this.initialize.apply(this, arguments);

            }

        }

        if(parent!=null){

            if (typeof parent == 'function') {

                NewFun.prototype = new parent(Array.prototype.slice.apply(arguments, [1]));

                NewFun.prototype.constructor = NewFun;

                NewFun._parent = parent;

                /*                 * 实现调用父类函数的方法

                 * <code>

                 * this.Parent('callFunction');

                 * </code>

                 * @param string name    类名

                 * @return function

                 */                NewFun.AddMethod('Parent', function (name) {

                    var func = NewFun.constructor.prototype[name];

                    if (func == NewFun[name]) {

                        func = parent.prototype[name];

                    }

                    return func.apply(NewFun, Array.prototype.slice.apply(arguments, [1]));

                });

            }

            else{

                /*继承出错*/            }

        }

        /* 合并属性和方法 */

        if (typeof newparams == 'object') {

            for (var param in newparams) {

                NewFun.AddMethod(param, newparams[param]);

            }

        }

        return NewFun;

    }

}

/* * 2.向类中添加方法或属性

* @param string name    函数名

* @param function func        函数主体

* @return function

*/Function.prototype.AddMethod = function (name, func) {

    this.prototype[name] = func;

    return this;

}

.类实例化调用示例:

/*1.先创建MyClass 类*/

    var MyClass=Class.Create(null,

        {

            Type:"LWLChart",

            Value:13,

            show:function(){

                alert(this.Value);

            },

            hiden:function(){

                alert("隐藏");

            }

        }

    );

    /*2.新类 CMyExtClass 继承自 MyClass,并新增属性和方法*/

    var CMyExtClass = Class.Create(MyClass,

        {

            Name:"LWL",

            Age:22,

            show:function(){

                alert(this.Type);

            },

            ShowAg:function(){

                    alert(this.Age);

                }

            }

    );

    /*3.实例化 类CMyExtClass ,并调用相应方法、属性赋值*/

    var newclass=new CMyExtClass();

    newclass.show();

    newclass.hiden();

    newclass.Age=newclass.Age-1;

    newclass.ShowAg();



二.对象克隆



/*3.克隆

*clone:克隆方法,未实现

*cloneObject:克隆对象 o:需要克隆的对象  */

var CCloneable = Class.Create(null,{

    /*     * 复制类

     * @return object

     */    clone : function () {

       return null;

    },

    cloneObject:function (o) {

        if (o instanceof CCloneable) {

            // 如果继承自CCloneable则执行自身的考虑操作

            return o.clone();

        }

        var type = typeof(o);

        switch (type) {

            case 'undefined' :

            case 'boolean' :

            case 'string' :

            case 'number' : return o;

            case 'function' : return o;

            case 'object' :

                if (o == null) {

                    return null;

                }

                if (o instanceof Date) {

                    return new Date(o.getTime());

                }

                if (o instanceof Number) {

                    return new Number(o.valueOf());

                }

                if (o instanceof Boolean) {

                    return new Boolean(o.valueOf());

                }

                if (o instanceof Error) {

                    return new Error(o.number, o.message);

                }

                if (o instanceof Array) {

                    return o.concat([]);

                }

                if (o instanceof Object) {

                    var oo = {};

                    for (var k in o) {

                        oo[k] = o[k];

                    }

                    return oo;

                }

            default : break;

        }

        return null;

    }

});





三.数组封装,添加、移除、查找、克隆方法实现

/*4.数组操作,包括:

*1.初始化 initialize()

*2.输出数组,toArray()

*3.获得元素所处的位置,indexOf(o)

*4.获得元素在数组中最后的位置,lastIndexOf(o)

*5.添加元素,add

*6.添加多个元素,addAll

*7.移除元素,removeAt(i),i:需要移除的元素索引值

*8.移除元素,remove(o),o:需要移除的元素值

*9.判断元素是否存在,contains(o)

*10.清除链表,clear

*11.当前数组元素个数,size

*12.根据索引获得相应元素,get(i)

*13.对相应索引位置的元素进行赋值,set(i,o)

*14.复制当前数组对象并返回,clone

* */

var CArrayList = Class.Create(CCloneable,{

    /* 内置数组 */    array : [],

    /*     * 构造函数

     */    initialize : function () {

        this.array = [];

    },

    /*     * 输出数组

     * @return Array

     */    toArray : function () {

        return this.array;

    },

    /*     * 从前面获得对象所在数组位置

     * @param object o    要寻找的对象

     * @return int

     */    indexOf : function (o) {

        var len = this.array.length;

        for (var i = 0; i < len; i++) {

            if (this.array[i] == o) {

                return i;

            }

        }

        return -1;

    },

    /*     * 从后面获得对象所在数组位置

     * @param object o 要寻找的对象

     * @rerturn int

     */    lastIndexOf : function (o) {

        var len = this.array.length;

        for (var i = len; i >= 0; i--) {

            if (this.array[i] == o) {

                return i;

            }

        }

        return -1;

    },

    /*     * 添加元素

     * @param object arg1 被插入的对象

     * @param object arg2    插入的对象

     */    add : function (arg1, arg2) {

        if (arguments.length == 1) {

            // 如果参数为1则直接在链表末尾插入对象

            var len = this.array.length;

            this.array[len] = arg1;

        } else {

            // 插入对象

            var len1 = this.array.length;

            var a1 = this.array.slice(0, arg1);

            var a2 = this.array.slice(arg1, len);

            var len2 = a1.length;

            a1[len2] = arg2;

            this.array = a1.concat(a2);

        }

    },

    /*     * 添加多个元素

     * @param Array a    元素数组

     */    addAll : function (a) {

        if (a instanceof Array) {

            // 添加的元素是数组

            this.array = this.array.concat(a);

        } else if (typeof(a.toArray) == 'function'

            && ((a = a.toArray()) instanceof Array)) {

            // 添加的元素是链表

            this.array = this.array.concat(a);

        } else {

            throw new CException('参数错误', '添加链表的时候参数出错');

        }

    },

    /*     * 移除元素

     * @param int i    索引值

     */    removeAt : function (i) {

        var len = this.array.length;

        if (i < 0 || i >= len) {

            return null;

        }

        var o = this.array[i];

        this.array = this.array.slice(0, i).concat(this.array.slice(i + 1, len));

        return o;

    },

    /*     * 移除元素

     * @param object o    元素

     */    remove : function (o) {

        var i = this.indexOf(o);

        if (i == -1) {

            return this;

        }

        return this.removeAt(i);

    },

    /*     * 验证元素是否存在

     * @return boolean

     */    contains : function (o) {

        return this.indexOf(o) != -1;

    },

    /*     * 清除链表

     */    clear : function () {

        this.array.length = 0;

    },

    /*     * 获得链表大小

     * @return int

     */    size : function () {

        return this.array.length;

    },

    /*     * 获得元素

     * @param int i        索引值

     * @return object

     */    get : function (i) {

        var size = this.size();

        if (i >= 0 && i < size) {

            return this.array[i];

        } else {

            return null;

        }

    },

    /*     * 设置元素

     * @param int i        索引值

     * @param ojbect    元素

     */    set : function (i, o) {

        var size = this.size();

        if (i >= 0 && i < size) {

            this.array[i] = o;

        }

    },

    /*     * 复制链表(重构)

     */    clone : function () {

        var o = new CArrayList();

        o.addAll(this.array);

        return o;

    }

});

数组对象实例化,使用



var NewArray=new CArrayList();

NewArray.add(12);

NewArray.addAll([24,35,11,20,15]);

NewArray.remove(24);

NewArray.removeAt(0);

来源:http://www.verydemo.com/demo_c98_i2658.html