html教程

Appearance

class类 ​

ts
class Animal {
  /**
   * 动物类的构造方法
   * @constructor
   * @param {string} name -动物的名字
   * @param  {number} energy -动物能量
   */
  constructor(name, energy) {
    this.name = name
    this.energy = energy
  }
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
  sleep() {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
  play() {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}

class Dog extends Animal {
  constructor(name, energy, breed) {
    super(name, energy) // Calls Animal's constructor

    this.breed = breed
  }
  bark() {
    console.log(`Woof Woof!`)
    this.energy -= 0.1
  }
}
{
  console.log(`________________________________________________`)
  const d = new Dog(`alice`, 34, `44`)
  d.bark()
}
export {}
class Animal {
  /**
   * 动物类的构造方法
   * @constructor
   * @param {string} name -动物的名字
   * @param  {number} energy -动物能量
   */
  constructor(name, energy) {
    this.name = name
    this.energy = energy
  }
  eat(amount) {
    console.log(`${this.name} is eating.`)
    this.energy += amount
  }
  sleep() {
    console.log(`${this.name} is sleeping.`)
    this.energy += length
  }
  play() {
    console.log(`${this.name} is playing.`)
    this.energy -= length
  }
}

class Dog extends Animal {
  constructor(name, energy, breed) {
    super(name, energy) // Calls Animal's constructor

    this.breed = breed
  }
  bark() {
    console.log(`Woof Woof!`)
    this.energy -= 0.1
  }
}
{
  console.log(`________________________________________________`)
  const d = new Dog(`alice`, 34, `44`)
  d.bark()
}
export {}
ts
const theProtoObj = {
  toString: function () {
    return `The ProtoOBject To string`
  },
}

const handler = () => `handler`

const obj = {
  // __proto__
  __proto__: theProtoObj,

  // Shorthand for ‘handler: handler’
  handler,

  // Methods
  toString() {
    // Super calls
    return `d ${super.toString()}`
  },

  // Computed (dynamic) property names
  [`prop_${(() => 42)()}`]: 42,
}

console.log(obj.handler)
console.log(obj.handler())
console.log(obj.toString())
console.log(obj.prop_42)
export {}
const theProtoObj = {
  toString: function () {
    return `The ProtoOBject To string`
  },
}

const handler = () => `handler`

const obj = {
  // __proto__
  __proto__: theProtoObj,

  // Shorthand for ‘handler: handler’
  handler,

  // Methods
  toString() {
    // Super calls
    return `d ${super.toString()}`
  },

  // Computed (dynamic) property names
  [`prop_${(() => 42)()}`]: 42,
}

console.log(obj.handler)
console.log(obj.handler())
console.log(obj.toString())
console.log(obj.prop_42)
export {}
ts
function Parent(name) {
  this.parent = name
}
Parent.prototype.say = function () {
  console.log(`${this.parent}: 你打篮球的样子像kunkun`)
}
function Child(name, parent) {
  // 将父类的构造函数绑定在子类上
  Parent.call(this, parent)
  this.child = name
}

/**
 1. 这一步不用Child.prototype =Parent.prototype的原因是怕共享内存，修改父类原型对象就会影响子类
 2. 不用Child.prototype = new Parent()的原因是会调用2次父类的构造方法（另一次是call），会存在一份多余的父类实例属性
 3. Object.create是创建了父类原型的副本，与父类原型完全隔离
 */
Child.prototype = Object.create(Parent.prototype)
Child.prototype.say = function () {
  console.log(`${this.parent}好，我是练习时长两年半的${this.child}`)
}
console.log(Child.prototype)
// 注意记得把子类的构造指向子类本身
Child.prototype.constructor = Child

let parent = new Parent('father')
parent.say() // father: 你打篮球的样子像kunkun

let child = new Child('cxk', 'father')
child.say() // father好，我是练习时长两年半的cxk
export {}
function Parent(name) {
  this.parent = name
}
Parent.prototype.say = function () {
  console.log(`${this.parent}: 你打篮球的样子像kunkun`)
}
function Child(name, parent) {
  // 将父类的构造函数绑定在子类上
  Parent.call(this, parent)
  this.child = name
}

/**
 1. 这一步不用Child.prototype =Parent.prototype的原因是怕共享内存，修改父类原型对象就会影响子类
 2. 不用Child.prototype = new Parent()的原因是会调用2次父类的构造方法（另一次是call），会存在一份多余的父类实例属性
 3. Object.create是创建了父类原型的副本，与父类原型完全隔离
 */
Child.prototype = Object.create(Parent.prototype)
Child.prototype.say = function () {
  console.log(`${this.parent}好，我是练习时长两年半的${this.child}`)
}
console.log(Child.prototype)
// 注意记得把子类的构造指向子类本身
Child.prototype.constructor = Child

let parent = new Parent('father')
parent.say() // father: 你打篮球的样子像kunkun

let child = new Child('cxk', 'father')
child.say() // father好，我是练习时长两年半的cxk
export {}
ts
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}

function SubType(name, age) {
  SuperType.call(this)
  this.age = age
}
SubType.prototype = new SuperType()
SubType.prototype.constructor = SubType

SubType.prototype.sayAge = function () {
  console.log(this.age)
}
let sub = new SubType('name', 'age')
sub.sayAge()
function SuperType(name) {
  this.name = name
  this.colors = ['red', 'blue', 'green']
}
SuperType.prototype.sayName = function () {
  console.log(this.name)
}

function SubType(name, age) {
  SuperType.call(this)
  this.age = age
}
SubType.prototype = new SuperType()
SubType.prototype.constructor = SubType

SubType.prototype.sayAge = function () {
  console.log(this.age)
}
let sub = new SubType('name', 'age')
sub.sayAge()
ts
function SuperType() {
  this.property = true
}

SuperType.prototype.getSuperValue = function () {
  return this.property
}

function SubType() {
  this.subproperty = false
}

// 这里是关键，创建SuperType的实例，并将该实例赋值给SubType.prototype
SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function () {
  return this.subproperty
}

let instance = new SubType()
console.log(instance.getSuperValue()) // true
function SuperType() {
  this.property = true
}

SuperType.prototype.getSuperValue = function () {
  return this.property
}

function SubType() {
  this.subproperty = false
}

// 这里是关键，创建SuperType的实例，并将该实例赋值给SubType.prototype
SubType.prototype = new SuperType()

SubType.prototype.getSubValue = function () {
  return this.subproperty
}

let instance = new SubType()
console.log(instance.getSuperValue()) // true
ts
const m = Request
class Player {
  constructor(name, sex) {
    this._name = name
    this._sex = sex
  }

