react笔记之继承

 <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>继承</title>
    <script>
 
        // 将多个类中的重复代码提取出来
        class Animal{
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
 
            sayHello = () => {
                console.log('动物在叫');
            };
        }
 
        // 通过继承可以使得类中拥有其他类中的属性和方法
        // 使用extends来继承一个类，继承后就相当于将该类的代码复制到了当前类中
        // 当我们使用继承后，被继承的类就称为父类，继承父类的类 称为子类
        class Dog extends Animal{
            /*
            *   子类继承父类后，将获得父类中所有的属性和方法，
            *       也可以创建同名的属性或方法来对父类进行重写
            * */
            sayHello = () => {
                console.log('汪汪汪！');
            };
 
        }
 
        class Snake extends Animal{
 
            // 当在子类中重写父类构造函数时，必须在子类构造函数中第一时间调用父类构造函数，否则会报错
            constructor(name, age, len) {
                super(name, age); // 调用父类构造函数
                this.len = len;
            }
 
            sayHello = () => {
                console.log('嘶嘶嘶~~');
            };
        }
 
        const dog = new Dog('旺财', 5);
        const snake = new Snake('长虫', 4, 10);
        // console.log(dog.name, dog.age);
        console.log(snake.name, snake.age, snake.len);
 
        // dog.sayHello();
        // snake.sayHello();
 
 
    </script>
</head>
<body>
 
</body>
</html>

posted @ 2022-11-01 10:52 前端导师歌谣阅读(35) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· react笔记之继承

· react笔记之展开笔记

· 实例对象和原型对象继承组合继承

· 类与继承，面向对象

· flask_前端继承

公告

昵称：前端导师歌谣
园龄： 7年3个月
粉丝： 9
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

前端导师歌谣的博客

微信公众号关注前端小歌谣每日分享前端知识

react笔记之继承

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="zh">
	<head>
	<meta charset="UTF-8">
	<title>继承</title>
	<script>

	// 将多个类中的重复代码提取出来
	class Animal{
	constructor(name, age) {
	this.name = name;
	this.age = age;
	}

	sayHello = () => {
	console.log('动物在叫');
	};
	}

	// 通过继承可以使得类中拥有其他类中的属性和方法
	// 使用extends来继承一个类，继承后就相当于将该类的代码复制到了当前类中
	// 当我们使用继承后，被继承的类就称为父类，继承父类的类称为子类
	class Dog extends Animal{
	/*
	* 子类继承父类后，将获得父类中所有的属性和方法，
	* 也可以创建同名的属性或方法来对父类进行重写
	* */
	sayHello = () => {
	console.log('汪汪汪！');
	};

	}

	class Snake extends Animal{

	// 当在子类中重写父类构造函数时，必须在子类构造函数中第一时间调用父类构造函数，否则会报错
	constructor(name, age, len) {
	super(name, age); // 调用父类构造函数
	this.len = len;
	}

	sayHello = () => {
	console.log('嘶嘶嘶~~');
	};
	}

	const dog = new Dog('旺财', 5);
	const snake = new Snake('长虫', 4, 10);
	// console.log(dog.name, dog.age);
	console.log(snake.name, snake.age, snake.len);

	// dog.sayHello();
	// snake.sayHello();


	</script>
	</head>
	<body>

	</body>
	</html>

前端导师歌谣的博客

微信公众号关注前端小歌谣 每日分享前端知识

react笔记之继承

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类

随笔档案

相册

阅读排行榜

推荐排行榜

微信公众号关注前端小歌谣每日分享前端知识