JS中的面向对象编程

最新推荐文章于 2018-07-16 21:03:11 发布

menggx1

最新推荐文章于 2018-07-16 21:03:11 发布

阅读量115

点赞数

分类专栏： it

本文链接：https://blog.csdn.net/menggx1/article/details/80143128

版权

it 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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模型去实现它。这种思路的转变，可能需要个过程。