类与继承

1.先了解(是啥？)

• 什么是类?

es6新语法： 本质上就是构造函数的语法糖写法(简写形式)

• 类的作用?

创建对象

• 如何使用类?

如何使用类创建对象

​ // ☞ 先定义一个类 (定义了一个构造函数)

​ // 语法: class 自定义类名 {}

​ // ☞ 通过类创建对象

​ // 语法: let 对象名 = new 类名();

   // 代码演示

   // 创建类
   class People {} 

   // 通过类创建对象
   let zs = new People();

   console.log(zs);

2.如何设置属性和方法

• 构造函数如何设置属性和方法

  //代码演示
  function fn() {
      //设置属性
       this.属性 = 值;
  }
  
  //将方法设置给原型对象
  构造函数.prototype.方法名 = function() {}
  

• 类如何设置属性和方法

  	// ☞ 类中设置属性 通过constructor设置属性
  	// ☞ 类中设置方法 和constructor并列设置即可
  	// 代码演示:
  	class People {
              //要将属性通过constructor设置
              constructor(uname, uage) {
                  this.uname = uname;
                  this.age = uage;
              }
              // 方法, 本质上将方法添加到原型对象身上
              eat() {
                  console.log('吃饭方法');
              }
              sing() {
                  console.log('唱歌');
              }
          }
          // 通过类创建对象
          let zs = new People('张三', 23);
          zs.eat();    //吃饭方法
          zs.sing();   //唱歌
  	console.log(zs.uname);  //张三
  

3.属性和方法的继承

• 为什么要用到继承(目的是啥？)

​ 减少代码量

• 构造函数中属性和方法的继承

	//属性继承 (本质是用了call()方法)

	function Father(uname, age, myheight, gender) {
             this.uname = uname;
             this.age = age;
             this.myheight = myheight;
             this.gender = gender;
        }
        // 通过 Father构造函数创建的实例对象身上具有了以上属性

        function Son(uname, age, myheight, gender) {
            // 调用Father构造函数, 修改Father中的this指向, 指向当前Son创建的实例对象
            // 给Son这个构造函数设置了相关的属性
            // Father.call(Son, uname, age, myheight, gender);
            // 给当前实例对象设置的属性
            Father.call(this, uname, age, myheight, gender);
        }
        // 通过 Son构造函数创建的实例对象身上也有以上属性
        let zs = new Son('zs', 18, 180, '男');
        console.log(zs);    
        console.dir(Son);

	//方法继承  (本质是原型继承)

	function F(uname) {
            this.uname = uname;
        }
        // 通过原型对象设置方法
        F.prototype.eat = function() {
            console.log('吃饭...');
        }

        let zs = new F('张三');
        // zs 实例对象身上有 __proto__ 指向了原型对象
        zs.eat();   //吃饭...

        // 方法继承: 原型继承
        function S() {
            this.uname = '李四';
        }
        // 原型继承(方法继承)
        S.prototype = new F();
        let ls = new S();
        ls.eat();   //吃饭...

• 类中属性和方法的继承

	// 实现子类继承父类中的属性和方法
        // 语法: 子类 extends 父类 {}
        // 代码演示:
        class F {
            constructor() {
                this.uname = 'zs';
            }
            eat() {
                console.log('父类中的吃饭方法');
            }
        }
        // 子类继承父类
        class S extends F {
            eat() {
                console.log('我是子类中的eat方法');
            }
        }
        // 创建一个子类对象
        let zs = new S();
        zs.eat();   //我是子类中的eat方法 （如果有相同的方法名采用就近原则）
        console.log(zs.uname);   //zs

	// super()
        // 作用: 类的继承过中用来实现调用父类中constructor
        // 什么时候用: 如果子类继承父类,且子类中还有自己的constructor(构造函数),必须使用super
        // 代码演示:
        class Father {
            constructor(uname, uage, ugender) {
                this.uname = uname;
                this.uage = uage;
                this.ugender = ugender;
            }
            eat() {
                console.log('父类中的吃饭...');
            }
        }
        class Son extends Father{
            // 如果子类中有自己的属性,则必须设置constructor
            constructor(uname, uage, ugender, score) {
                // 调用父类中的constructor
                super(uname, uage, ugender);
                this.score = score;
            }
            eat() {
                console.log('子类中的吃饭...');
            }
        }
        let zs = new Son('张三', 18, '男', 100);
        zs.eat();   //子类中的吃饭...
        console.log(zs);

4.总结

	// 类的作用:  创建对象 (可以使用类也可以使用构造函数)
        // 类的定义:  class 类名 {}
        // 类中设置属性和方法: 
        // class 类名 {
        //     constructor(形参1, 形参2) {
        //         this.属性 = 值;
        //     }
        //     //方法
        //     eat1() {}
        //     eat2() {}
        // }
        // 创建对象: let 对象名 = new 类名(实参1, 实参2);

        // 类的继承: 类名1 extends 类名2 {}
        // 注意事项:
        // 1. 如果子类中没有constructor,则在继承的时候,可以直接使用父类中的属性
        // 2. 如果子类中有constructor,则在继承的时候, 在子类constructor中,this前面加 super() 
        // 3. super()的作用是用来调用父类中的constructor
        // 4. 在类中方法与方法之间访问或者方法与属性访问,必须前面加this

标签：ES6,console,继承,子类,uname,constructor,属性,zs
来源： https://www.cnblogs.com/zhao-menglin/p/es6.html