33 ES6中的类和对象

技术交流QQ群:1027579432,欢迎你的加入!

欢迎关注我的微信公众号:CurryCoder的程序人生

1.面向对象

  • 面向对象的思维特点:
    • a.抽取(抽象)对象共有的属性和行为组织(封装)成一个类(模板);
    • b.对类进行实例化,获取类的对象;
  • 面向对象编程考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情。

2.对象

  • 现实生活中,万物皆对象,对象是一个具体的事物,看得见摸得着的事物。
  • 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象。例如:字符串、数值、数组、函数等。
  • 对象是由属性和方法组成
    • 属性:事物的特征,在对象中用属性来表示(常用名词);
    • 方法:事物的行为,在对象中用方法来表示(常用动词);

3.类class

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

4.创建类

  • 语法:
    class 类名{
        // class body
    }
    
  • 创建实例:
    var xx = new 类名();
    
  • 注意:类必须使用new实例化对象

5.类constructor构造函数

  • constuctor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例时,自动调用该方法。如果没有显示定义,类内部就会自动为我们创建一个constructor()。
  • 注意
    • 通过class关键字创建类,类名习惯性定义首字母大写;
    • 类里面有个constructor函数,可以接收传递过来的参数,同时返回实例对象;
    • constructor函数只要new生成实例时,就会自动调用这个函数,如果我们不写这个函数,类也会自动生成这个函数;
    • 生成实例new不能省略;
    • 注意语法规范,创建类,类名后不加小括号;生成实例,类名后加小括号;构造函数不需要加function。

6.类添加方法

  • 语法:
    class Star {
        // 构造函数
        constructor(uname, age) {
            this.uname  = uname;  
            this.age = age;
        }
        // 方法
        sing(){
            console.log('我正在唱歌...');
        }
    }
    
  • 注意
    • 类中的所有方法都不要写function;
    • 多个方法之间不需要添加逗号分隔;

7.类的继承

  • 程序中的继承:子类可以继承父类的一些属性和方法。
    class Father{
        constructor(){
    
        }
    
        money(){
            console.log(100);
        }
    }
    // 继承
    class Son extends Father{
    
    }
    
    var son = new Son();
    son.money(); 
    

8.super关键字

  • super关键字用于访问和调用对象父类上的函数。可以调用父类的构造函数,也可以调用父类的普通函数。
  • 就近原则(继承中属性或方法的查找原则):
    • 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的方法;
    • 继承中,如果子类中没有这个方法,就去查找父类中有没有这个方法。如果有,就执行父类的这个方法;
  • 语法
    class Son extends Father{
        constructor(x, y) {
            // super必须在子类this之前调用!
            super(x, y);
            this.x = x;
            this.y = y;
            // 利用super调用父类的构造函数
            
        }
        // 子类独有的方法
        subtract(){
            console.log(this.x - this.y);
        }
    }
    
    var son = new Son(5, 4);
    son.subtract();
    son.sum();
    
  • 注意:子类在构造函数中使用super,必须要放到this之前(必须先调用父类的构造函数,再使用子类的构造函数)

9.三个注意点

  • ES6中类没有变量提升,所以必须先定义类,才能通过类实例出对象;
  • 类中的共有的属性和方法一定要加this使用;
  • 类中的this指向问题;
    • constructor中的this指向的是实例对象;
    • 方法中的this指向这个方法的调用者;

10.资料下载

  • 笔记及代码,欢迎 star,follow,fork......

你可能感兴趣的:(33 ES6中的类和对象)