typescript-ES6中的类(八)

ES6中的类

    • ES5和ES6实现创建实例
      • ES5
    • ES6
    • constructor方法
    • 类的实例
    • 取值函数和存值函数
    • class表达式
      • 定义class表达式有两种形式
    • 静态方法
    • 实例属性其他写法
      • 静态属性
      • 属性权限
      • 静态方法
    • 实现私有方法
      • 私有方法实现有三种方式
      • 私有属性
      • new.target

ES5和ES6实现创建实例

ES5

// ES5
function Point(x,y){
  this.x = x
  this.y = y
}
Point.prototype.getPostion = function (){
  return '(' + this.x + ',' + this.y + ')'
}
var p1 = new Point(1,2)
console.log(p1)

ES6

// ES6
class Point {
	constructor(x,y){
		this.x = x
		this.y = y
	}
	getPostion () {
		return `(${this.x},${this.y})`
	}
}
const p1 = new Point(1,2)
console.log(p1)
p1.getPostion()

constructor方法

  • 构造方法作用完成对象初始化
    constructor(x,y){
    	this.x = x
    	this.y = y
    }
    

类的实例

class Point {
	constructor(x,y){
		this.x = x
		this.y = y
	}
	getPostion () {
		return `(${this.x},${this.y})`
	}
}

const p1 = new Point(2,34)
console.log(p1)// Point{x: 2,y: 34}
console.log(p1.hasOwnProperty('getPostion'))// false
console.log(p1._proto_.hasOwnProperty('getPostion'))// true

取值函数和存值函数

var info = {
	_age: 18
	// 存值函数
	set age(newAge){
		if(newAge > 18){
			console.log('你成年了')
		} else {
			console.log('你是未成年人')
		}
	}
	// 取值函数
	get age(){
		console.log('触发获取年龄事件')
		return this._age
	}
}

console.log(info.age) // 触发获取年龄事件 18
info.age = 20 // 你成年了 

class表达式

定义class表达式有两种形式

  • 第一种方式
    class Info{
    	constructor () {
    	}
    }
    
  • 第二种方式
    const Info = class C{
    	constructor () {
    	}
    }
    

静态方法

class Point{
	constructor(x,y){
		this.x = x
		this.y = y
	}
	getPosition () {
		return `(${this.x},${this.y})`
	}
	static getClassName () {
		return Point.name
	}
}
console.log(Point.getClassName())

实例属性其他写法

静态属性

class Point {
  str: string
  static address: string = '学好数理化'
  constructor (str: string){
    this.str = str
  }
  set setStr(newStr:string){
    this.str = newStr
  }
  get getString(){
    return this.str
  }
}
let pt = new Point('素质教育')
console.log(pt.str) // 素质教育
console.log(Point.address)// 学好数理化

属性权限

/**
 * 静态变量可以直接通过类名.属性名访问
 * private私有属性,不能跨类访问
 * protected受保护属性,继承类中能访问
 * 继承类中,能直接使用类名.静态方法名访问父类静态方法
 */
/**
 * 静态变量可以直接通过类名.属性名访问
 * private私有属性,不能跨类访问
 * protected受保护属性,继承类中能访问
 * 继承类中,能直接使用类名.静态方法名访问父类静态方法
 */
class Base{
  private uname: string
  protected age: number
  public address: string
  static education: string = '本科'
  constructor(uname: string,age: number,address: string){
    this.uname = uname
    this.age = age
    this.address = address
  }
  set setStuName(name: string){
    this.uname = name
  }
  set setStuAge(age: number){
    this.age = age
  }
  set setStuAddress(address: string){
    this.address = address
  }
  get getInfo(){
    return `学生姓名:${this.uname},学生年龄:${this.age},学生地址:${this.address}`
  }
  static getInfos(){
    return `学生学历:${this.education}`
  }
}
let stuInfo = new Base('张三',18,'成都市成华区')
console.log(stuInfo.getInfo)
console.log(Base.getInfos())
stuInfo.setStuAge = 21


// tslint:disable-next-line: max-classes-per-file
class Zsan extends Base{
  score: number
  constructor(score: number){
    super('张三',19,'成都市武侯区')
    this.score = score
  }
  getStuInfoZ() {
    return ((new Zsan(106)).age)
  }
}

let zs = new Zsan(99)
console.log(zs.address) // 成都市武侯区
console.log(zs.getStuInfoZ())// 19

静态方法

  • 父类的静态方法,子类可以继承

实现私有方法

私有方法实现有三种方式

  • 方式一
    • 该方式默认规则,在方法前面加_,表示该类的私有方法,实际其他类或外部能访问
    class PrivaFunc{
    	_func(){
    		console.log('私有方法')
    	}
    }
    
  • 方式二
    • 其他类或外部调用_func方法,会报错
    const _func = () => {}
    class PrivaFunc {
    	console.log('私有方法')
    	_func.call(this)	
    }
    
  • 方式三
    • 通过Symbol类型的唯一性来实现
    • 将class暴露出去,其他的js文件不能访问PrivaFuncs私有方法
    	const funcs = Symbol('funcs')
    	export default class PrivaFuncs{
    		static [funcs] (){
    			console.log('私有方法')
    		}
    	}
    

私有属性

const str = '成都市双流区'

const _getStr = (): string => {
  console.log(`地址: ${str}`)
  return `地址${str}`
}
// tslint:disable-next-line: max-classes-per-file
class PrivaProp{
  #str: string = '四川省成都市武侯区'
  func() {
    _getStr.call(this)
  }
  getStr(){
    // return this.#str
    return `地址:${this.#str}`
  }
}
const pp = new PrivaProp()
pp.func()// 地址: 成都市双流区
console.log(pp.getStr())// 地址:四川省成都市武侯区

new.target

  • new.target属性允许你检测函数或构造方式是否是通过new运算符被调用的;再通过new运算符被初始化的函数或构造方法中,new.target返回一个指向构造方法或函数的引用。普通的函数调用中new.target的值是underfined
class Point {
	constructor () {
		console.log(new.target)
	}
}
const pt = new Point()

你可能感兴趣的:(ES6,typescript,前端,typescript,前端,javascript)