Frontend-Day14——JSClass

Class定义方法

class Person {
   //1构造函数
   constructor(name, age) {
     this.name = name
     this.age = age
   }
   //2.实例方法
   //本质是放在Person.prototype上
   running() {
     console.log(this.name + "running")
   }
 }

 var p1 = new Person("hha",12)

访问器

class Person {
  constructor(name, age) {
    this._name = name
    this.age = age
  }

  set name(value) {
    return this._name
  }

  get name() {
    return this._name
  }
}   
var p1 = new Person("hha",12)
console.log(p1.name)

class Rectangle {
  constructor(x, y, width, height) {
    this.x = x
    this.y = y
    this.width = width
    this.height = height
  }

  get position() {
    return { x: this.x, y:this.y }
  }

  get size() {
    return { width: this.width, height: this.height}
  }
}

var rect1 = new Rectangle(10,20,30,40)
console.log(rect1.position)
console.log(rect1.size)

类方法

class Person {
  constructor(name, age) {
    this._name = name
    this.age = age
  }
  static randomPerson(){}  
}

继承

class Student extends Person {
  constructor(name, age, sno, score){
    super(name, age)
    this.sno = sno
    this.score = score
  }
  //重写
  eating() {
    console.log("override")
  }
  
  studying() {
    console.log("study")
  }
}

var s1 = new Student("alugg", 15, "xixi",150)
s1.studying()
s1.running()

类的混入minxin

Js只支持单继承.如何继承多个类

function mixinAnimal(BaseClass) {
	return class extends BaseClass{
		running() {
            console.log("running")
        }
	}
}

function mixinFlyer(BaseClass) {
    return class extends BaseClass {
        flying() {
            console.log("flyingg")
        }
    }
}

class Bird {
    eating(){
        console.log("eating")
    }
}

var NewBird = mixinFlyer(mixinAnimal(Bird))
var bird = new NewBird()
bird.flying()
bird.running()
bird.eating()

多态

class Shape {
  getArea() {}
}

class Rectange extends Shape {
  constructor(width, height) {
    super()
    this.width = width
    this.height = height
  }

  getArea() {
    return this.width * this.height
  }
}

class Circle extends Shape {
  constructor(radius) {
    super()
    this.radius = radius
  }

  getArea() {
    return this.radius * this.radius * 3.14
  }
}

var rect1 = new Rectange(10,20)
var c1 = new Circle(10)

function getShapeArea(shape){
  console.log(shape.getArea())
}

getShapeArea(c1)
getShapeArea(rect1)

对象字面量增强

var name = "why"
var age = 18
var key = "address"

var obj = {
  //属性增强
  name,  //name:name
  age,   //age:age
    
  //方法增强
  swimming: function() {
    console.log(this)
  },
  running() {
    console.log(this)
  },
  eating: () => {
    console.log(this)
  }
    
  //3.计算属性名
   [key]:"xixihaha"
}

function foo() {
  var message = "hello world"
  var info = "my name is why"
  return { message, info}
}

解构

解构复制可以将数组或对象拆包至一系列变量中

var names = ["abc", "cba", "nba", "xixiha"]
var obj = { name: "why", age:18, height:1.88 }
//1.1基本使用
var [name1, name2, name3] = names
console.log(name1, name2, name3)

//1.2顺序问题
var [name1, , name3] = names

//1.3 解构出数组
var [name1, name2, ...newNames] = names

//1.4 解构的默认值
var [name1, name2, name3 = "default"] = names

//2 对象的结构
var {name, age, height } = obj
console.log(name, age, height)

//2.2顺序问题 对象的结构不存在顺序
var {height, name, age} = obj
console.log(name, age, height)

//2.3重命名
var {height:wHeight, name:nName, age:wAge} = obj
console.log(wHeight, nName, wAge)

//2.4 默认值
var { height:wHeight, name:nName, age:wAge, adress:wAddress="CN"} = obj