js高级笔记(1)类和对象

100 阅读4分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第10天,点击查看活动详情

面对过程编程

面对过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个个的一次调用就可以了。

面对对象编程 OOP

面对对象是把事务分解成一个个对象,然后由对象之间分工与合作。 面对对象具有灵活,代码可复用,容易维护和开发的优点,更适合多人合作的大型软件项目 面对对象的特性:封装性 继承性 多态性

面对对象和面对对象的对比

面对过程:优点:性能比面向对对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程 缺点:没有面向对象易维护,易复用,易扩展 面对对象:优点:易维护,易复用,易扩展,由于面对对象有封装,继承,多态性的特性,可以设计出低耦合的系统,使系统更加灵活,更加易于维护 缺点:性能比面对过程低

对象

在js中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串,数值,数组,函数等。 对象是由属性和方法组成: 属性:事物的特征,在对象中用属性来表示 方法:事物的行为,在对象中用方法来表

类 class

在ES6中新增加了类的概念,可以使用class关键字声明一个类,之后以这个类来实例化对象
类抽象了对象的公共部分,它泛指某一大类
对象特指某一个,通过类实例化一个具体的对象

面对对象的思维特点:
1.抽取对象共用的属性和行为组织成一个类
2.对类进行实例化,获取类的对象\

//1.创建class创建一个明星类
class Star{
    constructor(name,age){
       this.name = name;
       this.age = age;
    }
    sing(song){
       console.log(this.name+song);     
     }
}
//2.利用类创建对象 new
var ldh = new Star('刘德华',18);
console.log(ldh);
//(1).通过class关键字创建类,类名我们还是习惯性定义首字母大写
//(2).类里面有个constructor函数,可以接受传递过来的参数,同时返回实例对象
//(3).constructor 函数只要new生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数
//(4).生成实例new不能省略
//(5).最后注意语法规范,创建类,类名后面不要加小括号,生成实例,类名后面加小括号,构造函数不需要加function
ldh.sing('冰雨')
//(1).我们类里面所有函数不需要写function
//(2).多个函数方法之间不需要添加逗号分隔

类的继承

class Father{
         constructor(x,y){
              this.x=x;
              this.y=y;
         }
            sum(){
                  console.log(this.x+this.y);
             }
         }
   class Son extend Father{
             constructor(x,y){
                     super(1,2);//调用了父类中的构造函数
                }
       }      
       var son =new Son(1,2);
       son.sum();

super关键字 用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。

//super 关键字调用父类普通函数
class Father{
      say(){
            return  '我是爸爸';
       }
   }
   class Son extends Father{
           say(){
             console.log(super.say()+'的儿子');
             //super.say()就是调用父类中的普通函数 say()
          }
      }
      var son=new Son();
      son.say();
      //继承中的属性或者方法查找原则:就近原则
      //1.继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
      //2.继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则)
//子类继承父类方法
class Father{
    constructor(x,y){
              this.x=x;
              this.y=y;
         }
      sum(x,y){
            console.log(this.x,this.y);
       }
   }
   //子类继承父类加法方法 同时扩展减法方法
   class Son extends Father{
           constructor(x,y){
                //利用super调用父类的构造函数
                //super必须在子类this之前调用
                super(x,y);
                 this.x=x;
                 this.y=y;
         }
         substract(){
                  console.log(this.x - this.y);
          }
      }
      var son=new Son(5,3);
      son.substract();

ES6三个注意点

1.在ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象。
2.类里面的共有属性和方法一定要加this使用。
3.类里面的this指向问题:constructor里面的this指向实例对象,方法里面的this指向这个方法的调用者