Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > ES6类的使用
Blogger Information
Blog 56
fans 1
comment 0
visits 62702
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
ES6类的使用
零龙
Original
803 people have browsed it

类的表达式

-类
示例

  1. let Person = class{
  2.    constructor(name)
  3.    {
  4.      this.name = name;
  5.    }
  6.    getName()
  7.    {
  8.        return this.name;
  9.    }
  10. }
  11. //类的实例化
  13. let person = new Person("曹操");
  14. console.log(person.getName());

示例图

  • 类作为参数使用
    示例
  1.  let createObj = function(className,...args)
  2.  {
  3.     return new className(...args);
  4.  };
  5.  let obj = createObj(class{
  7.      hello(){
  8.        return "hello Js";
  9.      };
  10.  });
  12. console.log(obj.hello());

示例图

  • 立即实例化一个类表达式，创建一个单例

示例

  1. let user = new (class{
  2.    constructor(email)
  3.    {
  4.      this.email = email
  5.    }
  6.    getEmail()
  7.    {
  8.       return this.email;
  9.    }
  10. })("qq@qq.com");
  12.   console.log(user.getEmail());

示例图

类的构造方法

  • 构造方法
  1.   class User
  2.         {
  3.             constructor()
  4.             {
  5.                 console.log(this);
  6.                 return Object.create(null);
  7.             }
  8.         }
  9.         const user = new User();
  10.         console.log(user);
  12.         class Username{
  13.             constructor(id,name){
  14.                 this.id = id;
  15.                 this.name = name;
  16.                 this.getName = () => console.log("hello",this.name);
  18.             }
  19.             show()
  20.             {
  21.                 console.log(this.id,this,name);
  22.             }
  24.         }
  25.         const username = new Username(1,"admin");
  26.         console.log(username);
  27.         console.log(username.getName());
  28.         console.log(username.show());

示例图

存储属性

  • 存储属性

示例

  1. <script>
  3.         function User(age)
  4.         {
  5.             this.age = age;
  7.         }
  9.         Object.defineProperty(User.prototype,"verifyAge",{
  10.           get(){return this.age},
  11.           set(value)
  12.           {
  13.               if(value >=18 && value<=60) this.age = value;
  14.           },
  15.           configurable:true,
  16.           enumerable:true,
  17.         });
  18.         let user = new User(50);
  19.         console.log(user);
  20.         console.log(user.age);
  21.         console.log(user.verifyAge);
  22.         user.verifyAge = 80;
  23.         user.age = 20;
  24.         console.log(user.age);
  25.     </script>

示例图

访问静态成员

  • 静态成员

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.       // 静态成员的特征：
  11.       // 1.不能被实例访问
  12.       // 2.不能被实例共享
  13.       // 3.必须通过类才可以访问
  14.      //原生
  16.      function User() {};
  17.      User.nation = "泰国";
  18.      User.say = () => `我昨天做梦去了"${user.nation}"哈哈！`;
  19.      console.dir(User);
  20.      console.log(User.hasOwnProperty("nation"));
  21.      console.log(User.hasOwnProperty("say"));
  22.      console.log(User.hasOwnProperty("constructor"));
  23.      console.log(User.hasOwnProperty("call"));
  24.      console.log(User.hasOwnProperty("toString"));
  26.      // ES6中的类实现静态成员
  27.      class UserClass
  28.      {
  29.          hello()
  30.          {
  31.              return "做什么？"
  32.          }
  33.          static who = "有个人";
  35.          static what()
  36.          {
  37.              return `${UserClass.who}`;
  38.          }
  39.      }
  40.      console.log(new UserClass().hello());
  41.      console.log(UserClass.what());
  43.     </script>
  44. </body>
  45. </html>

类中的私有成员

  • 私有成员
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>类中的私有成员</title>
  8. </head>
  9. <body>
  10.     <script>
  11.        //1.原生实现私有成员
  12.         function User()
  13.         {
  14.             let course = "ES6编程";
  15.             let hello = () => `我想我应该好好学习：${course}`;
  16.             this.say = () =>console.log(hello());
  17.         }
  18.         new User().say();
  20.         //2.es6实现类中的私有成员：使用#号
  22.         class UserClass
  23.         {
  24.             //1.私有属性
  25.             #salary;
  26.             constructor(salary = 0) {
  27.                 this.#salary = salary;
  28.             }
  29.             get salary()
  30.             {
  31.                return this.#salary 
  32.             }
  33.             set salary(value){
  34.                 if(value< this.salary) console.log("工资太低我不干了");
  35.                 else this.#salary = value;
  36.             }
  37.             #max(arr){
  38.                 return Math.max(...arr);
  39.             }
  40.             getMax(arr){
  41.                 return this.#max(arr);
  42.             }
  43.             static #hobby = '摄影';
  44.             static #eat(){
  45.                 return "我爱中国！";
  46.             }
  47.             static getHobby()
  48.             {
  49.                 return UserClass.#eat() + "也爱" + UserClass.#hobby;
  50.             }
  51.             getHobby()
  52.             {
  53.                 return UserClass.#hobby;
  54.             }
  56.         }
  59.       const user = new UserClass(8888);
  60.       console.log(user.salary);
  61.       user.salary = 6666;
  62.       user.salary = 9999;
  63.       console.log(user.salary);
  64.       console.log(UserClass.getHobby());
  65.       console.log(new UserClass().getHobby());
  66.     </script>
  67. </body>
  68. </html>

示例图

类的继承

  • 原生类的继承
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>类的继承</title>
  7. </head>
  8. <body>
  9.     <script>
  10.     //原生是通过修改原型链来实现继承
  11.     //1.父类
  13.     function Vehicle(fuel,purpose){
  14.         this.fuel    = fuel;
  15.         this.purpose = purpose;
  16.     }
  17.     Vehicle.prototype.show = function(){
  18.         return `燃料：${this.fuel}\n用途：${this.purpose}\n`;
  20.     };
  21.     function Car(fuel,purpose,color){
  22.         Vehicle.call(this, fuel,purpose);
  23.         this.color = color;
  24.     }
  26.     Car.prototype = Object.create(Vehicle.prototype);
  28.     Car.prototype.constructor = Car;
  30.     Car.prototype.show = function(){
  31.         return Vehicle.prototype.show
  32.         .call(this)
  33.         .concat(`颜色：${this.color}\n`);
  34.     }
  36.     const car = new Car("天然气","商用","红色");
  38.     console.log(car.show());
  40.     //ES6中类的继承
  43.     </script>
  45. </body>
  46. </html>

示例图

  • ES6 类的继承

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  11. class Vehicle{
  12.         constructor(fuel,purpose){
  13.             this.fuel = fuel;
  14.             this.purpose = purpose;
  15.         }
  16.         show()
  17.         {
  18.             return `燃料：${this.fuel}\n用途：${this.purpose}\n`;
  19.         }
  21.     }
  22.     class Car extends Vehicle{
  23.         constructor(fuel,purpose,color){
  24.            //super生成子类的this
  25.            super(fuel,purpose);
  26.            this.color = color;
  27.         }
  28.         show(){
  29.             return super.show().concat(`颜色：${this.color}\n`);
  30.         }
  31.     }
  32.     const car = new Car("天然气","商用","红色");
  33.     console.log(car.show());
  34.     </script>
  35. </body>
  36. </html>

示例图

总结：需要多写，看多。要不真的不懂。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：es6中的类,非常重要, 是基础中的基础,如果学不到, 影响一大片, 所以我们用了足够多的时候来讨论, 你也要多写多看,争取完全彻底掌握
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post