JS原型继承与类的继承

  1.   我们先看JS类的继承
  1.  <!DOCTYPE html>
    <html> <head>
    <meta charset="UTF-8">
    <title>JS类的继承</title>
    </head> <body>
    /* -- 类式继承 -- */
    <script type="text/javascript">
    //先声明一个超类
    var Animal = function(name) {
    this.name = name;
    }
    //给这个超类的原型对象上添加方法
    Animal.prototype.Eat = function() {
    console.log(this.name + " Eat");
    };
    //实例化这个超
    var a = new Animal("Animal"); //再创建构造函数对象类
    var Cat = function(name, sex) {
    //这个类中要调用超类Animal的构造函数,并将参数name传给它
    Animal.call(this, name);
    this.sex = sex;
    }
    //这个子类的原型对象等于超类的实例
    Cat.prototype = new Animal();
    //因为子类的原型对象等于超类的实例,所以prototype.constructor这个方法也等于超类构造函数 console.log(Cat.prototype.constructor);
    //这个是Animal超类的引用,所以要从新赋值为自己本身
    Cat.prototype.constructor = Cat;
    console.log(Cat.prototype.constructor);
    //子类本身添加了getSex 方法
    Cat.prototype.getSex = function() {
    return this.sex;
    }
    //实例化这个子类
    var _m = new Cat('cat', 'male');
    //自身的方法
    console.log(_m.getSex()); //male
    //继承超类的方法
    console.log(_m.Eat()); //cat
    </script>
    </body> </html>
  2.   我们再看JS原型继承
     <!DOCTYPE html>
    <html> <head>
    <meta charset="UTF-8">
    <title>JS原型继承</title>
    </head> <body>
    <!--原型继承-->
    <script type="text/javascript">
    //clone()函数用来创建新的类Person对象
    var clone = function(obj) {
    var _f = function() {};
    //这句是原型式继承最核心的地方,函数的原型对象为对象字面量
    _f.prototype = obj;
    return new _f;
    } //先声明一个对象字面量
    var Animal = {
    somthing: 'apple',
    eat: function() {
    console.log("eat " + this.somthing);
    }
    }
    //不需要定义一个Person的子类,只要执行一次克隆即可
    var Cat = clone(Animal);
    //可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
    console.log(Cat.eat());
    Cat.somthing = 'orange';
    console.log(Cat.eat()); //声明子类,执行一次克隆即可
    var Someone = clone(Cat);
    </script>
    </body> </html>
  3. 我们可以试验一下,JS类的继承 children.constructor==father 返回的是true,而原型继承children.constructor==father 返回的是false;

上一篇:大数据日志分析Hadoop项目实战


下一篇:React一些必须要知道的基础