【JavaScript】 ES6—面向对象、类、构造函数

文章目录

1 面向对象的特征：

封装性

封装就是隐藏对象的属性和实现细节，仅对外公开接口，将抽象得到的数据和行为（或功能）相结合，形成一个有机的整体，也就是将数据与操作数据的源代码进行有机的结合，形成“类”，其中数据和函数都是类的成员。

封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员。

继承性
继承就是子类继承父类的特征和行为，使得子类对象（实例）具有父类的实例域和方法，或子类从父类继承方法，使得子类具有父类相同的行为。

多态性

一个类实例（对象）的相同方法在不同情形有不同表现形式。

2 ES6面向对象

ES是ECMAScript的简写，它是JavaScript的语法规范。
ES6是在ES5基础上扩展，增加了如面向对象编程的相关技术。

2.1 类的语法

class关键字：用来定义一个类
constructor()：类中定义构造函数，若用户没有定义构造函数，系统会生成一个默认的、无参的构造函数

// 定义类
class Person {
  constructor(name) {
    this.name = name;  }
  say(){	// 在类中定义一个say()方法
    console.log('你好，我叫' + this.name);
  }
}

// 利用类创建对象
var p1 = new Person('张三');	// 创建p1对象
var p2 = new Person('李四');	// 创建p2对象
console.log(p1.name);// 访问p1对象的name属性
console.log(p2.name); // 访问p2对象的name属性

ES6支持通过getter、setter在原型上定义属性：

创建getter的时候需要用关键字get;创建setter的时候需要用关键字set。

class Person{
    constructor(pname,page){
        this.pname = pname;
        this.page = page;
    }
    get age(){
        return 20;
    }
    set age(newValue){
       this.page = newValue
    }
}

let p = new Person('张三',20);
console.log(p.age); // 20
console.log(p.age = 28) // 28

2.2 继承`extends`

在ES5标准中可以通过call、apply、bind来实现构造函数的继承：

function Dad(name) {
    this.name = name;
    this.age = 20;
}

function Son(name) {
    Dad.call(this,name);
    //Dad.apply(this,[name]);
    //Dad.bind(this)(name);
    this.height = "178cm";
}

ES6中的继承extends

在JavaScript中，继承用来表示两个类之间的关系.
子类可以继承父类的一些属性和方法。
子类在继承以后还可以增加自己独有的属性和方法。

// 先准备一个父类
class Father {
  constructor() {}
  money() {console.log(100);}
}

// 子类继承父类
class Son extends Father {}

// 创建子类对象
var son = new Son();
son.money();	// 输出结果：100

super关键字：代表当前类的父类

调用父类的构造函数：在子类的构造函数中使用super调用父类的构造函数，则调用语句必须作为子类构造函数的第一条语句 super([参数])
子类不能继承父类的构造函数
调用普通函数： super.函数名([参数])

方法覆盖：若子类中定义的函数与父类中的函数同名时，子类的函数就覆盖了父类中函数

2.3 静态成员、实例成员

实例成员：通过实例对象访问的成员称为实例成员

静态成员：是通过类名或构造函数访问的成员

区别：

实例成员属于具体的对象，而静态成员为所有对象共享
静态成员是通过类名访问，实例成员是通过对象名访问

ES6中静态属性的定义：

先创建类
在类的外部定义静态属性：类名.静态属性名

class Foo{
    constructor(){
        this.color = '红色'
    }
}
Foo.prop = 45   //静态属性
var f1 = new Foo()

ES7中静态属性的定义：

在类定义时，使用static关键字定义静态属性
静态的方法(函数)：只能通过类名访问，不能通过对象名访问

//静态方法
static  函数名([参数]){
	函数体语句
}

class Fooo{
    static prop = 45    //静态属性
    constructor(){
        this.color = '红色'
    }
    static sayHello(){  //静态方法
        console.log('Hello World')
    }
}
var s = new Fooo()
Fooo.sayHello() //访问静态属性