typescript-ES6中的类(八)

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()