JS中的面向对象编程

JS中的面向对象编程

小课堂

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

什么是对象?

ECMA-262把对象定义为:"无序属性的集合,其属性可以包括基本值、对象或者函数",相当于说对象是一组没有特定顺序的值。 对象的每一个属性和方法都有一个名字,每个名字都映射到一个值。


创建对象

创建一个Object实例并添加属性和方法                 

var person = new Object();

person.name = "Nicholas";

person.age = 29;

person.job = "doctor";

person.sayName = function(){

                                    alert(this.name);

};

var person = {

            name:"Nicholas";

age:29;

job:"doctor";

sayName{

alert(this.name)

}

}


什么是面向对象编程?

面向对象编程是一种通用思想,主要概念为: 把一组数据结构和处理它们的方法组成对象(object), 把相同行为的对象归纳为类(class),通过类的封装(encapsulation)隐藏内部细节, 通过继承(inheritance)实现类的特化(specialization)/泛化(generalization),

                        通过多态(polymorphism)实现基于对象类型的动态分派(dynamic dispatch)。


为什么要面向对象编程

面向对象是为了解决系统的可维护性,可扩展性,可重用性:


1.数据和方法(方法可以理解为函数)被封装在一起,这样做改动的时候对整个程序的影响不大。 2.通过继承减少代码的冗余。 3.易扩展

2.知识剖析

面向对象的特征详解

封装:把属性和方法储存在到对象内部

继承:子类继承父类,可以继承父类的方法及属性,实现了多态以及代码的重用,因此也解决了系统的重用性和扩展性,但是继承破坏了封装.

多态:接口的多种不同的实现方式即为多态。接口是对行为的抽象.方法不变,通过接收的参数变化,来实现多态。

如何封装一个对象

构造函数模式                

function Cat(name,color){

                                        this.name = name;

                                        this.color = color;

                                        this.type = "猫科动物";

                                        this.eat = function(){alert("吃老鼠");};

                                      }

                                    varcat1 = newCat("大毛","黄色");

                                    alert(cat1.color);  //  黄色

构造函数模式存在的问题?如何改进?


问题:每个属性和方法都要在每个实例上重新创建一遍,造成内存和资源的浪费

Prototype模式

把那些不变的属性和方法,直接定义在prototype对象上                  

function Cat(name,color){

                                        this.name = name;

                                        this.color = color;

                                      }

                                      Cat.prototype.type = "猫科动物";

                                      Cat.prototype.eat = function(){alert("吃老鼠")};

                                    varcat1 = newCat("大毛","黄色");

                                      varcat2 = newCat("二毛","黑色");

                                      alert(cat1.type); // 猫科动物

                          cat1.eat(); // 吃老鼠

如何理解原型

3.常见问题

如何实现构造函数的继承

4.解决方案

采用"拷贝"方法实现继承。

子类构造函数内部调用父类构造函数,使用apply()和call()方法在新建的对象上执行构造函数

5.编码实战                   

function Animal(){}

                                    Animal.prototype.species = "动物";

                                    Animal.prototype.hi="hello";

                                    function Cat(name,color){

                                    this.name = name;

                                    this.color = color;

}

                                    function extend2(Child, Parent) {

                                    varp = Parent.prototype;

                                    varc = Child.prototype;

                                    for(vari inp) {

c[i] = p[i];

                                    console.log(i);            species hi

}

}

extend2(Cat, Animal);

                                    varcat1 = newCat("大毛","黄色");

                                    alert(cat1.species); // 动物                   

function SuperType(){

                                      this.colors=["red","blue","green"]

}

                                    function SubType(){

                                    SuperType.call(this);

}

                                  varinstance1 = newSubType();

                                  instance1.colors.push("black");

alert(instance1.colors);

                                  varinstance2 = newSubType();

alert(instance2.colors);


构造函数继承的缺点

方法都在构造函数中定义,函数的复用性就是个问题,因此构造函数的继承很少单独使用

组合继承

把原型链继承和构造函数继承组合到一起,发挥二者之间的长处                   

function SuperType(name){

                    this.name = name;

                    this.colors=["red","blue","green"]

}

                SuperType.prototype.sayName =function(){

                    alert(this.name);

};

                function SubType(name,age){

                    SuperType.call(this,name);  //继承属性

this.age = age;

}

                //继承方法

SubType.prototype = newSuperType();

SubType.prototype.construtor = SubType;

                SubType.prototype.sayAge = function(){

                    alert(this.age);

};

                varinstance1 = newSubType("wang",29);

                instance1.colors.push("black");

                alert(instance1.colors);//"red,blue,green,black"

instance1.sayName();//"wang"

instance1.sayAge();//29

varinstance2 = newSubType("baobao",2);

                alert(instance2.colors);//"red,blue,green"

instance2.sayName();//"baobao"

instance2.sayAge();//2

组合继承避免了原型链和构造函数的缺陷,融合了它们的优点,是一种比较常用的继承模式

组合继承调用两次父函数,衍生出寄生组合继承(理想模式)                  

function SuperType(name){

this.name = name;

this.colors=["red","blue","green"]

}

SuperType.prototype.sayName =function(){

alert(this.name);

};

function SubType(name,age){

                                SuperType.call(this,name);  //继承属性

                                this.age = age;

}

inheritPrototype(Subtype,Supertype);

SubType.prototype.sayAge = function(){

alert(this.age);

};

function inheritPrototype(Subtype,Supertype){

var prototype = object(SuperType.prototype);

prototype.constructor = SubType;

SubType.prototype = prototype;

}

               

var instance1 = new SubType("wang",29);

instance1.colors.push("black");

alert(instance1.colors);//"red,blue,green,black"

instance1.sayName();//"wang"

instance1.sayAge();//29

var instance2 = new SubType("baobao",2);

alert(instance2.colors);//"red,blue,green"

instance2.sayName();//"baobao"

instance2.sayAge();//2


这个函数接收两个参数:子类构造函数和父类构造函数。在函数的内部:第一步创建父类原型的一个副本。 第二步是为创建的副本添加consttructor属性,从而弥补因为因重写原型而失去的默认constructor属性,最后一步,将新建的对象(即副本)赋值给子类型的原型。

                    这样就可以调用inheritPrototype函数,去替换为子类原型赋值的语句了


6.扩展思考

面向过程到面向对象思维如何转变? 当我们习惯了面向过程编程时,发现在程序过程中到处找不到需要面向对象的地方,最主要的原因,是思维没有转变。 程序员通常在拿到一个需求的时候,第一个反应就是如何实现这个需求,这是典型的面向过程的思维过程,而且很快可能就实现了它。

                    而面向对象,面对的却是客体,第一步不是考虑如何实现需求,而是进行需求分析,就是根据需求找到其中的客体, 再找到这些客体之间的联系。因此面向过程和面向对象的思维转变的关键点,就是在第一步设计,拿到需求后, 一定先不要考虑如何实现它,而是通过UML建模,然后按照UML模型去实现它。这种思路的转变,可能需要个过程。


7.参考文献

参考一:

                    赵学智

参考二:

                    阮一峰

参考三:

                    编程思想:面向对象和面向过程

8.更多讨论

六种继承方式

鸣谢

感谢大家观看


今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院   

  “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

   这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。

   快来与我一起学习吧~http://www.jnshu.com/login/1/21109035

你可能感兴趣的:(JS中的面向对象编程)