<script>
/**
面向对象中的继承
es6中的类和类的继承
*/
// 定义一个类 class 类是用来创造一个对象的
class Person {
// 构造器(用于初始化类的实例) constructor
constructor(){
this.mouth='一张';
this.leg='两条';
}
eat(){
console.log('人类是一个吃货')
}
speak(){
console.log('会说话')
}
}
// 新建一个Person类的对象 new 的时候构造器就会执行一次
var person = new Person();
console.log(person);
// 继承 extends
// class 子 extends(继承) 父 子会拥有父的属性和方法
class Man extends Person{
constructor(name,age){
// 执行父类构造器 super
super();
this.name = name;
this.age = age;
}
}
var man = new Man('田雨',20);
// 除了新加的属性，还有父类的属性
console.log(man)
// 继承了父类的方法
man.eat();
</script>
- 运用es6 class继承
- 通过继承React.Component类来定义一个组件
<!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>react组件</title>
<!-- react框架文件 -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- react用来渲染页面的文件 -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<!-- 用来编译jsx语法的库 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
// 定义一个react的组件 继承了React.Component自带的类的属性
// 子组件
class Person extends React.Component{
// props是父组件传过来的属性
constructor(props){
console.log(props);
super(props);
}
// 本组件渲染页面的方法(这里相当于vue的template)
render() {
return (
<h1>
<p>姓名:{this.props.name}</p>
<p>年龄:{this.props.age}</p>
</h1>
)
}
}
// 父组件
ReactDOM.render(
// 模板
<div>
<p>下面是子组件的内容</p>
<hr/>
<Person name="你妹" age="38"/>
</div>,
document.querySelector('#app')
)
</script>
</body>
</html>
网友评论