Java教程

JavaScript面向对象(上)

本文主要是介绍JavaScript面向对象(上),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JavaScript面向对象

  • 1 面向对象概述
    • 1.1 面向过程与面向对象
    • 1.2 面向对象的优势
    • 1.3 面向对象的特征
  • 2 ES6面向对象语法
    • 2.1 类和对象
    • 2.2 类的基本语法
    • 2.3 利用类创建对象
    • 2.4 对象成员的访问
    • 2.5 类中的方法
    • 2.6 继承
    • 2.7 super()关键字
    • 2.8 实例成员和静态成员
  • 3 ES5中定义类
  • 4 案例练习

1 面向对象概述

1.1 面向过程与面向对象

面向过程:面向过程就是分析出解决问题需要的步骤,然后用函数把这些步骤一个个实现,使用的时候依次调用。面向过程的核心是解决问题的过程。

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

1.2 面向对象的优势

1、模块化更深,封装性强。
2、更容易实现复杂的业务逻辑。
3、更易维护、易复用、易扩展。

1.3 面向对象的特征

1、封装性:对象是属性(静态特征)和行为(动态特征)的结合体(封装体)。
2、继承性:父类(基类)的属性和行为可以派生到子类中。子类不需要重复定义。
3、多态性:同一个消息传递给不同的对象,得到的结果不同。

2 ES6面向对象语法

2.1 类和对象

:事物分为具体的事物和抽象的事物,当我们脑中出现“书”这个词的时候,可以大致想象到书的基本样貌特征,这个过程就是抽象,抽象出来的结果,就是类。
也就是说,类是具有相同属性和行为的对象的抽象。

对象:而当我们拿起手里的一本真实存在的书的时候,这本书有自己的书名、作者、页数等信息,像这种具体的事物,就是对象。
也就是说,对象是类的实例(类的具体体现)。

2.2 类的基本语法

class关键字:用来定义一个类,在类中可以定义constructor()构造方法,用来初始化对象的成员。

定义类的方法:

class 类名 {
    constructor([参数]) { //构造方法:用来初始化对象的成员
        //方法体;
    }
}

示例:

class Student { //使用class关键字定义类
    constructor(na, a) { //构造方法:用来初始化对象的成员
        this.name = na;
        this.age = a;
    }
}

其中,“this.name”中的name是对象的属性

2.3 利用类创建对象

语法为:

var 对象名 = new 类名([参数]);

示例:假设之前已经定义了一个Person类,里面有name属性,用以下的方法就可以创建对象并访问

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

2.4 对象成员的访问

对象成员(包括属性和方法)的访问,语法如下:

对象名.属性名

或者:

 对象名.方法名([参数])

注意:在ES6中constructor构造方法不能显式调用

2.5 类中的方法

在下面的例子中定义了一个Say()方法,并对方法进行了调用

示例:

class Person {//定义一个Person类
    constructor(name) {
        this.name = name;//初始化对象的成员
    }
    say() {	// 在类中定义一个say()方法
        console.log("你好,我叫" + this.name);
    }
}
var p1 = new Person("橘猫吃不胖");
p1.say();

结果为:你好,我叫橘猫吃不胖

2.6 继承

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

父类:又称为基类或超类,被继承的类
子类:又称为派生类,由父类派生来的类

继承的实现:extends
语法为:

class 子类名 extends 父类名 {
    constructor() {
    }
    //其他的成员方法
}

示例:定义父类和子类

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

调用父类中的方法:

// 创建子类对象
var son = new Son();
son.money();

结果为:100

2.7 super()关键字

super关键字:super关键字用于访问和调用对象在父类上的方法,可以调用父类的构造方法,也可以调用父类的普通方法。也就是说,uper关键字代表父类,用来访问和调用父类的成员。

调用父类的构造方法:在子类的构造方法中调用父类的构造方法。 在继承中,创建子类对象时必须先调用父类的构造方法,然后再调用子类的构造方法,并且父类构造方法的调用必须是子类构造方法中第一条语句。

调用父类的构造方法语法:

super([参数]);

调用父类的普通方法:

super.方法名([参数])

示例:在子类中添加特有的方法

class Father {//定义一个父类
    constructor(x, y) {//初始话对象的成员
        this.x = x;
        this.y = y;
    }
    sum() {//定义一个方法
        console.log(this.x + this.y);
    }
}
class Son extends Father {//子类Son继承父类Father
    constructor(x, y) {
        super(x, y); // super必须在子类的this之前调用
        this.x = x;
        this.y = y;
    }
    subtract() {// 定义一个子类特有的方法
        console.log(this.x - this.y);
    }
}
var son = new Son(5, 3);//实例化对象
son.sum(); // 输出结果:8
son.subtract(); // 输出结果:2

结果为:8 2

2.8 实例成员和静态成员

实例成员:对象成员
静态成员:所有对象共享的成员,不属于某个具体的对象,又称为类成员

ES6中访问:

类名.成员名

ES5中访问:

构造方法名.成员名

3 ES5中定义类

在ES5中定义类:通过构造函数实现

示例:

function Student(name, age) { //构造函数,建议首字母大写,Student可以看作类
    this.name = name;
    this.age = age;
}

创建类的对象:

var s1 = new Student("张三", 19);

4 案例练习

设计雇员Employee类,记录雇员的情况,包括姓名、年薪、受雇时间,要求定义MyDate类作为受雇时间,其中包括工作的年、月、日,并用相应的方法(构造方法、显示信息的方法)对Employee类进行设置。

class MyDate {//定义MyData类作为受雇时间
    constructor(year, month, date) {//年、月、日
        //初始化对象的成员
        this.year = year;
        this.month = month;
        this.date = date;
    }
    show() {//构造显示受雇时间的方法
        console.log(this.year + "年" + this.month + "月" + this.date + "日")
    }
}
class Employee {//定义雇员类
    constructor(name, salary, workDate) {//姓名、薪资、受雇时间
        this.name = name;
        this.salary = salary;
        this.workDate = workDate;
    }
    disp() {//构造显示姓名、年薪、受雇时间的方法
        console.log("姓名:" + this.name);
        console.log("年薪:" + this.salary);
        console.log("受雇时间:");
        this.workDate.show()
    }
}
var work1 = new MyDate(2021, 6, 15);//创建受雇时间对象
var e1 = new Employee("周瑜", 400000, work1);//创建雇员对象
e1.disp();

在这里插入图片描述

这篇关于JavaScript面向对象(上)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!