需要学习掌握的知识点

1.Es5,Es6的类

2.new的作用，可以干哪几件事情

3.this的指向

4.constructor的概念

5.call,apply,bind的区别

6.js的继承，多态

7.继承（extends,super）

8.map,foreach,erery,some,fifter

类的定义

// ES5中如何定义类
function Person1(name,age){
  this.name = name;
  this.age = age
}
Person1.prototype.running = function(){
   console.log(this.name,this.age,'running')
}
var p1 = new Person1('why',18);
console.log(p1.name,p1.age)
p1.running()
// Es6中通过class创建
class Person2 {
  // 构造方法
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  // 定义方法
  running(){
    console.log(this);//undfind
    console.log(this.name, this.age,'running');
  }
}
const p2 = new Person2('why',18)
console.log(p2.name, p2.age)
p2.running()
// this绑定题目
const func =p.running;
func();
var obj = {
  name:'kobe',
  age:40
}
// func.call(obj)
// 重新给func赋值
func = func.bind(obj);
func();

类的继承

// 面向对象有三大特性： 封装\继承\多态
// 继承：1.减少重复的代码 2.多态的前提（鸭子类型）

class Person {
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
  running(){
    console.log('running')
  }
}
//class Student {
//  constructor(name, age, sno){
//    this.name = name;
//   this.age = age;
//   this.sno = sno;
//  }
//  running(){
//    console.log('running')
//  }
//}

//class Teacher {
//  constructor(name,age,title){
//    this.name = name;
//    this.age = age;
//    this.title = title
//  }
//   running(){
//    console.log('running')
//  }
//}
class Student extends Person {
  constructor (name,age,sno) {
    super(name,age);
    this.sno = sno;
  }
}
const stu = new Student("why",18,110);
console.log(stu.name,stu.age,stu.sno);
stu.running();
class Teacher extends Person {
  constructor(name,age,title) {
    //子类中必须初始化父类
    super()
    this.title = title
  }
}
const teacher = new Teacher('kobo',40,'老师')
console.log(teacher.name.teacher.age,teacher.title)
teacher.running()

案例练习

列表渲染

 <!-- 1.引入依赖 -->
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./babel.min.js"></script>

   <!-- 2.编写React代码 -->
   <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();

        this.state = {
          message: "Hello World",
          movies: ["大话西游", "盗梦空间", "星际穿越", "流浪地球"]
        }
      }
      render() {
        const liArray = [];
        for (let movie of this.state.movies) {
          liArray.push(<li>{movie}</li>);
        }

        return (
          <div>
            <h2>电影列表1</h2>
            <ul>
              {liArray}
            </ul>

            <h2>电影列表2</h2>
            <ul>
              {
                this.state.movies.map((item) => {
                  return <li>{item}</li>
                })
              }
            </ul>
          </div>
        )
      }
    }

    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>

补充内容map的使用

const names = [0,1,2,3,4,5,6,7,8,9]
/**
* 回调函数有三个参数
* 参数一：执行时的对应元素
* 参数二：对应的下标
* 参数三：完整的数组对象
*/
const newNames = names.map((item,index,arr)=>{
  return item+'000'
})
console.log(newNames)

计数器

 <!-- 1.引入依赖 -->
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./babel.min.js"></script>

   <!-- 2.编写React代码 -->
   <script type="text/babel">
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          counter: 0
        }
      }
      render() {
        return (
          <div>
              <h2>当前计数：{this.state.counter}</h2>
              <button onClick={this.increment.bind(this)}>+1</button>
              <button onClick={this.decrement.bind(this)}>-1</button>
          </div>
        )
      }
      increment() {
        this.setState({
          counter: this.state.counter + 1 
        })
        console.log('+1')

      }
      decrement() {
        this.setState({
          counter: this.state.counter - 1 
        })
        console.log('-1')
      }
    }
    ReactDOM.render(<App/>, document.getElementById("app"));
  </script>