微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > PartIII 05 类成员与类继承（0904fri）
博主信息
博文 62
粉丝 2
评论 1
访问量 58155
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PartIII 05 类成员与类继承（0904fri）
老黑
原创
1522人浏览过

主要内容：类成员与类继承

  1. 类表达式：其中先有一个构造函数，然后再有方法返回
  2. 类的构造方法
  3. 类实例属性和原型属性
  4. 存取属性 / 存取属性实现数据的双向绑定
  5. 静态成员
  6. 类中的私有成员（私有属性、私有方法）
  7. 类的继承：原生及es6中的class

1. 类表达式

  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.       let Person = class {
  12.         constructor(name) {
  13.           this.name = name;
  14.         }
  15.         sayName() {
  16.           return this.name;
  17.         }
  18.       };
  20.       let person = new Person("小丽");
  21.       console.log(person.sayName());
  23.       // 类做为参数使用
  24.       let createObj = function (className, ...args) {
  25.         return new className(...args);
  26.       };
  28.       let obj = createObj(
  29.         class {
  30.           hello() {
  31.             return "hello JS";
  32.           }
  33.         }
  34.       );
  36.       console.log(obj.hello());
  38.       // 立即实例化一个类表达式, 创建一个单例
  39.       // 通常的格式是两个括号：(函数/类声明)(调用参数列表)，如果要创建就在前面加个new，否则直接调用就行了。
  40.       let user = new (class {
  41.         constructor(email) {
  42.           this.email = email;
  43.         }
  44.         getEmail() {
  45.           return this.email;
  46.         }
  47.       })("peter@qq.com");
  49.       console.log(user.getEmail());
  50.     </script>
  51.   </body>
  52. </html>

2. 类的构造方法

  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.       class User {
  11.         constructor() {
  12.           //   return this;
  13.           //   return {};
  14.           // __proto__
  15.           return Object.create(null);
  16.           //这种情况才能产生出真正的空的类。
  17.         }
  18.       }
  20.       const user = new User();
  21.       console.log(user);
  22.     </script>
  23.   </body>
  24. </html>

3. 类实例属性和原型属性

  • 实例属性/方法: 直接绑定到实例上面
  • 原型属性/方法：proto中的东东（o）
  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.       class User {
  11.         constructor(id, name) {
  12.           // 实例属性: 直接绑定到实例上面
  13.           this.id = id;
  14.           this.name = name;
  15.           // 实例方法:绑定到实例上的方法
  16.           this.getName = () => console.log("hello ", this.name);
  17.         }
  19.         // 原型方法
  20.         show() {
  21.           console.log(this.id, this.name);
  22.         }
  23.       }
  25.       const user = new User(1, "admin");
  26.       console.log(user);
  27.       console.log(user.show());
  28.     </script>
  29.   </body>
  30. </html>

4. 存取属性

  • 在User.prototype原型对象上设置”存取器属性”
  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.       function User(age) {
  11.         this.age = age;
  12.       }
  14.       // 公共方法或属性定义在函数的原型对象上
  15.       // 在User.prototype原型对象上设置"存取器属性"
  16.       Object.defineProperty(User.prototype, "verifyAge", {
  17.         get() {
  18.           return this.age;
  19.         },
  20.         set(value) {
  21.           if (value >= 18 && value <= 60) this.age = value;
  22.         },
  23.         configurable: true,  //说明这个属性是可以删除的。
  24.         enumerable: true,  //这样就可以遍历了。
  25.       });
  27.       let user = new User(30);
  28.       console.log(user);
  29.       console.log(user.age);
  30.       console.log(user.verifyAge);
  31.       user.verifyAge = 40;
  32.       user.age = 50;
  33.       user.verifyAge = 80;
  34.       console.log(user.age);
  36.       // 对象的原型永远等于它的构造函数的原型对象,对象上从它的构造函数的原型对象上继承成员(属性和方法)
  37.       //   console.log(user.__proto__ === User.prototype);
  38.       //   console.log(user.constructor);
  39.       //   console.log(user.__proto__ === user.constructor.prototype);
  40.     </script>
  41.   </body>
  42. </html>

5. 存取属性实现数据的双向绑定

  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.     <input type="text" />
  10.     <p></p>
  11.     <script>
  12.       // 最终的结果是实现input中录入，下面同步将对应信息展示出来
  13.       const obj = {};
  14.       Object.defineProperty(obj, "hello", {
  15.         set(value) {
  16.           document.querySelector("input").value = value;
  17.           document.querySelector("p").innerHTML = value;
  18.           // p就是下面的展示行
  19.         },
  20.       });
  22.       document.addEventListener("input", (ev) => (obj.hello = ev.target.value));
  23.       // 这个地方监听input，keyup都可以。
  24.     </script>
  25.   </body>
  26. </html>

" class="reference-link">

6. 静态成员

  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. 不能被实例访问
  12.       // 2. 不能被实例共享
  13.       // 3. 必能通过类才可以访问
  14.       // 原生
  15.       function User() {}
  16.       // 函数对象的静态成员就是函数的属性,直接添加
  17.       User.site = "php中文网";
  18.       User.say = () => `我是 "${User.site}" 的朱老师`;
  19.       console.dir(User);
  21.       // 下面是对方法的检查，返回true or false
  22.       console.log(User.hasOwnProperty("site"));
  23.       console.log(User.hasOwnProperty("say"));
  24.       console.log(User.hasOwnProperty("constructor"));
  25.       console.log(User.hasOwnProperty("call"));
  26.       console.log(User.hasOwnProperty("name"));
  28.       // ES6中的类实现静态成员
  30.       class UserClass {
  31.         // 下面这个是原型方法，因为实例方法是写在构造函数中的
  32.         hello() {
  33.           return "欢迎大家来上我的课程";
  34.         }
  35.         // 静态属性
  36.         static position = "讲师";
  38.         // 静态方法
  39.         static say() {
  40.           return `我是一名 : ${UserClass.position}`;
  41.         }
  42.       }
  44.       // 访问原型方法
  45.       console.log(new UserClass().hello());
  46.       // 访问静态成员
  47.       console.log(UserClass.position);  // 这个就需要用类来访问，而非是用实例
  48.       console.log(UserClass.say()); 
  49.     </script>
  50.   </body>
  51. </html>

