Knowledge points that need to be learned

1. Es5, Es6 class

2. What kind of things can new do

3. This point

4. The concept of the constructor

5. Call the apply, the difference between the bind

6. Js inheritance, polymorphism

7. Inheritance (extends,super)

8.map,foreach,erery,some,fifter

The definition of a class

// How are classes defined in 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()
// Created by class in Es6
class Person2 {
  // constructor
  constructor(name,age){
    this.name = name;
    this.age = age;
  }
  // Define the method
  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 binds the title
const func =p.running;
func();
var obj = {
  name:'kobe'.age:40
}
// func.call(obj)
// reassign func
func = func.bind(obj);
func();
Copy the code

Class inheritance

// Object orientation has three main features: encapsulation, inheritance, polymorphism
// Inheritance: 1. Reduce duplicate code 2. Polymorphic premise (duck type)

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) {
    // The parent class must be initialized in the subclass
    super(a)this.title = title
  }
}
const teacher = new Teacher('kobo'.40.'the teacher')
console.log(teacher.name.teacher.age,teacher.title)
teacher.running()
Copy the code

Case practice

The list of rendering

<! --1.Importing dependencies --><script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./babel.min.js"></script><! --2.React code --><script type="text/babel">
    class App extends React.Component {
      constructor() {
        super(a);this.state = {
          message: "Hello World".movies: ["A Chinese Odyssey".Inception."Interstellar"."Wandering Earth"]}}render() {
        const liArray = [];
        for (let movie of this.state.movies) {
          liArray.push(<li>{movie}</li>);
        }

        return (
          <div>
            <h2>Movie List 1</h2>
            <ul>
              {liArray}
            </ul>

            <h2>Movie List 2</h2>
            <ul>
              {
                this.state.movies.map((item) => {
                  return <li>{item}</li>})}</ul>
          </div>
        )
      }
    }

    ReactDOM.render(<App/>.document.getElementById("app"));
  </script>
Copy the code

Supplementary content The use of map

const names = [0.1.2.3.4.5.6.7.8.9]
/** * The callback takes three arguments * argument 1: the corresponding element at execution * Argument 2: the corresponding subscript * Argument 3: the full array object */
const newNames = names.map((item,index,arr) = >{
  return item+'000'
})
console.log(newNames)
Copy the code

counter

<! --1.Importing dependencies --><script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
  <script src="./babel.min.js"></script><! --2.React code --><script type="text/babel">
    class App extends React.Component {
      constructor() {
        super(a);this.state = {
          counter: 0}}render() {
        return (
          <div>
              <h2>Current count: {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>
Copy the code