search

博客列表 >PartIII 05 类成员与类继承（0904fri）

PartIII 05 类成员与类继承（0904fri）

老黑
老黑原创
2020年09月12日 22:11:00835浏览

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

  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>
上一条：PartIII 06 模块与vue简介（0907mon）下一条：PHP大牛成长之路：JS原生路由与Vue路由及Git的基本操作流程
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多