JavaScript中的面向对象

今天聊点儿高深的:面向对象编程
有关JavaScript面向对象的知识可以参考 “李炎恢”老师的《JavaScript****》的”面向对象与原型”以及”匿名函数与闭包”两章的内容.我现在做个简短的总结:

1创建一个空对象

//JavaScript 中函数就是对象
//一般来说 创建对象时 名称首字母使用大写 创建函数或方法时 名称首字母使用小写
var Box = function()
{

};

2使用组合构造函数 + 原型模式 创建对象

//不需要共享的使用构造函数 一般来说 属性是不需要共享的
var Box = function(name,age)                       
{
    //基本数据类型
    this.name = name;                              
    this.age = age;
    //引用数据类型
    this.arr = ["哥哥","姐姐","妹妹"];               
};
//需要共享的使用原型模式  一般来说 方法都是需要共享的
Box.prototype = 
{
    //将对象的constructor强制指向Box
    constructor:Box,                                
    run:function()                                  
    {
        return this.name + this.age + this.arr;
    }
}

3对象的继承

1通过原型链继承

var Box = function()
{

};
//通过原型链 将Box继承自 createjs的Shape类
Box.prototype = new createjs.Shape();

缺点是: 没办法获得父类构造函数中的参数 ,无法实现传参

2通过对象冒出函数来实现传参的问题

var Box = function(graphics)
{
    //通过call方法进行对象冒充
    createjs.Shape.call(this,graphics)
};

缺点是 原型中的方法无法继承

3对象冒充和原型链 一起使用

var Box = function(graphics)
{
    //通过call方法进行对象冒充
    createjs.Shape.call(this,graphics)
};
//通过原型链 将Box继承自 createjs的Shape类
Box.prototype = new createjs.Shape();

4创建一个对象 模板

这里使用了自执行表达式

(function(){})()

也就是相当于代码执行到这里时,自动调用了一次该函数

(function(window)
{
    // 构造函数   str 参数
    var MyClass = function(str)
    {
        //引用类型变量  （除了基础数据类型，剩下的都是引用类型 数组Array 对象 Object）
        this.arr = [1,2,3]; 
        //基本数据类型   String Number Boolean undefined null
        this.str = str;      

        //初始化
        this.initialize();
    }

    //原型对象
    MyClass.prototype = 
    {
        //将对象 的constructor 强制转化为 对象本身
        constructor:MyClass,
        //这里写方法 注意方法的后面 逗号 ","
        initialize:function()
        {
            console.log("initialize");
        },
        move:function()
        {
            console.log("move");
        }

    }

    window.MyClass = MyClass;
})(window)

5创建一个继承的对象 模板

(function(window)
{
    // 构造函数  graphics 参数
    var MyClass = function(graphics)
    {
        this.arr = [1,2,3]; //引用类型变量  （除了基础数据类型，剩下的都是引用类型 数组Array 对象 Object）
        this.str = "";      //基本数据类型   String Number Boolean undefined null
        //对象冒充 继承
        createjs.Shape.call(this,graphics)
        //初始化
        this.initialize();
    }

    //继承关系 原型链继承
    var MyClass_p = MyClass.prototype = new createjs.Shape();

    MyClass_p.initialize = function()
    {
        //调用父类方法
        MyClass_p.graphics.clear();
        MyClass_p.graphics.beginFill("#00ff00");
        MyClass_p.graphics.drawRect(0,0,100,200);
        MyClass_p.graphics.endFill();
    }

    //定义方法
    MyClass_p.move = function()
    {
        console.log("move")
    }

    window.MyClass = MyClass;
})(window)