亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 56
粉絲 1
評論 0
訪問量 76334
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
ES6類的使用
零龍
原創(chuàng)
1035人瀏覽過

類的表達(dá)式

-類
示例

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

示例圖

  • 類作為參數(shù)使用
    示例
  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());

示例圖

  • 立即實(shí)例化一個類表達(dá)式，創(chuàng)建一個單例

示例

  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());

示例圖

類的構(gòu)造方法

  • 構(gòu)造方法
  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>

示例圖

訪問靜態(tài)成員

  • 靜態(tài)成員

示例

  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.       // 靜態(tài)成員的特征：
  11.       // 1.不能被實(shí)例訪問
  12.       // 2.不能被實(shí)例共享
  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中的類實(shí)現(xiàn)靜態(tài)成員
  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.原生實(shí)現(xiàn)私有成員
  12.         function User()
  13.         {
  14.             let course = "ES6編程";
  15.             let hello = () => `我想我應(yīng)該好好學(xué)習(xí)：${course}`;
  16.             this.say = () =>console.log(hello());
  17.         }
  18.         new User().say();
  20.         //2.es6實(shí)現(xiàn)類中的私有成員：使用#號
  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.     //原生是通過修改原型鏈來實(shí)現(xiàn)繼承
  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>

示例圖

總結(jié)：需要多寫，看多。要不真的不懂。

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：es6中的類,非常重要, 是基礎(chǔ)中的基礎(chǔ),如果學(xué)不到, 影響一大片, 所以我們用了足夠多的時候來討論, 你也要多寫多看,爭取完全徹底掌握
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)