search

博客列表 >ES6类的使用

ES6类的使用

零龙
零龙原创
2020年09月17日 03:12:37807浏览

类的表达式

-类
示例

  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>

示例图

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

上一条：Laravel的查询构造器和聚合查询下一条：PHP大牛成长之路：laravel查询构造器方法与聚合函数
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多