JavaScript面向对象ES6类的语法静态成员与实例成员

Posted 2021-07-12 开到荼蘼223's

面向对象

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

面向对象的优势：

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

面向对象的特征：

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

ES6面向对象语法

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

类和对象

类：具有相同属性和行为的集合称为类(类是对象的抽象)，类中的大多数数据只能用本类的方法进行处理。
对象：是类的实例(是类的具体化)

class关键字：用来定义类的

                class 类名{// "类名"是一个用户标识符 通常建议首字母大写
                    属性;
                    函数;
                }    

构造函数

在ES6中使用constructor()来定义构造函数，作用是初始化对象的属性(成员变量)，构造函数不是必须的，若用户没有定义构造函数，系统会生成一个默认的、无参的构造函数。

普通的成员函数

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

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

            class Person{
                constructor(name,age,sex){// 构造函数 初始化对象的成员
                    this.name = name;// this指向构造函数新创建的对象
                    this.age = age;
                    this.sex = sex;
                }
                    tt = function(){ //普通的成员函数
	                    console.log(this.name);
	                    console.log(this.age);
	                    console.log(this.sex);
                	}	
            }
            var p = new Person('李相赫',25,'男')// p1是一个对象 通过调用构造函数对p1的三个属性进行了初始化
            p.fun();

        class Circle{// 定义类Circlie
            constructor(r){
                this.radius = r;
            };
            area(){ // 计算圆的面积
                var s = Math.PI*this.radius**2;
                return s;
            };
            // 计算圆的周长
            CircleLength = function(){
            return 2*Math.PI*this.radius;
            };
        };
        var c1 = new Circle(5);
        console.log('半径为5的圆的面积='+c1.area());
        console.log('半径为5的圆的周长='+c1.Circle_length());

结果如下：

		// 用类实现简单的四则运算
        class Number{// 定义类Number
            constructor(n1,n2){
                this.n1=n1;
                this.n2=n2;
            };
            add(){
                var sum = this.n1+this.n2;
                return sum;
            };
            sub(){
                var sum1 = this.n1-this.n2;
                return sum1;
            };
            mut(){
                var sum2 = this.n1*this.n2;
                return sum2;
            };
            div(){
                if(this.n2!=0){
                    var sum3 = this.n1/this.n2;
                    return sum3;
                }
            }
        }
        var p1 = new Number(12,21);
        console.log(p1.add());
        console.log(p1.sub());
        console.log(p1.mut());
        console.log(p1.div());

ES6中类的继承

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

语法：

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

关于继承需要注意：

• 父类必须已经定义
• 子类又称为派生类 可以继承父类的属性和函数
• 子类不能继承父类的构造函数

super关键字
子类不可以继承父类的构造函数，如果要调用父类的构造函数可以使用super关键字。

**注意：**在子类的构造函数中使用super调用父类的构造函数，则调用语句必须作为子类构造函数的第一条语句

调用父类构造函数

                    super([参数])

调用普通成员函数

                    super.函数名([参数])

方法覆盖
若子类中定义的函数与父类中的函数同名，子类函数覆盖父类中的函数，可以在子类中调用父类的同名的普通成员函数来解决

        class Father{ //父类(基类或超类)
            constructor(type,color){
                this.type = type;
                this.color = color;
            }
            money(){
                console.log(100);
            }
            show(){
                console.log('类型：'+this.type);
                console.log('颜色：'+this.color);
            }
        }
        class Son extends Father{ //Son是子类(又称派生类)
            constructor(type,color,weight){
                super(type,color); //调用父类的构造函数 要放在首位
                this.weight = weight;
            };
            show(){
                super.show();// 调用父类的普通成员函数
                console.log('重量：'+this.weight);
            };
            other(){
                return '子类的其他方法';
            };
        };
        var s1 = new Son('iPhone 12','黑色','3000g');//s1为子类的实例
        s1.show();
        console.log(s1.other());

静态成员和实例成员

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

区别：

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

在ES5中定义静态属性

        function Student(name,age,sex){
            Student.school = '西安邮电大学';// school是静态成员
            this.name = name;
            this.age = age;
            this.sex = sex;// name age sex都是实例成员
            this.show = function(){
                console.log('姓名：'+this.name);
                console.log('年龄：'+this.age);
                console.log('性别：'+this.sex);
            };
        };
        var f = new Student('李相赫',23,'男');
        f.show();
        console.log(Student.school);// 西安邮电大学
        console.log(f.school);// undefined

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

        class Foo{
            constructor(){
                this.color = '红色';// color是实例成员
            }
        }
        Foo.prop = 45;// prop是静态成员
        var f1 = new Foo();
        console.log('静态属性：'+Foo.prop);// 45
        console.log(f1.prop);// undefined

在ES7中静态属性定义
在类定义时 使用static关键字定义静态属性

        class Foo{
            static prop = 45; //prop是静态成员
            constructor(){
                this.color = '红色';
            }
        }
        var f2 = new Foo();
        console.log('静态属性：'+Foo.prop);// 45
        console.log(f2.prop);// undefined

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

	class Person {
		sing(){
			console.log('hello');
		}
	}
	var p1 = new Person();
	var p2 = new Person();
	console.log(p1.sing === p2.sing);	// 输出结果：true