a

【JS-task4】JS中的面向对象编程

小课堂【深圳219期】

分享人:钟楚炯

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是面向对象编程?

面向对象编程是一种通用思想,主要概念为: 把一组数据结构和处理它们的方法组成对象,把相同行为的对象归纳为类,通过类的封装隐藏内部细节,通过继承实现类的泛化,通过多态实现基于对象类型的动态分派。

Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象

封装

继承

2.知识剖析

如何把“属性”(property)和"方法"(method),封装成一个对象?

一、 生成实例对象的原始模式

假定我们把猫看成一个对象,它有"名字"和"颜色"两个属性。

                    
                         var Cat = {
                            name : '',
                            color : ''
                        }
                    
                

现在,我们需要根据这个原型对象的规格(schema),生成两个实例对象。

                    
                         var cat1 = {}; // 创建一个空对象
                           cat1.name = "大毛"; // 按照原型对象的属性赋值
                           cat1.color = "黄色";
                        var cat2 = {};
                            cat2.name = "二毛";
                           cat2.color = "黑色";
                    
                

好了,这就是最简单的封装了,把两个属性封装在一个对象里面。但是,这样的写法有两个缺点,一是如果多生成几个实例,写起来就非常麻烦;二是实例与原型之间,看不出有什么联系。

二、 原始模式的改进--工厂模式

我们可以写一个函数,解决代码重复的问题。

                    
                         function Cat(name,color) {
                              return {
                                name:name,
                                color:color
                              }
                            }
                    
                

然后生成实例对象,就等于是在调用函数:

                    
                         var cat1 = Cat("大毛","黄色");
                        var cat2 = Cat("二毛","黑色");
                    
                

这种方法的问题依然是,cat1和cat2之间没有内在的联系,不能反映出它们是同一个原型对象的实例。

三、 构造函数模式

为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。

所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。

比如,猫的原型对象现在可以这样写,

                    
                         function Cat(name,color){
                          this.name=name;
                          this.color=color;
                        }
                    
                

我们现在就可以生成实例对象了。

                    
                         var cat1 = new Cat("大毛","黄色");
                        var cat2 = new Cat("二毛","黑色");
                        alert(cat1.name); // 大毛
                        alert(cat1.color); // 黄色
                    
                

四、构造函数模式的问题

构造函数方法很好用,但是存在一个浪费内存的问题。

请看,我们现在为Cat对象添加一个不变的属性type(种类),再添加一个方法eat(吃)。那么,原型对象Cat就变成了下面这样:

                    
                         function Cat(name,color){
                          this.name = name;
                          this.color = color;
                          this.type = "猫科动物";
                          this.eat = function(){alert("吃老鼠");};
                        }
                    
                

还是采用同样的方法,生成实例

                    
                         var cat1 = new Cat("大毛","黄色");
                        var cat2 = new Cat ("二毛","黑色");
                        alert(cat1.type); // 猫科动物
                        cat1.eat(); // 吃老鼠
                    
                

表面上好像没什么问题,但是实际上这样做,有一个很大的弊端。那就是对于每一个实例对象,type属性和eat()方法都是一模一样的内容,每一次生成一个实例,都必须为重复的内容,多占用一些内存。这样既不环保,也缺乏效率。

五、 Prototype模式

Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。 这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。

                    
                         function Cat(name,color){
                          this.name = name;
                          this.color = color;
                        }
                        Cat.prototype.type = "猫科动物";
                        Cat.prototype.eat = function(){alert("吃老鼠")};
                    
                

然后,生成实例。

                     
                            var cat1 = new Cat("大毛","黄色");
                          var cat2 = new Cat("二毛","黑色");
                          alert(cat1.type); // 猫科动物
                          cat1.eat(); // 吃老鼠
                    
                

这时所有实例的type属性和eat()方法,其实都是同一个内存地址,指向prototype对象,因此就提高了运行效率。

3.常见问题

如何实现构造函数的继承?

4.解决方案

比如,现在有一个"动物"对象的构造函数。

                     
                        function Animal(){
                           this.species = "动物";
                       }
                    
                

还有一个"猫"对象的构造函数。

                     
                        function Cat(name,color){
                           this.name = name;
                           this.color = color;
                        }
                    
                

怎样才能使"猫"继承"动物"呢?

一、 prototype模式

如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了。

                     
                        Cat.prototype = new Animal();
                       Cat.prototype.constructor = Cat;
                       var cat1 = new Cat("大毛","黄色");
                       alert(cat1.species); // 动物
                    
                

任何一个prototype对象都有一个constructor属性,指向它的构造函数。

二、 直接继承prototype

第二种方法是对第二种方法的改进。由于Animal对象中,不变的属性都可以直接写入Animal.prototype。所以,我们也可以让Cat()跳过 Animal(),直接继承Animal.prototype。 现在,我们先将Animal对象改写:

                     
                         function Animal(){ }
                        Animal.prototype.species = "动物";
                    
                

然后,将Cat的prototype对象,然后指向Animal的prototype对象,这样就完成了继承。

                     
                         Cat.prototype = Animal.prototype;
                        Cat.prototype.constructor = Cat;
                        var cat1 = new Cat("大毛","黄色");
                        alert(cat1.species); // 动物
                    
                

与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。 缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。

三、 利用空对象作为中介

由于"直接继承prototype"存在上述的缺点,所以就有第三种方法,利用一个空对象作为中介。

                     
                        var F = function(){};
                          F.prototype = Animal.prototype;
                          Cat.prototype = new F();
                          Cat.prototype.constructor = Cat;
                    
                

F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。

我们将上面的方法,封装成一个函数,便于使用。

                     
                        function extend(Child, Parent) {
                          var F = function(){};
                          F.prototype = Parent.prototype;
                          Child.prototype = new F();
                          Child.prototype.constructor = Child;
                        }
                    
                

使用的时候,方法如下

                     
                        extend(Cat,Animal);
                       var cat1 = new Cat("大毛","黄色");
                       alert(cat1.species); // 动物
                    
                

5.编码实战

6.扩展思考

面向过程到面向对象思维如何转变? 当我们习惯了面向过程编程时,发现在程序过程中到处找不到需要面向对象的地方,最主要的原因,是思维没有转变。程序员通常在拿到一个需求的时候,第一个反应就是如何实现这个需求,这是典型的面向过程的思维过程,而且很快可能就实现了它。而面向对象,面对的却是客体,第一步不是考虑如何实现需求,而是进行需求分析,就是根据需求找到其中的客体,再找到这些客体之间的联系。

7.参考文献

参考:阮一峰——Javascript 面向对象编程

8.更多讨论

感谢大家观看

鸣谢:包腾飞 BY : 钟楚炯

Contact GitHub API Training Shop Blog About © 2016 GitHub, Inc. Terms Privacy Security Status He