JavaScript 面向对象-子类继承父类的属性和方法（原型的应用）

最新推荐文章于 2023-05-22 15:27:57 发布

qq_31910227

最新推荐文章于 2023-05-22 15:27:57 发布

阅读量1.8k

点赞数

分类专栏：继承属性继承方法文章标签： javascript

本文链接：https://blog.csdn.net/qq_31910227/article/details/108618866

版权

继承属性同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

继承方法

1 篇文章 0 订阅

订阅专栏

JavaScript 面向对象-子类继承父类的属性和方法（原型的应用）

步骤：
创建构造函数Person，添加属性民族（nation）和肤色（skinColor），添加两个方法，分别返回民族和肤色     
创建构造函数Woman，添加属性性别（sex），Woman继承Person 为构造函数Woman添加方法，返回性别 
创建Woman的实例对象woman1 在页面中输出对象woman三个方法的值

代码部分：

<body>
<div></div>

<script type="text/javascript">
    //创建父类Person 构造方法
    function Person(nation, skinColor) {
        this.nation = nation;
        this.skinColor = skinColor;
    }
    //父类方法
    Person.prototype.showNation = function () {
        str = "民族：" + this.nation;
        return str;
    }
    Person.prototype.showSkinColor = function () {
        str = "肤色：" + this.skinColor;
        return str;
    }
    
    //创建子类Woman 构造方法
    function Woman(nation, skinColor, sex) {
        Person.call(this, nation, skinColor);//继承父类的属性
        this.sex = sex;
    }
    
    //继承父类的方法
    Woman.prototype = new Person();
    
    //创建子类Women 方法
    Woman.prototype.showSex = function () {
        return str = "性别：" + this.sex;
    }
    var woman = new Woman("汉族", "黄色", "男");//因为继承了父类，可以设置父类的属性
    //调用父类的方法
    var str1 = woman.showNation();
    var str2 = woman.showSkinColor();
    //调用自身方法
    var str3 = woman.showSex();
    var str = str1 + "<br>" + str2 + "<br>" + str3;//拼接字符
    document.getElementsByTagName("div")[0].innerHTML = str;//字符添加至div
</script>
</body>

运行结果：

民族：汉族
肤色：黄色
性别：男

实现了继承属性和方法

qq_31910227

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 面向对象-子类继承父类的属性和方法（原型的应用）

JavaScript 面向对象-子类继承父类的属性和方法（原型的应用）步骤：创建构造函数Person，添加属性民族（nation）和肤色（skinColor），添加两个方法，分别返回民族和肤色创建构造函数Woman，添加属性性别（sex），Woman继承Person 为构造函数Woman添加方法，返回性别创建Woman的实例对象woman1 在页面中输出对象woman三个方法的值代码部分：<body><div></div><sc...
复制链接

扫一扫