一、记录 ES5 中 的 实例属性、原型属性、静态属性

 // 实例属性
 // 原型属性
 // 静态属性

//  ES5 ES6 中怎样表示?

function Person(name,age){
    // !#1 实例属性: 挂载到实例上的属性
    this.name = name
    this.age = age
    // this.show = function(){
    //     console.log('Hello World');
    // }
}

// !#2 原型属性: 挂载到原型上面的属性, 通过实例也可以访问
Person.prototype.show = () => {
    console.log('Hello World')
}

// !#3 静态属性: 直接挂载到构造函数身上的, 通过实例不能访问, 需通过构造函数才能访问
Person.sleep = true

// const p = new Person('世界', 2022)
// console.log(p.name, p.age);
// p.show()

const p1 = new Person('早晨',18)
const p2 = new Person('世界', 2022)
console.log(p1.show === p2.show) // false 浪费内存
p1.show()
p2.show()

console.log(p1.sleep)  // undefined
console.log(Person.sleep) // true



// const arr = [1,3,5,7,9]
// // !#2 过滤满足条件的
// let arrNew = arr.filter(item => item > 3)
// console.log(arrNew);

二、记录 ES6 中 的 实例属性、原型属性、静态属性

class Person {
  constructor(name, age) {
    // !#1 实例属性, 构造函数中的 this 就是实例
    this.name = name;
    this.age = age;
    // this.show = function () {
    //   console.log("Hello");
    // };
    // this.state = { age:18 }
  }

  // !#1 通过等号赋值也是实例属性
  state = { age: 18 }

  play = () => {
      console.log('打游戏')
  }

  // !#2 原型属性/方法
  show() {
      console.log('原型属性')
  }

  // !#3 静态属性
  static sleep = 'trues'
}

// !#3 静态属性
Person.eat = true

const p1 = new Person("小猫", 10);
const p2 = new Person("小狗", 12);
// console.log(p1.show === p2.show); // false 浪费内存
console.log(p1.state === p2.state); // false 浪费内存
console.log(p1.play === p2.play); // false 浪费内存

console.log(p1.show === p2.show); // true 原型属性

console.log(Person.sleep) // 'trues'
console.log(Person.eat) // true

新手上路~~ 整个封面。。。