js高级之面向对象

js面向对象

1. 创建类：

   class name{
   	//class body
   }
   创建实例：var xx = new name();
   //注意：类必须使用new实例化对象
   

2. 类constructor构造函数：可以接受传递过来的参数，同时返回实例对象
   • constructor函数：只要new生成实例时，就会自动调用这个函数，如果我们不写这个函数，类也会自动生成这个函数。

     <script>
         //1.创建类class 创建一个 明星类
         class Star{
             //类的共有属性放到constructor里面
             constructor(uname, age){
                 this.uname = uname;
                 this.age = age;
             }
             sing(song){
                 console.log(this.uname + song);
             }
         }
         //2.利用类创建对象 new
         var ldh = new Star('刘德华', 18);
         var zxy = new Star('张学友', 28);
         console.log(ldh);
         console.log(zxy);
         //调用函数
         ldh.sing('冰雨');
         zxy.sing('情网');
     
     </script>
     

3. 类中添加方法
   • 我们类里面所有的函数不需要写function;
   • 多个函数方法之间不需要添加逗号分隔；上面代码中的sing
4. 继承
   • extends继承父类属性和方法
   • super() //调用父类中的构造函数，也可以调用父类普通函数
   • 继承中，如果实例化子类输出一个方法，子类优先，没有再父类（就近原则）
   • 子类中super.函数名() 就是调用父类中的函数
   • 子类函数中使用super，必须放到this面前（先调用父类构造方法，再使用子类构造方法）
   • 注意：
     • ES6中类没有变量提升，所以先定义类，才能通过类实例化对象
     • 类里面的共有的属性和方法一定要加this

     <script>
         class Father {
             constructor(x, y) {
                 this.x = x;
                 this.y = y;
             }
             sum() {
                 console.log(this.x + this.y);
             }
         }
     
         class Son extends Father{
             constructor(x, y) {
                 super(x, y); //放在子类的this之前，先调用父类的构造方法
                 this.x = x;
                 this.y = y;
     
             }
             structor() {
                 console.log(this.x - this.y);
             }
         }
         var son = new Son(12,3);
         // console.log(son);
         son.structor();
         son.sum();
     </script>