ES2015+学习笔记系列(七)—— Class类

1、class类

作为对象模板,通过class关键字,可以定义类。

  • 基本上,ES6的class可以看做知识一个语法糖,他的绝大部分功能,ES5都可以做到。
  • 新的class写法只是让对象原型的写法更加清晰、更像面向对象的语法而已。

1.1、类定义

  • 构造方法,名字必须为constructor,不可修改
  • 方法必须使用ES6方法,不能使用ES5的对象完整形式
class Phone {
  constructor(brand, price) {
    this.brand = brand, 
    this.price = price;
  }
  call(){
    console.log('打电话');
  }
}
let phone = new Phone('Iphone','5毛');
console.log(phone);

1.2、class静态成员

函数是一个对象,[函数名]为函数对象;[new 函数名]获得的对象是实例对象

属于函数对象而不属于实例对象的属性和方法,称之为静态成员。则静态成员属于类不属于实例对象

1.2.1、ES5方式实例对象

  • 实例对象和函数对象是不同的,属性和方法是不通的
//MPhone是函数对象,mPhone是实例对象
function MPhone(){

}
MPhone.name = '小米';
MPhone.call = function(){
  console.log('Hello mi fans');
}
let mPhone= new MPhone();
//对象上没有构造函数上的属性方法
console.log(mPhone.name);//undefined
  • 实例对象和构造函数原型对象是相通的
function MPhone(){

}
MPhone.prototype.name = '小米';//给构造函数上添加属性
MPhone.prototype.call = function(){
  console.log('Hello mi fans');
}
let mPhone= new MPhone();
console.log(mPhone.name);//小米

1.2.2、ES6中class静态成员

静态成员属于类不属于实例对象

 class StaticPhone{
  static name = 'shouji';
  static change(){
    console.log('static方法');
  }
}
let nokia = new StaticPhone();
console.log(nokia.name);//undefined
console.log(StaticPhone.name);//手机

2、对象继承

2.1、ES5使用构造函数实现对象继承

//父级
function MPhone(brand, price) {
 this.brand = brand;
 this.price = price;
}
MPhone.prototype.call3 = function () {
 console.log("打电话");
};
//子级
function SmartPhone(brand, price, color, size) {
 //调用父级构造函数初始化代码,避免代码重写
 MPhone.call(this, brand, price);
 this.color = color;
 this.size = size;
}
//设置子级构造函数原型
SmartPhone.prototype = new MPhone(); //实例对象和构造函数原型上的属性方法是相通的
SmartPhone.prototype.constructor = SmartPhone;
//声明子级的方法(注意:实例上并不会出现此方法)
SmartPhone.photo1 = function () {
 console.log("函数对象(父级)方法");
};
//声明子级实例的方法
SmartPhone.prototype.photo = function () {
 console.log("实例对象(子级)方法");
};
//实例化
const hammer = new SmartPhone("锤子", 3333, "黑色", "5inch");
console.log(hammer);

ES5对象继承

2.2、ES6中class对象继承

* 继承方式:class 子类名 ***extends*** 父类名{}
* 子类中添加super()函数
class FatherClass {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }
  call3() {
    console.log('class父级方法');
  }
}
class SonClass extends FatherClass {
  constructor(brand, price, color, size) {
    super(brand, price);
    this.color = color;
    this.size = size;
  }
  sonFun() {
    console.log('子类的方法');
  }
}
let sonClass = new SonClass('iPhone', 333, '星空灰', '4inch');
console.log(sonClass);

ES6类对象继承

3、子类对父类方法的重写

  • 子类不可以直接调用父类同名方法,super方法只能出现在constructor

4、class中getter和setter

  • get通常对对象的动态属性进行封装
  • set添加更多的控制
class GetSetClass {
  get price() {
    console.log('获取价格');
    return 'huoqu'
  }
  set price(newVal) {
    console.log('价格修改');
  }
}
let getSetClass = new GetSetClass();
console.log(getSetClass.price);
getSetClass.price = '124'
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页