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