标签：ES6 console 继承 子类 uname constructor 属性 zs

类与继承

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。