继承与多态笔记

最新推荐文章于 2024-08-09 21:30:00 发布

捞比丶

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量121

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_41915936/article/details/107366399

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

继承与多态

继承和多态同一件事情的两种完全不同的侧重：
它们只会在子一级生效，并不会影响父一级构造函数的方法。
继承：侧重是从父一级构造函数，继承到的属性和方法。
多态：侧重于子一级，自己重写和新增的属性和方法。

继承

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <script>  function Dog({name, type, age}){
                //this = new Object();
                //添加属性
                this.name = name;
                this.type = type;
                this.age = age;
            }
          
            /* 
                通过构造函数的原型添加方法
             */
             Dog.prototype = {
                 run: function(){
                     alert(this.name + "会飞快的奔跑");
                 },
                 showSelf: function(){
                     alert(`这是一个${this.type}的，${this.age}岁的，叫${this.name}的小狗`);
                 }
             }
             /* 
                分类更加细分的构造函数。继承
              */
            function Teddy({name, type, age, color}){
                //this = new Object();
                //1、继承父一级构造函数所有的属性
                //构造函数的伪装
                Dog.call(this, {
                    name: name,
                    type: type,
                    age: age
                })
                //添加自己的属性
                this.color = color;

                //return this;
            }

            /* 
                原型链继承
            */
            // Teddy.prototype = Dog.prototype;  非常错误的写法
            for(var funcName in Dog.prototype){
                Teddy.prototype[funcName] = Dog.prototype[funcName];
            }


            Teddy.prototype.showColor = function(){
                alert(this.color);
            }


            var xiaohong = new Teddy({
                name: "小红",
                type: "泰迪",
                age: 10,
                color: "红色"
            })

            xiaohong.showSelf();
            xiaohong.showColor();

            var xiaohei = new Dog({
                name: "小黑",
                type: "拉布拉多",
                age: 5
            });
            alert(xiaohei.showColor);
        </script>
    </head>
    <body>
        
    </body>
</html>

多态

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <title>Document</title>
        <script>
            function Dog({name, type, age}){
                //this = new Object();
                //添加属性
                this.name = name;
                this.type = type;
                this.age = age;
            }
            /* 
                通过构造函数的原型添加方法
             */
             Dog.prototype = {
                 run: function(){
                     alert(this.name + "会飞快的奔跑");
                 },
                 showSelf: function(){
                     alert(`这是一个${this.type}的，${this.age}岁的，叫${this.name}的小狗`);
                 }
             }
             /* 
                分类更加细分的构造函数。继承
              */
            function Teddy({name, type, age, color}){
                //this = new Object();
                //1、继承父一级构造函数所有的属性
                //构造函数的伪装
                Dog.call(this, {
                    name: name,
                    type: type,
                    age: age
                })
                //添加自己的属性
                this.color = color;

                //return this;
            }

            /* 
                原型链继承
             */
            // Teddy.prototype = Dog.prototype;  非常错误的写法
            for(var funcName in Dog.prototype){
                Teddy.prototype[funcName] = Dog.prototype[funcName];
            }

            //在子一级构造函数重写showSelf方法
            /* 
                只会在子一级生效，并不会影响父一级构造函数的方法。

                继承和多态同一件事情的两种完全不同的侧重：
                继承：侧重是从父一级构造函数，继承到的属性和方法。
                多态：侧重是，子一级，自己重写和新增的属性和方法。
             */
            Teddy.prototype.showSelf = function(){
                alert(`这是一个${this.type}的，${this.age}岁的，是${this.color}的，叫${this.name}的小狗`);
            }


            Teddy.prototype.showColor = function(){
                alert(this.color);
            }


            var xiaohong = new Teddy({
                name: "小红",
                type: "泰迪",
                age: 10,
                color: "红色"
            })

            xiaohong.showSelf();
          

            var xiaohei = new Dog({
                name: "小黑",
                type: "拉布拉多",
                age: 5
            });
            xiaohei.showSelf();
        </script>
    </head>
    <body>
        
    </body>
</html>

捞比丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
继承与多态笔记

继承与多态继承和多态同一件事情的两种完全不同的侧重：它们只会在子一级生效，并不会影响父一级构造函数的方法。继承：侧重是从父一级构造函数，继承到的属性和方法。多态：侧重于子一级，自己重写和新增的属性和方法。继承<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="widt
复制链接

扫一扫

专栏目录