7. 类中的私有成员

  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.       // 1. 原生实现私有成员
  11.       function User() {
  12.         // 私有成员: 是函数中的私有变量/局部变量来充当
  13.         let course = "es6编程";
  14.         let hello = () => `大家一定要好好学习 [${course}] 课程`;
  15.         this.say = () => console.log(hello());
  16.       }
  17.       new User().say();
  19.       // 2. es6实现类中的私有成员
  20.       class UserClass {
  21.         // 1. 私有属性
  22.         #salary;
  23.         constructor(salary = 0) {
  24.           this.#salary = salary;
  25.         }
  27.         // 私有属性应该设置getter, setter
  28.         //   getter
  29.         get salary() {
  30.           return this.#salary;
  31.         }
  32.         // setter
  33.         set salary(value) {
  34.           if (value < this.salary) console.log("禁止降薪,否则辞职");
  35.           else this.#salary = value;
  36.         }
  38.         // 私有方法
  39.         #max(arr) {
  40.           return Math.max(...arr);
  41.         }
  42.         // 私有方法只能在类中用
  43.         getMax(arr) {
  44.           return this.#max(arr);
  45.         }
  47.         // 静态私有属性
  48.         static #hobby = "摄影";
  49.         static #eat() {
  50.           return "我爱吃肉";
  51.         }
  52.         static getHobby() { 
  53.           // 需要设置下这块的方法，否则外部无法访问。因此需要有return。
  54.           return UserClass.#eat() + "和 " + UserClass.#hobby;
  55.         }
  57.         // 原型方法中访问静态成员
  58.         getHobby() {
  59.           return UserClass.#eat() + "哈哈,   和 " + UserClass.#hobby;
  60.         }
  61.       }
  63.       const user = new UserClass(8888);
  64.       console.log(user);
  65.       console.log(user.salary);
  66.       user.salary = 6666;
  67.       console.log(user.salary);
  68.       user.salary = 9999;
  69.       console.log(user.salary);
  70.       console.log(UserClass.getHobby());  
  71.       // 访问静态私有方法
  72.       console.log(new UserClass().getHobby());   
  73.       // 尽管同名，但其实是访问原型方法
  74.     </script>
  75.   </body>
  76. </html>

8. 类的继承:原生

  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.父类
  12.       function Vehicle(fuel, purpose) {
  13.         this.fuel = fuel;
  14.         this.purpose = purpose;
  15.       }
  16.       // 公共/原型方法
  17.       Vehicle.prototype.show = function () {
  18.         return `燃料: ${this.fuel}\n用途: ${this.purpose}\n`;
  19.       };
  21.       // 2. 子类
  22.       function Car(fuel, purpose, color) {
  23.         Vehicle.call(this, fuel, purpose);
  24.         this.color = color;
  25.       }
  27.       // 关键代码
  28.       // 更新当前子类的原型对象,这样才能实现真正意义上继承
  29.       Car.prototype = Object.create(Vehicle.prototype);
  30.       // 手工补上constructor
  31.       Car.prototype.constructor = Car;
  32.       // 子类中重写父类的原型方法
  33.       Car.prototype.show = function () {
  34.         return Vehicle.prototype.show
  35.           .call(this) 
  36.           // 这段相当于前面父类中的“return `燃料: ${this.fuel}\n用途: ${this.purpose}\n`”
  37.           // 在这个后面继续加上了新的子类中加的属性color
  38.           .concat(`颜色: ${this.color}\n`);
  39.       };
  41.       // 实例化子类
  42.       const car = new Car("天然气", "商用", "红色");
  43.       console.log(car.show());
  44.     </script>
  45.   </body>
  46. </html>

" class="reference-link">

9. es6中的类继承

  • 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>es6中的类继承</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       // 父类
  11.       class Vehicle {
  12.         // 构造方法
  13.         constructor(fuel, purpose) {
  14.           this.fuel = fuel;
  15.           this.purpose = purpose;
  16.         }
  17.         // 原型方法
  18.         show() {
  19.           return `燃料: ${this.fuel}\n用途: ${this.purpose}\n`;
  20.         }
  21.       }
  22.       // 子类
  23.       class Car extends Vehicle {
  24.         constructor(fuel, purpose, color) {
  25.           // 调用父类的构造方法
  26.           // super()必须是第一条,否则不能正确的生成子类的this
  27.           super(fuel, purpose);
  28.           this.color = color;
  29.         }
  30.         // 重写父类的原型方法
  31.         show() {
  32.           // super:代码父类的原型对象
  34.           console.log(super.show === Vehicle.prototype.show);
  35.           return super.show().concat(`颜色: ${this.color}\n`);
  36.         }
  38.         // super（两种身份）:
  39.         // 1. 当成函数: super()代表父类的构造方法,必须用在子类的构造方法中的第一行
  40.         // 2. 当成对象: super用在原型方法/静态方法,代码父类的原型对象
  41.       }
  43.       // 实例化子类
  44.       const car = new Car("新能源", "商用", "绿色");
  45.       console.log(car.show());
  46.     </script>
  47.   </body>
  48. </html>
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：es6中非常有意思 , 也是现代前端的底层支撑基础
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录