JavaScript-面向对象

Posted 速速逃离月球表面

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript-面向对象相关的知识,希望对你有一定的参考价值。

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

以上是关于JavaScript-面向对象的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

常用Javascript代码片段集锦

JavaScript单行代码,也就是代码片段

javascript 仿面向对象编程实例代码(私有,公共变量。。。)

JavaScript对象原型链继承闭包