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;
}
<!--//继承方法-->
<!--SubType.prototype = new SuperType();-->
<!--SubType.prototype.construtor = SubType;-->
<!--SubType.prototype.sayAge = function(){-->
<!--alert(this.age);-->
<!--};-->
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