  get age() {
    return this._age
  }

  set age(value) {
    this._age = value
  }

  get sex() {
    return this._sex
  }

  set sex(value) {
    this._sex = value
  }

  get name() {
    return this._name
  }

  set name(value) {
    this._name = value
  }

  show() {
    console.log(`${this._name}的性别是${this._sex}`)
  }

  static infor() {
    console.log(`nononononn`)
  }
}

const plaer = new Player(`kuli`, `nan`)
console.log(plaer.name, plaer.sex)
console.log(plaer)
plaer.age = `343434`
console.log(plaer.age)
console.log(plaer)
export {}
const m = Request
class Player {
  constructor(name, sex) {
    this._name = name
    this._sex = sex
  }

  get age() {
    return this._age
  }

  set age(value) {
    this._age = value
  }

  get sex() {
    return this._sex
  }

  set sex(value) {
    this._sex = value
  }

  get name() {
    return this._name
  }

  set name(value) {
    this._name = value
  }

  show() {
    console.log(`${this._name}的性别是${this._sex}`)
  }

  static infor() {
    console.log(`nononononn`)
  }
}

const plaer = new Player(`kuli`, `nan`)
console.log(plaer.name, plaer.sex)
console.log(plaer)
plaer.age = `343434`
console.log(plaer.age)
console.log(plaer)
export {}
ts
class Cat {
  constructor(name, color) {
    let heart = '❤️'
    let stomach = '胃'
    let heartbeat = function () {
      console.log(heart + '跳')
    }
    this.name = name
    this.color = color
    heartbeat()
    this.jump = function () {
      console.log('heheheh')
      console.log(this)
      console.log('我跳起来了~来追我啊')
    }
  }
  cleanTheBody = function () {
    console.log('我会用唾液清洁身体')
  }
  static descript = '我这个类是用来生产出一只猫的'
  static actingCute() {
    console.log(this)
    console.log('一听到猫我就想到了它会卖萌')
  }
}
Cat.staticName = 'staticName'
let guaiguai = new Cat('guaiguai', 'white')
console.log(guaiguai)
guaiguai.jump()
guaiguai.cleanTheBody()
console.log(guaiguai.descript)
// guaiguai.actingCute();
Cat.actingCute()
console.log(Cat.descript)
console.log(Cat.staticName)
class Cat {
  constructor(name, color) {
    let heart = '❤️'
    let stomach = '胃'
    let heartbeat = function () {
      console.log(heart + '跳')
    }
    this.name = name
    this.color = color
    heartbeat()
    this.jump = function () {
      console.log('heheheh')
      console.log(this)
      console.log('我跳起来了~来追我啊')
    }
  }
  cleanTheBody = function () {
    console.log('我会用唾液清洁身体')
  }
  static descript = '我这个类是用来生产出一只猫的'
  static actingCute() {
    console.log(this)
    console.log('一听到猫我就想到了它会卖萌')
  }
}
Cat.staticName = 'staticName'
let guaiguai = new Cat('guaiguai', 'white')
console.log(guaiguai)
guaiguai.jump()
guaiguai.cleanTheBody()
console.log(guaiguai.descript)
// guaiguai.actingCute();
Cat.actingCute()
console.log(Cat.descript)
console.log(Cat.staticName)
ts
{
  console.log(`________________________________________________`)
  const obj = {
    foo: true,
    abc: 123,
  }
  Object.entries(obj).forEach((k, v) => {
    console.log(k)
  })
}
{
  console.log(`________________________________________________`)
  const p = `foo`
  const obj = {
    [p]: 22,
    [`parm`]: `param`,
  }
  console.log(obj.parm)
}
{
  console.log(`________________________________________________`)
  const obj = {
    [`he` + `llo`]() {
      return 34
    },
  }
  console.log(obj.hello())
}
{
  console.log(`________________________________________________`)
  const keyA = { a: 1 }
  const keyB = { b: 2 }

  const myObject = {
    [keyA]: `valueA`,
    [keyB]: `valueB`,
  }
  console.log(myObject)
}

{
  console.log(`________________________________________________`)
  const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
  console.log(z)
}
{
  console.log(`________________________________________________`)
  const obj = {
    foo: true,
    abc: 123,
  }
  Object.entries(obj).forEach((k, v) => {
    console.log(k)
  })
}
{
  console.log(`________________________________________________`)
  const p = `foo`
  const obj = {
    [p]: 22,
    [`parm`]: `param`,
  }
  console.log(obj.parm)
}
{
  console.log(`________________________________________________`)
  const obj = {
    [`he` + `llo`]() {
      return 34
    },
  }
  console.log(obj.hello())
}
{
  console.log(`________________________________________________`)
  const keyA = { a: 1 }
  const keyB = { b: 2 }

  const myObject = {
    [keyA]: `valueA`,
    [keyB]: `valueB`,
  }
  console.log(myObject)
}

{
  console.log(`________________________________________________`)
  const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
  console.log(z)
}
ts
const actions = new Map([
  [1, [`processing`, `IndexPage`]],
  [2, [`fail`, `FailPage`]],
  [3, [`fail`, `FailPage`]],
  [4, [`success`, `SuccessPage`]],
  [5, [`cancel`, `CancelPage`]],
  [`default`, [`other`, `Index`]],
])
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status) => actions.get(status) || actions.get(`default`)
console.log(onButtonClick(3))
const actions = new Map([
  [1, [`processing`, `IndexPage`]],
  [2, [`fail`, `FailPage`]],
  [3, [`fail`, `FailPage`]],
  [4, [`success`, `SuccessPage`]],
  [5, [`cancel`, `CancelPage`]],
  [`default`, [`other`, `Index`]],
])
/**
 * 按钮点击事件
 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消
 */
const onButtonClick = (status) => actions.get(status) || actions.get(`default`)
console.log(onButtonClick(3))

Released under the MIT License.

Copyright © 2019-present yzqdev