浅谈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();
    })()