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