浅谈JS中的继承

前言

JS 是没有继承的，不过可以曲线救国，利用构造函数、原型等方法实现继承的功能。

 var o=new Object();

其实用构造函数实例化一个对象，就是继承，这里可以使用Object中的所有属性与方法。那么为什么能访问Object对象的方法，其实访问的是其原型对象的方法，所有的方法都是放在原型中而不是类中。

 console.log(o.__proto__ === Object.prototype) // true  继承的本质
 console.log(o.__proto__ === Object);
 console.log(Object.__proto__ === Function.prototype);
 console.log(Function.prototype.__proto__ === Object.prototype);
 console.log(Number.__proto__ === Function.prototype);

object是万物祖先，Everything is object 嘛。

1、内置对象都继承自object

 var myNumber = new Number(10); //实例化一个数字对象

字符串对象，其实是String对象的一个实例化

 var s = ‘str’;

除了可以访问自身属性方法，还能访问父类属性方法

 console.log(s.toUpperCase());
 console.log(s.toString());

2、自定义对象的继承

 // 父类
     var Person = function(){
       this.name='AV老师';
       this.test='测试中的毕福剑';
     }
     Person.prototype={
       say:function(){
         console.log('呀买碟');
       }
     }
     // 构造函数
     var Canglaoshi = function(name,age,cup){
       this.name=name;
       this.age=age;
       this.cup=cup;
     }
     // 继承person,则拥有person原型中的方法
     Canglaoshi.prototype=new Person();
     Canglaoshi.prototype.ppp=function(){
       console.log('啪啪啪');
     }
     // 苍老师拥有了person中的方法
     var xiaocang=new Canglaoshi('空空',18,'E');
     xiaocang.say();
     console.log(xiaocang.name);
     console.log(xiaocang.age);
     console.log(xiaocang.cup);
     console.log(xiaocang.test);

3、自定义对象继承的原型链演示

 +(function() {
       //父类
       function SuperParent() {
         this.name = 'mike';
       }

       //子类继承父亲 - 二次继承：
       function Parent() {
         this.age = 12;
       }
       Parent.prototype = new SuperParent(); //通过原型，形成链条

       var parent = new Parent();
       console.log("测试父亲可以访问爷爷属性：" + parent.name);
       console.log("测试父亲可以访问自己的属性：" + parent.age);

       //继续原型链继承 - 三次继承
       function Child() { //brother构造
         this.weight = 60;
       }
       Child.prototype = new Parent(); //继续原型链继承

       //原型链测试2
       //儿子集成爷爷
       var child = new Child();
       console.log("测试儿子可以访问爷爷的属性：" + child.name); //继承了Parent和Child,弹出mike
       console.log("测试儿子可以访问父亲的属性：" + child.age); //弹出12
       console.log("测试儿子可以访问自己独特的属性：" + child.weight); //弹出12

       //原型链测试
       //爷爷可以访问Object中的方法
       var test = new SuperParent();
       console.log(test.name);
       console.log(test.toString());
       //访问链： SuperParent构造对象--》SuperParent原型对象--》Object对象--》Obect原型对象（找到toString方法）--》null

       console.log(child.name);
       //原型链：首先访问Child构造函数，发现没有name属性--》寻找__proto__，判断起指针是否为空--》指向Child原型函数，寻找有没有name属性--》
       //---》没有找到，则判断其__proto__属性是否为null，如果不为null，继续搜索--》找到parent对象，检查是否有name属性，没有。。。。
     })()

4、构造函数继承

 +(function() {
       function People() {
         this.race = '人类';
       }
       People.prototype = {
         eat: function() {
           alert('吃吃吃');
         }
       }

       /*人妖对象*/
       function Shemale(name, skin) {
         People.apply(this, arguments); // 用call也是一样的，注意第二个参数
         this.name = name;
         this.skin = skin;
       }
       //实例化
       var zhangsan = new Shemale('张三', '黄皮肤')
       console.log(zhangsan.name); //张三
       console.log(zhangsan.skin); //黄皮肤
       console.log(zhangsan.race); //人类
     })()

5、组合继承

 +(function() {
       function Person(name, age) {
         this.name = name;
         this.age = age;
       }
       Person.prototype.say = function() {}

       function Man(name, age, no) {
         /*会自动调用Person的方法，同时将name age传递过去*/
         Person.call(this, name, age);
         //自己的属性
         this.no = no;
       }
       Man.prototype = new Person();

       var man = new Man("张三", 11, "0001");
       console.log(man.name);
       console.log(man.age);
       console.log(man.no);
     })()

6、拷贝继承

 <script>
     +(function() {
       var Chinese = {
         nation: '中国'
       };
       var Doctor = {
         career: '医生'
       };
       //    请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生"的对象？
       //    这里要注意，这两个对象都是普通对象，不是构造函数，无法使用构造函数方法实现"继承"。
       function extend(p) {
         var c = {};
         for (var i in p) {　　　　　
           c[i] = p[i];　　　　
         }
         c.uber = p;
         return c;
       }
       var Doctor = extend(Chinese);
       Doctor.career = '医生';
       alert(Doctor.nation); // 中国
     })()
   </script>

7、寄生组合继承

 <script>
     +(function() {
       /*继承的固定函数*/
       function inheritPrototype(subType, superType) {
         var prototype = Object(superType.prototype);
         prototype.constructor = subType;
         subType.prototype = prototype;
       }

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

       function Student(name, age) {
         Person.call(this, name);
         this.age = age;
       }

       inheritPrototype(Student, Person);
       var xiaozhang = new Student('小张', 20);
       console.log(xiaozhang.name)
     })()
   </script>

8、使用第三方框架实现继承

  <script src='simple.js'></script>
   <!-- 使用的第三方框架simple.js -->
   <script>
     +(function() { < script >
         var Person = Class.extend({
           init: function(age, name) {
             this.age = age;
             this.name = name;
           },
           ppp: function() {
             alert("你懂的");
           }
         });
       var Man = Person.extend({
         init: function(age, name, height) {
           this._super(age, name);
           this.height = height;
         },
         ppp: function() {
           /*调用父类的同名方法*/
           this._super();
           /*同时又可以调用自己的方法*/
           alert("好害羞 -，- ");
         }
       });

       var xiaozhang = new Man(21, '小张', '121');
       xiaozhang.ppp();
     })()