JavaScript面向对象ES6中面向对象语法

Posted 2021-06-10 YuLong~W

文章目录

• 面向对象
• ES6面向对象语法
• • 类和对象
  • 构造函数
  • 成员函数
  • 继承
  • 静态成员、实例成员
  • • 静态属性的定义
    • 静态方法的定义

面向对象

面向对象就是把需要解决的问题分解成一个个对象，建立对象不是为了实现一个步骤，而是为了描述每个对象在解决问题中的行为，面向对象的核心是对象。

面向对象的优势：

• 模块化更深，封装性强
• 更容易实现复杂的业务逻辑
• 更容易维护、复用、扩展

面向对象的特征：

• 封装性：对象是属性和行为的结合体
• 多态性：同一消息被不同对象接收后，会产生不同的效果
• 继承性：子类型可继承父类的信息

ES6面向对象语法

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

类和对象

• 类：具有相同属性和行为的对象的集合（类是对象的抽象）
• 对象：对象是类的具体化（实例化）

class关键字：用来定义类的

class  类名 {
	属性
	函数
}

类名是一个用户标识符，建议首字母大写

构造函数

ES6中用constructor( ) 来定义构造函数，作用是初始化对象的成员，即创建对象，并为对象的成员赋初始值

构造函数不是必须定义的。若用户没有定义构造函数，系统会生成一个默认、无参的构造函数

//类的构造函数使用练习
class Person{
    constructor(name,age,sex){
        this.name=name
        this.age=age
        this.sex=sex
    }
    fun=function(){ 
        console.log("姓名："+this.name)
        console.log("年龄："+this.age)
        console.log("性别："+this.sex)
    }
}

var p=new Person("张三",20,'男')
p.fun()

构造函数和类的区别：

类中的成员方法是定义在类中的，使用类创建对象后，这些对象的方法都是引用了同一个方法，这样可以节省内存空间。

成员函数

函数名([参数]){
		函数体语句
}

变量名=function([参数]){
		函数体语句
}

//输入半径，求圆的面积和周长
class Circle{
    constructor(r){
        this.radius=r
    }
    //圆的面积
    area(){
        var s=Math.PI*Math.pow(this.radius,2)
        return s
    }
    //圆的周长
    Circle_length=function(){
        return 2*Math.PI*this.radius
    }
}

var c=new  Circle(5)
console.log("圆的面积:"+c.area())
console.log("圆的周长:"+c.Circle_length())

//模拟简单计算器,可进行加减乘除运算
class Number{
    constructor(n1,n2){
        this.n1=n1
        this.n2=n2
    }
    add(){
        return this.n1+this.n2
    }
    sub(){
        return this.n1-this.n2
    }
    mul(){
        return this.n1*this.n2
    }
    div(){
        if (this.n2==0) {
            return "除数不能为0"
        }else{
            return this.n1/this.n2
        }
    }
}

var n=new Number(6,0)
console.log("相加="+n.add())
console.log("相减="+n.sub())
console.log("相乘="+n.mul())
console.log("相除="+n.div())

继承

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

class子类名 extends 父类名{
		函数体语句
}

• 父类又称基类或超类，必须已经定义
• 子类又称派生类，可以继承父类属性和函数

super关键字：

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

方法覆盖： 子类定义函数与父类函数同名时，子类函数覆盖父类

//继承
class Father{
    constructor(type,color){
        this.type=type
        this.color=color
    }
    money(){
       console.log(10)
    }
    show(){
        console.log("类型:"+this.type)
        console.log("颜色："+this.color)
    }
}
class Son extends Father{
    constructor(type,color,weight){
        super(type,color) //调用父类构造函数
        this.weight=weight
    }
    show(){  //子类同名方法
        super.show()
        console.log("重量："+this.weight)
    }
    other(){
        return "子类的其他方法"
    }
}

var s= new Son('4G手机','土豪金','500g')
s.money()
s.show()

静态成员、实例成员

静态成员：通过类名和构造函数访问的成员
实例成员：是实例对象的成员

区别：

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

静态属性的定义

• ES5中： 创建构造函数，构造函数内部定义静态属性：构造函数名.静态属性名
• ES6中： 创建类，在类的外部定义静态属性： 类名.静态属性名
• ES7中： 创建类，在类定义时，使用static关键字定义静态属性： static 静态属性名

静态方法的定义

举例说明：定义静态属性、方法

static 函数名([参数]){
	函数体
}

//ES5定义静态属性，使用构造函数定义
function Student(name,age,sex){
    Student.school='XX高中' //ES5中静态属性
    this.name=name
    this.age=age
    this.sex=sex
    this.show =function(){
        console.log(this.name)
        console.log(this.age)
        console.log(this.sex)
    }
}
var s=new Student('张三','18','女')
s.show()
console.log(Student.school)//如果没有创建对象s，直接打印会输出undefined

//定义静态属性，ES5以后引入class属性后可用类定义
class Foo{
    //ES7中定义静态属性      static prop=45 
    constructor(){
        this.color="红色"
    }
    static sayHello(){  //定义静态方法
        console.log("hello")
    }
}
// ES6中静态属性
Foo.prop=45  //prop是静态的属性

var f1=new Foo()
console.log("静态属性："+Foo.prop)
Foo.sayHello()