当前位置： 移动技术网 > IT编程>网页制作>CSS > 继承学习之类式继承、构造函数式继承、组合继承代码实例

继承学习之类式继承、构造函数式继承、组合继承代码实例

2019年06月20日  | 移动技术网IT编程  | 我要评论

继承： 指的是子类继承父类的属性和方法。

子类是父类的实例

子类继承父类的属性和方法，可以使用父类的属性和方法，又不影响父类原型上的方法

父类不能使用子类独有的属性和方法

继承方式：

①类式继承 或者 原型式继承

②构造函数式继承

③组合式继承

1. instanceof

该关键字用于判定某一个对象是否是某一个构造函数的实例

使用方式：

对象instanceof构造函数

2. 类式继承 或者 原型式继承（用于继承方法）

类式继承：也叫做原型式继承。 将子类的原型指向父类的实例。

真正意义上的继承：

子类继承了父类，子类是子类构造函数的实例，子类也是父类构造函数的实例，子类可以使用父类的方法并且不影响父类的方法 ，父类不可以使用子类的方法

注意：

①类式继承 或者 原型式继承的弊端：

这种继承会丢失原来的子类原型的constructor属性，而原来的子类原型上是有一个constructor属性的。要记得补回。

② 子类的新的方法的赋值语句一定要写在原型式继承代码的下方。

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <title>document</title>  
</head>  
<body>  
    <script type="text/javascript">  
    // 父类  
    // function people(name, age, sex) {  
    //  this.name = name;  
    //  this.age = age;  
    //  this.sex = sex  
    // }  
    // // 父类的方法  
    // people.prototype.sayhello = function() {  
    //  console.log("我的名字叫做" + this.name)  
    // }  
  
  
    // // 子类  
    // function student(name, age, sex, grade) {  
    //  this.name = name;  
    //  this.age= age;  
    //  this.sex = sex;  
    //  this.grade = grade;  
    // }  
    // // 所谓继承， 就是应该是子类从父类的上面得到一些东西。  
    // // 现在我们想让子类调用父类的方法，我们能想到最简单的方法就是让子类的原型指向父类的原型。  
    // // 尝试1：  
    // student.prototype = people.prototype;  
    // // 既然是子类， 就应该拥有和父类不一样的方法。  
    // // 给子类添加方法  
    // student.prototype.intro = function() {  
    //  console.log("我的年纪" + this.age +"了");  
    // }  
  
    // // 实例化  
    // var people = new people("小明", 25, "男");  
    // var student = new student("小红", 12, "女", 6);  
  
    // // 测试子类是够能够调用父类的方法  
    // // student.sayhello();  
  
    // // 测试父类能否调用子类的方法  
    // people.sayhello();  
    // people.intro();  
  
    // 经过测试， 子类确实可以访问父类的方法了， 但是父类同时也可以调用子类的方法。  
    // 我们现在迫切需要一种方法， 既可以让子类继承父类的方法， 又不影响父类原型上的方法。  
  
  
  
    /***************************************************************************/  
  
    function people(name, age, sex) {  
        this.name = name;  
        this.age = age;  
        this.sex = sex  
    }  
    // 父类的方法  
    people.prototype.sayhello = function() {  
        console.log("我的名字叫做" + this.name)  
    }  
  
  
    // 子类  
    function student(name, age, sex, grade) {  
        this.name = name;  
        this.age= age;  
        this.sex = sex;  
        this.grade = grade;  
    }  
  
    student.prototype = new people();  
    // student.prototype = {  
    //      constructor: student  
    // }  
    // 此时， student的constructor 属性丢失。  
    // 继承之后，要记得手工补回原有的constructor 属性，并且给student添加的新方法要写在此条代码的后面。  
    student.prototype.constructor = student;  
    // 给子类添加方法  
    student.prototype.intro = function() {  
        console.log("我的年纪" + this.age +"了");  
    }  
    // 现在我们不能让子类的原型指向父类的原型了  
    // 现在我们想到 让子类的原型指向父类的实例，这个方法符合我们的要求。  
  
    var people = new people("小明", 25, "男");  
    var student = new student("小红", 12, "女", 6);  
    // 测试子类是否继承了父类的方法  
    // student.sayhello();  
    // 测试父类能否使用子类的方法  
    // people.intro();  
  
    // 最后测试， 是否是继承了父类  
    console.log(student instanceof student);  
    console.log(student instanceof people);  
    </script>  
</body>  
</html>

向原型对象添加多种方法：

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <title>document</title>  
</head>  
<body>  
    <script type="text/javascript">  
    // 父类  
    function people(name, age, sex) {  
        this.name = name;  
        this.age = age;  
        this.sex = sex;  
    }  
    // 添加一种方法  
    people.prototype.sayhello = function() {  
  
    }  
    // 添加10种方法  
    people.prototype = {  
        // 记得手工补回constructor 属性。  
        constructor: people,  
        say: function() {  
  
        },  
        hehe: function() {  
  
        },  
        haha: function() {  
  
        }  
    }  
    </script>  
</body>  
</html>

3. 构造函数式继承（用于继承属性）

在子类的构造函数中，调用父类的构造函数并使用apply将父类构造函数的this指向子类的this，并将arguments传递进去。

注意：所有的子类特有属性赋值语句都要放在构造函数继承代码的下面。

构造函数式继承：

子类并不是父类的实例，子类可以继承父类的属性

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <title>document</title>  
</head>  
<body>  
    <script type="text/javascript">  
    // 之前我们讲的是继承了父类的方法， 这种“子类的原型指向父类的实例的继承方式” 叫做类式继承或者原型式继承。  
    // 我们将如何继承属性  
    // 父类  
    function people(name, age, sex) {  
        this.name = name;  
        this.age = age;  
        this.sex = sex;  
    }  
    // 子类  
    function student(name, age, sex, grade) {  
        // var arr = [].slice.call(arguments);  
        people.apply(this, arguments);  
        this.grade = grade;  
    }  
    var s = new student("小明", 12, "男", 6)  
    console.log(s)  
    console.log(s instanceof people);  
  
  
    // 每个函数都有一个prototype属性， 它是一个对象， 对象里面有一个constructor 属性 指向构造函数本身  
    // console.log(student.prototype)  
    </script>  
</body>  
</html>

4. 组合继承（继承属性和方法）

构造函数式继承 + 类式继承/原型式继承

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="utf-8">  
    <title>document</title>  
</head>  
<body>  
    <script type="text/javascript">  
    // 父类  
    function people(name, age, sex) {  
        this.name = name;  
        this.age = age;  
        this.sex = sex;  
    }  
    // 子类  
    function student(name, age, sex, grade) {  
        // var arr = [].slice.call(arguments);  
        people.apply(this, arguments);  
        this.grade = grade;  
    }  
    // student.prototype = {  
    //      constructor: student  
    // }  
    // 此时， student的constructor 属性丢失。  
    student.prototype = new people();  
    // 我们可以手动补回  
    student.prototype.constructor = student; // 继承之后， 要记得手工补回原有的constructor 属性，并且给student添加的新方法要写在此条代码的后面。  
  
  
    var s = new student("小明", 12, "男", 6)  
    console.log(s.constructor)  
    </script>  
</body>  
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网