关于面向对象----继承

Posted 2020-08-20

接触面向对象许久了，对于继承这一块也确实琢磨了一段时间，搜集各种资料和网站，也未能得到使自己满意的，并能快速理解的继承知识，于是对他们归类，并得出自己的总结。

　　先说说继承是什么吧？也许我们最早接触有关继承的应该是“遗产”？？也许电视剧看多了，总有家族为了这玩意儿整的你死我活，确实听看不下去的哈，但是对于咱大JS而言，可就变得十分和蔼，可亲。毕竟没有人来争夺，也不会有任何事故，最多来些许bug等等。废话不多说，进入正题！！

1、扩展原型对象继承：往原型对象中添加新的属性。

　　这应该是最基础的继承了吧，往对象中添加新的属性和方法，实例就可以共享了。

直接上例子：

　　　　function Person(){  };

　　　　Person.prototype.say = function(){};

　　　　var p1 = new Person();

　　　　====》此时，p1就含有say()这个方法了;

2、替换原型对象继承：需要给实例添加很多方法，一个一个往默认的原型对象中进行扩展会很麻烦，此时我们就可以把默认的原型对象替换掉，一起添加。

　　例子：

　　　　 function Bird(){};

　　　　Bird.prototype.say = function(){};

　　　　 Bird.prototype={

　　　　　　　　constructor:Bird,

　　　　　　　　c1:function(){},

　　　　　　　　c2:function(){},

　　　　　　　　c3:function(){}

　　　　}；//新的原型对象

　　　　var maque = new Bird();

　　　　console.log(maque);

　　　　console.log(maque.constructor);

　　　　//通过控制台输出，你会发现原来的say方法不存在了，取而代之的是新的c1、c2、c3方法

　　

3、混入继承：将一个对象的功能（属性、方法）拷贝到另一个对象中。

　　var o = {name:"王五"，age:30};

　　var o2 = {gender:"男"};

　　//遍历o的功能，将这些功能添加到o2中去

　　　　for(var key in o) {

　　　　　　o2[key] = o[key];

　　　　}

　　console.log(o2);

4、原型+混入继承

　　function Man(){};

　　//这里将上述的混入继承封装成了一个函数如下：

　　function extend(target, source) {

　　　　for(var key in source) {

　　　　　　var value = source[key];

　　　　　　target[key] = value;

　　　　}

　　　　return value;

　}

　　//往Man的原型中扩展多个方法（同一对象）,调用上述方法。

　　extend(Man.prototype, {

　　　　age:function(){},

　　　　height:function(){},

　　　　nation:function(){}

});

　　　　var hMan = new Man();

　　　　console.log(hMan.age());

5、原型链继承：创建一个对象，让这个对象继承自另一个对象

　　　　//想要创建一个对象，就需要一个媒介（构造函数）；

　　　　function F(){};

　　　　var o2 = {age:30};

　　　　//设置原型对象

　　　　F.prototype=o2；

　　　　var o1 = new F();

//封装一下就是如下这个样子

　　　　function create(o2) {

　　　　　　function F(){};

　　　　　　//设置原型对象

　　　　　　F.prototype = o2;

　　　　　　//返回创建的新对象

　　　　　　return new F();

　　　　}

　　　　

6、原型链继承：任何对象都是继承自原型对象，原型对象也有他自己的原型对象。（学好原型链）

7、借用构造函数继承：在子类构造函数的内部调用超类型构造函数，可以通过apply（）和call（）方法，在新创建的对象上执行构造函数。

　　function SuperType() {

　　　　this.colors = { "red", "blue","green"};

　　}

　　function SubType(){

　　　　//继承了SuperType

　　　　SuperType.call(this);

　　}

　　var instance1 = new SubType();

　　instance1.colors.push("black");

　　console.log(instance1.colors); //red,blue,green,black

 

　　var instance2 = new SubType();

　　console.log(instance2.colors);//red,blue,green