ES6 Class 基础和进阶

基础

function Point(x,y){
    this.x = x;
    this.y = y
}  // this指向 创建的实例对象
Point.prototype.getPosistion = function(){
    return "("+this.x+","+this.y+")"
}
var p1 = new Point(2,4)
console.log(p1)
console.log(p1.getPosistion())  //实例本身没用该方法，通过其构造器-原型 依此查找
 
var p2 = new Point(3,5)
console.log(p2)
console.log(p2.getPosistion())


class Point2 {
    constructor(x, y) {
        this.x=x
        this.y = y
        // return  // 如果在constructor中return ,所创建的对象不是Point的实例
    }
    getPosistion(){
        return "("+this.x+","+this.y+")"
    }
}

const p3 = new Point( 2, 0)  // class new 必写  es5可以省略
console.log(p3)
 
console.log(p3.hasOwnProperty("x")) // true
console.log(p3.hasOwnProperty("getPosistion")) // false
console.log(p3.__proto__.hasOwnProperty("getPosistion")) // true

/**
 * set get 关键字
 */

 var info = {
     _age:18,
     set age (newValue){
         if(newValue>18){
             console.log("怎么成年了")
         }else {
             console.log("未成年")
         }
     },
     get age (){
         console.log("你问我年龄干嘛")
         return this._age
     }
 }
console.log(info.age)
info.age = 17
info.age = 19

class Info {
    constructor(age){
        this._age = age
    }
    set age (newAge) {
        console.log("new age is " + newAge)
        this._age = newAge
    }
    get age (){
        return this._age
    }
}
const info2 = new Info(18)
info2.age = 17
console.log(info2.age)

/**
 * 表达形式
 */

 //函数
 const func = function(){}
 function A(){

 }

 //class
 class B {

 }
 const C = class c {}  // name C


 /**
  * 静态方法 不需要实例对象使用 static
  */

 class Person {
     // type    这样也可以把type付给实例对象
     constructor(name, age){
         this.name = name;
         this.age = age
     }
     getName(){
        return "name：" + this.name
     }
     static getClassName(){
         return Person.name
     }
 }
 const p = new Person("li",20)

 console.log(p.getName())
 console.log(Person.getClassName())

 /**
  * 静态属性
  */
class Animal {
    constructor(){
        this.age = 0
    }
}
Animal.name = "动物"
const a = new Animal()

console.log(a.age)
console.log(a.name) // undefined
console.log(Animal.name)

/**
 * 私有方法
 */

 // 1.私有方法移除模块
const _fun2 = ()=>{}

class Point2 {
    func1 (){
        _fun2.call(this)
    }
}

const p = new Point2()

// p._fun2()

// 2.symbol

//a.js
const func1 = Symbol('func1') // 不导出就是私有
export default class Point {
    static [func1](){

    }
}
// b.js

import A from "./a.js"

const a = new A()

console.log(a)

// 3. new target

function Test1(){
    console.log(new.target)
}
const p = new Test1() // 打印的是构造函数
const p = Test1() // undefined


class Point3 {
    constructor (){
        console.log(new.target)
    }
}

const p3 = new Point3()

// 4.继承中设置  某些类不能实例化 也就成私有

class Parent {
    constructor(){
        if(new.target === Person){
            throw new Error("该类不能实例化")
        }
    }
}

class Child extends Parent {
    constructor(){
        super()
    }
}
const c = new Child()  

进阶

/**
 * 继承
 */

// es5 

function Food(){
    this.type = "food"
}
Food.prototype.getType = function(){
    return this.type
}
function Vegetables(name){
    this.name = name
}
Vegetables.prototype = new Food()
const tomato = new Vegetables("tomato")
console.log(tomato.getType()) // food

// es6

class Parent {
    constructor(name){
        this.name = name
    }
    getName(){
        return this.name
    }
    static getNames(){
        return this.name
    }
}

class Child extends Parent{
    constructor(name,age){
        super(name)   // super  作为函数  改变this指向 子类的实例
        this.age = age  // 需要调用super才可以使用this
    }
}

const c = new Child("li",18)
console.log(c)
console.log(c.getName())
console.log(c instanceof Child)  // true
console.log(c instanceof Parent) // true
console.log(Child.getNames()) // Child
console.log(Object.getPrototypeOf(Child) === Parent) // true


// super作为对象 在普通对象中，父类的原型对象
//  静态方法，父类

class Parent1 {
    constructor(){
        this.type = "parent1"
    }
    getName (){
        return this.type
    }
}

Parent1.getType = ()=>{
    return "this is parent1"
}

class Child1 extends Parent1 {
    constructor(){
        super()
        console.log('constructor:' + super.getName())
    }
    getParentName (){
        console.log('getParentName:'+ super.getName())
    }
    // getParentType (){ 
    //     console.log('getParentType:'+ super.getType()) //父类原型对象上没用getType方法
    // }
    static getParentType (){ 
        console.log('getParentType:'+ super.getType()) //父类原型对象上没用getType方法
    }
}

const c2 = new Child1()
c2.getParentName()   // 依次打印 constructor:parent1   getParentName:parent1
Child1.getParentType()  // getParentType:this is parent1

class Parent2 {
    constructor(){
        this.name = "parent"
    }
    print(){
        console.log(this.name)
    }
}

class Child2 extends Parent2 {
    constructor(){
        super()
        this.name = "child"
    }
    childPrint(){
        super.print()
        // console.log(super) 不能这样使用
    }
}
const c3 = new Child2() 
c3.childPrint()  // child

/**
 * prototype
 *  // __proto__
 */

 var objs = new Object()
 console.log(objs.__proto__ === Object.prototype) // true

 // 子类的__proto__指向父类本身
 // 子类的prototype属性的__proto__指向父类的prototype属性
 // 实例的__proto__属性的__proto__指向父类实例的__proto__

 /**
  * 继承原生构造函数 es5不能  es6可以
  * Boolean
  * Number
  * String
  * Array
  * Date
  * Function
  * RegEXP
  * Error
  * Object
  */

  class CustomArray extends Array {
      constructor(...args){
          super(...args)
      }
  }
  const arr = new CustomArray(3)
  console.log(arr.fill('+'))