JavaScript-面向对象

Posted 2021-06-14 速速逃离月球表面

文章目录

• 1. 面向对象
• 2. ES6中的类和对象
• • 2.1 类和对象
  • 2.2 构造函数
  • 2.3 成员函数
  • 2.4 类的继承
  • 2.5 静态成员和实例成员
  • • 静态属性的定义：
    • 静态的方法（函数）

1. 面向对象

面向过程编程POP：
就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用。面向过程，就是按照分析好了的步骤，按照步骤解决问题。

面向对象编程OOP：
面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作。面向对象是以对象功能来划分问题，而不是步骤。

在面向对象程序开发思想中，每一个对象都是功能中心，具有明确分工。
面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

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

面向过程与面向对象的对比：

• 面向过程：
  优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程。
  缺点：没有面向对象易维护、易复用、易扩展
• 面向对象：
  优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性，可以设计出低耦合的系统，使系统 更加灵活、更加易于维护
  缺点：性能比面向过程低
• 用面向过程的方法写出来的程序是一份蛋炒饭，而用面向对象写出来的程序是一份盖浇饭。

2. ES6中的类和对象

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

2.1 类和对象

对象：
在 javascript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。
对象是由属性和方法组成的：
属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

类：
在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。

类抽象了对象的公共部分，它泛指某一大类（class）
对象特指某一个，通过类实例化一个具体的对象

创建类：

class name {
  // class body
  函数
  属性
}       

创建实例：

var xx = new name();     

注意：类必须使用 new 实例化对象
“类名”是一个用户标识符，建议首字母大写

面向对象的思维特点:
抽取（抽象）对象共用的属性和行为组织(封装)成一个类(模板)
对类进行实例化, 获取类的对象

2.2 构造函数

在ES6中使用constructor() 方法，是类的构造函数(默认方法)，作用是初始化对象的属性用于接受传递的参数,同时返回实例对象，通过 new 命令生成对象实例时，自动调用该方法。如果没有显示定义, 类内部会自动创建一个constructor()

class Person {
  constructor(name,age) {   // constructor 构造方法或者构造函数
      this.name = name;
      this.age = age;
    }
} 
//创建实例
var zs = new Person('张三', 18); 
console.log(ldh.name)        

• class关键字创建类，类名习惯首字母大写
• 注意语法规范：创建类 类名后面不要加()，生成实例 类名后面加()，构造函数不需要加function
• 构造函数不是必须的（视情况而定，一般建议都带上；不是必须定义的，但一定会有生成）

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

类添加方法：
语法：

class Person {
  constructor(name,age) {   // constructor 构造器或者构造函数
      this.name = name;
      this.age = age;
    }
   say() {
      console.log(this.name + '你好');
   }
}   
//创建实例
var ldh = new Person('刘德华', 18); 
ldh.say()   

注意：方法之间不能加逗号分隔，同时方法不需要添加function关键字

2.3 成员函数

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

变量名=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())

2.4 类的继承

程序中的继承：子类可以继承父类的一些属性和方法
语法：

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

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

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

• 用于访问和调用对象父类上的函数。可以调用父类的构造函数和父类的普通函数
• 调用父类的构造函数时，则调用语句必须放到 this 前面 (必须先调用父类的构造方法,再使用子类构造方法)：super([参数])
• 调用普通成员函数：super.函数名([参数])
• 子类不能继承父类构造函数，只能继承属性和成员函数和一些属性，故需要用到super()

语法：

class Person {   // 父类
      constructor(surname){
         this.surname = surname;
     }
} 
class  Student extends Person {       // 子类继承父类
     constructor(surname,firstname){
          super(surname);             // 调用父类的constructor(surname)
	this.firstname = firstname; // 定义子类独有的属性
     }
}       

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

//继承
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()

注意：

• 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象.
• 类里面的共有属性和方法一定要加this使用.
• 类里面的this指向问题.
• constructor 里面的this指向实例对象, 方法里面的this 指向这个方法的调用者
• 构造方法越简单越好，尽量不要使用循环和递归这类耗时间和方法的

2.5 静态成员和实例成员

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

二者区别：

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

静态属性的定义：

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