【JavaScript进阶】面向对象编程

【JavaScript进阶】面向对象编程

  • 面向对象
    • 本章主要学习:
    • 一、两大编程思想
      • 01. 面向过程编程
      • 02. 面向对象编程
    • 二、面向对象的思维特点——抽象
      • 01.对象
      • 02.类class
    • 三、类
      • 01.创建类
      • 02.类的继承
    • 三、类和对象


面向对象

本章主要学习:

  1. 什么是面向对象?

  2. 类和对象的关系?

  3. 如何使用class创建自定义类?

  4. 什么是继承?


一、两大编程思想

01. 面向过程编程

  • 分析出解决问题所需要的步骤,然后用函数把这些步骤步步实现,使用的时候再一个一个的依次调用就可以了
  • 优点:性能比面向对象高

02. 面向对象编程

  • 面向对象编程,即Object Oriented Programming(OOP)

    • 是把事务分解成为一个个对象,对象之间进行分工与合作,每个对象都是功能中心,具有明确分工
  • 面向对象的特性:

    • 封装性
    • 继承性
    • 多态性
  • 易维护、易复用、易扩展


二、面向对象的思维特点——抽象

  • 抽取对象(抽象)共用的属性和行为组织(封装)成一个函数(模板)
  • 对类进行实例化,获取类的对象

面向对象编程我们考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情

01.对象

  • 对象是一组无序的相关属性和方法的集合,所有的事物都是对象(万物皆对象)

  • 对象是由属性和方法组成的:

    • 属性:事物的特征,在对象中用属性来表示(常用名词)
    • 方法:事物的行为,在对象中用方法来表示(常用动词)

02.类class

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

  • 区别

    • 类:抽象了对象的公共部分,泛指某一大类
    • 对象:特指某一个,通过类实例化一个具体的对象

三、类

01.创建类

  • 语法:

    • 使用class关键词创建一个类,类名后面不需要加小括号
    • 必须使用new关键词创建一个实例对象,创建时,类名后要添加小括号
    //这里创建一个Person类
    class Person{						//创建一个类,类名后面不需要加小括号
        
    	constructor(uname,age){
            
            this.uname = uname;			//用this指向 new创建的具体对象
            this.age = age;				//uname和age是对象的属性,接受实参的值,并赋值 
        }
        say(){							//在类里面添加方法,直接写方法名
    		console.log("Hello!");		
        }
    }
    
    //这里利用类创建一个实例化对象
    var person1 = new Person("Ruovan",24);//利用类创建一个对象,必须使用 new,类名后要添加小括号,用于传入实参。
    
    console.log(person1.uname);			//	Ruovan
    console.log(person1.age);			//	24
    
  • 关于类的构造函数constructor

    • 直接写函数名,不需要写 function
    • 接收传递过来的参数,返回一个实例对象
    • 使用 new 生成实例对象时,会自动调用这个构造函数
    • 必须有这个构造函数,如果没有,那么类也会自动生成

02.类的继承

  • 语法:extendssuper

    class Father{
        constructor(x,y){				//父类的构造函数
            this.x = x;
            this.y = y;
        }
        sum{								//父类有一个sum方法
            console.log(this.x + this.y);	//注意这里的 this 仅仅指向父类,
        }
    }
    
    //创建一个子类Son,继承父类Father,可以使用父类的一些属性和方法
    class Son extends Father{			//通过 extends 来继承一个父类
        
        constructor(x,y){				//子类的构造函数
            
            super(x,y);					//相当于调用了父类的构造函数来赋值,这样才可以使用父类的方法
            							//要使用 super, 必须在子类 this之前调用
            							//必须先调用父类的构造方法,再使用子类的构造方法
            
            this.x = x;					//这里的this指向子类,无法使用父类中具有this的方法
            this.y = y;
            
           
        }
        substruct(x,y){					//子类自己的方法
            console.log(this.x - this.y)
        }
        
    }
    
    var son1 = new Son(3,1);			//创建一个 son1对象
    
    son1.sum();							//调用父类的方法
    son1.substruct();					//调用子类的方法
    
  • 关于继承中的方法

    1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
    2. 继承中,如果子类里面没有就去查找父类有没有这个方法,如果有,就执行父类的这个方法(遵循就近原则)
    3. 但可以通过super主动调用父类里面的方法:super.方法()

三、类和对象

  • 在ES6中类不会进行变量提升,所以必须先定义类再实例化对象

  • 类里面的【共有的属性和方法】,一定要加 this 使用

    <button>点击</button>
    
    
    var that;
    class Person{		
    	constructor(uname,age){
          	//属性和方法全都要加 this ,这里的 this指向 创建的实例对象
            that = this;		//把 this复制给 that,这个 that也指向创建的实例对象
            this.uname = uname;
            this.age = age;
            this.say();				
            
            this.btn = document.querySelector("button");	
            this.btn.onclick = this.say;	//这里是点击了才调用方法函数,所以不需要加小括号
        }
        
        
        say(){
    		console.log(this);		//这个方法里面的 this指向 button,因为是 button点击了才调用这个方法
            console.log(that);		//通过上述的 把 this 复制给 that,可以解决这个问题,这个 that 指向实例对象
        }
        work(){
            console.log(this);		//这个方法里面的 this 指向的是实例对象,因为是实例对象调用了这个方法
        }
    }
    
  • 关于 this 的指向

    • constructor里面的this指向实例对象
    • 方法里面的this指向这个方法的调用者

你可能感兴趣的:(class,面向对象编程,类,javascript)