search

博客列表 >1. 用class创建一个类, 并实现自有,共享,静态成员的声明与输出 2. 实例演示数组与对象解构

1. 用class创建一个类, 并实现自有,共享,静态成员的声明与输出 2. 实例演示数组与对象解构

P粉314265155
P粉314265155原创
2022年07月24日 17:16:35374浏览

1、对象字面量 2、访问接口3、接口属性化

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>访问器属性</title>
  8. </head>
  9. <body>
  10.   <script>
  11. // 1、对象字面量
  12. // 2、访问接口
  13. // 3、接口属性化 -
  14. // 对象声明的两种方式
  15. // 1、一次性添加 
  16. let item  = {
  17.     date : {
  18.         name :'电脑',
  19.         price :5000,
  20.     }
  21. }
  22. console.log(item);
  23. console.log(item.date);
  24. console.log(item.date.name);
  25. console.log(item.date.price);
  26. console.log('============');
  27. // 为属性 data price 设置访问接口
  28. // 接口就是 方法 函数
  29. // 数据 只有两种访问方式：读取、写入
  30. let item1  = {
  31.     date1 : {
  32.         name1 :'电脑',
  33.         price1 :5000,
  34.     },
  35.     // 读取操作
  36.     getPrice () {
  37.         return item1.date1.price1;
  38.     },
  39.     // 写操作,一定要传参
  40.     setPrice(value){
  41.         this.date1.price1 = value;
  42.     },
  43. }
  44. // 注意方法后面要跟括弧、
  45. // 给大家拓展个小技巧，括号我是这么记得：
  46. // 首先是中括号[]：这玩意儿绝大多数情况下都是用来包裹数组的。
  47. // 然后是大括号{}：这玩意儿绝大多数是用来包裹代码段（块）和对象
  48. //                            的，比如自己写的函数的代码逻辑部分就得在大括号里。
  49. // 最后是小括号()：这玩意儿绝大多数是用来跟函数打交道的。比如说调用
  50. //                            函数后面得跟它，自己写的函数，函数的参数得传在小
  51. //                            括号里。还有一部分情况是需要让编程语言将一段代码
  52. //                            看做一个整体，需要用小括号包裹起来。
  53. console.log(item1.getPrice());
  54. console.log('------------');
  55. item1.date1.price1 = 30;
  56. console.log(item1.getPrice());
  57. console.log('------------');
  58. console.log(item1.date1.price1);
  59. console.log('------------');
  60. // 用 price1的访问接口
  61. item1.setPrice(90);
  62. console.log(item1.getPrice());
  63. console.log('============');
  66. // 2、逐个追加
  67. // 先创建一个空对象（理论上的）
  68. let item2  = { };
  69. item2.name2 = '钢琴';
  70. item2.price2 =9999;
  71. item2.date ={};
  72. item2.date.width = 100;
  73. item2.date.color = 200;
  74. console.log(item2);
  75. console.log(item2.name2);
  76. console.log(item2.date);
  77. console.log('-------------------');
  78.  // 读取操作
  79.  item2.getPrice = function (){
  80.         return item2.date.width;
  81.     };
  82.     // 写操作,一定要传参
  83.     item2.setPrice = function(value){
  84.         this.date.width = value ;
  85.     };
  86.     console.log(item2.getPrice());
  87.     console.log('-------------------');
  88.    item2.setPrice(600);
  89.    console.log(item2.getPrice());
  90.    console.log('============');
  92. // 采用接口数据验证
  93.    let item3  = { };
  94. item3.name3 = '钢琴';
  95. item3.price3 =9999;
  96. item3.date ={};
  97. item3.date.width = 550;
  98. item3.date.color = 200;
  99. console.log(item3);
  100. console.log(item3.name3);
  101. console.log(item3.date);
  102. console.log('-------------------');
  103.  // 读取操作
  104.  item3.getPrice = function (){
  105.         return item3.date.width;
  106.     };
  107.     // 写操作,一定要传参
  108.     item3.setPrice = function(value){
  109.       if(value < 4000) return false;  
  110.         this.date.width = value ;
  111.     };
  112.     console.log(item3.getPrice());
  113.     console.log('-------------------');
  114.    item3.setPrice(5500);
  115.    console.log(item3.getPrice());
  116.    console.log('-------------------');
  117. //    价格小于4000失效
  118.    item3.setPrice(2000);
  119.    console.log(item3.getPrice());
  120. //    价格大于4000生效
  121.    item3.setPrice(5300);
  122.    console.log(item3.getPrice());
  123.    // 简化版  模板字面量
  124. // 注意反引号、
  125.       console.log(`${item3.date.width} : ${item3.date.color} `);
  126.       console.log('--********--');
  127. // 再次简化  : 接口属性化
  128. let item4 = {
  129.      date4 :{
  130.         name4:'苹果',
  131.         price4:30,
  132.      },
  133.     //  price 属性的访问接口  属性为 访问器属性。看着
  134.     get price4()  {
  135.         return  this.date4.price4;
  136.     },
  137.     set price4(value) {
  138.         this.date4.price4 = value;
  139.     },
  140.     // 经过以上操作，访问接口全部属性化了 
  141.     // 这是访问器属性，实际上是方法，只不过伪装成了属性。套用一个属性的马甲
  142. };
  143. // 访问器属性：属性二字，表明了该方法的使用方式
  144. console.log(item4.price4);
  145. console.log(`${item4.price4} `);
  147. </script>  
  149. </body>
  150. </html>

构造函数、对象访问

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>构造函数、面向对象特征</title>
  8. </head>
  9. <body>
  10.     <script>
  11.     //  函数：创建一个对象
  12.      let User1 =function (name ,sex) {
  13.         // 步骤  三步
  14.         // 1步骤一：创建空对象 保存结果
  15.         let obj = {};
  16.         // 2、为这个新对象，添加属性和方法
  17.         obj.name = name;
  18.         obj.sex = sex ;
  19.         // 3、返回这个新对象
  20.         return obj ;
  21.            };
  22. let user1 = User1('小明','男');
  23. console.log(user1);
  24. let user2= User1('小红','女');
  25. console.log(user2);
  27. // 构造函数：专用来创建对象的函数 以下
  28. // 可以用来简化，直接this 引用 这个新对象 
  29. let User2 =function (name ,sex) {
  31.         this.name = name;
  32.         this.sex = sex ;
  33.            };
  34.            let user3 = User2('小黑','男')
  35.            console.log(user3);
  36.         //    此时 this的 指向有问题 没有指向对象，而是指向全局了 Window this指向有问题需要修正
  37. // 以上
  39. // 构造函数：专用来创建对象的函数 以下
  40. // 可以用来简化，直接this 引用 这个新对象 
  41. let User3 =function (name ,sex) {
  43.       this.name = name;
  44.       this.sex = sex ;
  45.          };
  46.         //  new 可以修正 构造函数内部 this的指向。指向新的对象，而非Window
  47.         // 因此构造函数必须 是用new 调用
  48.          let user4 =  new User2('小黑','男')
  49.          console.log(user4);
  50.          console.log('============');
  51.       //    此时 this的 没有有问题   修正后
  52. // 以上
  53. //  构造函数: 创建对象(实例) ,通常对象和实例是同义
  54. //  构造函数 必须使用new调用 
  56.     let User5 = function  (name , sex ){
  57.         // 属性
  58.         this.name =name;
  59.         this.sex = sex;
  60.         // 方法
  61.         this.getInfo =function() {
  62.             // 模板字面量,注意反引号,注意大括号
  63.             return `${this.name}:${this.sex}`;
  64.         };
  65.     };
  66.     let user5 = new User5 ('小白','女');   
  67.     let user6= new User5 ('小小','女');   
  68.     console.log(user5);
  69.     console.log('----------');
  70.     console.log(user5,user6);
  71.     // 此时两个对象user5和 user6属性不同，是正确的，但是方法一样，出现代码冗余，需要简化
  72.     // 多余的方法，实际上应该是被所有实例所共享，只需要保留一个方法即可
  73.     // 不需要为每个对象保留一遍方法的代码
  74.     // 其中prototype  
  76.     console.log('----------');
  77. // 查看对象的构造器，查本溯源
  78. console.log(user5.constructor);
  79. // 查看构造函数
  80. console.log(User5);
  81. // 对象的构造器等于 构造函数、、
  82. console.log(user5.constructor == User5);
  83. console.log('----------');
  84. // 自动打开
  85. console.dir(User5);
  87. // 所有函数都有一个prototype  
  88. // 这个原型属性对普通函数，没有用、、
  89. // 但是对于构造函数，有用、
  90. // 构造函数原型属性的成员,,可以被该该构造函数所有实例共享
  91. console.log('----------');
  92. // 自己指向了自己
  93. console.dir(User5.constructor);
  94. console.log('----------');
  95. console.log(User5.constructor);
  96. console.log('-===========--');
  98. let User6 = function  (name , sex ){
  99.         // 属性
  100.         // 自有属性
  101.         this.name =name;
  102.         this.sex = sex;
  103.         // 方法 放在这儿会被每个对象生成一个副本，因此放到公共位置
  104.         // this.getInfo =function() {
  105.         //     // 模板字面量,注意反引号,注意大括号
  106.         //     return `${this.name}:${this.sex}`;
  107.         // };
  108.     };
  109.     // 将对象的共享成员，挂载到构造器的原型属性prototype上
  110. // 共享属性
  111.     User6.prototype.getInfo = function (){
  112.     // 模板字面量
  113. return `${this.name}:${this.sex}`;
  114. };
  115. let user7 = new User6 ('小朱','女');   
  116.  let user8= new User6 ('小刘','女');   
  117.  // 不会展示原型属性
  118. console.log(user7,user8);
  119. // 查看原型属性
  120. console.log(User6.prototype);
  121. console.log('-===========--');
  122. // 共享成员：加到原型属性
  123. // 1、自有成员 直接在方法 this.xxx
  124. // 2、共享成员，构造器的原型属性 fun.prototype
  125. // 3、私有成员  let
  126. // 4、静态成员  static  当前构造函数使用static
  127. // 5、继承
  129. let User7 = function  (name , sex ){
  130.     // 私有成员
  131.     let email = '1123@qq.com';
  132.     // 属性
  133.         // 自有属性
  134.         this.name =name;
  135.         this.sex = sex;
  137.     };
  138.     // 静态成员： 只能用构造函数 自身防伪，不能用实例访问
  139.     // 只属于 构造函数。不属于 实例对象, 只能有类访问
  140.     // 函数也是对象，是对象就可以为他添加属性
  141.     User7.nation = '中国';
  142.     console.log(User7.nation);
  143.     console.log('-----------');
  144.     let y = new User7('a','b');
  145.     // 访问不到 nation
  146.     console.log(y.nation);
  147.     console.log('-===========--');
  149.     // 继承
  150.     // jS没有类的概念 基于原型来实现继承
  151.     // 父级为构造函数
  152.     let Parent = function() {};
  153.     // 方法公共的
  154.     Parent.prototype.sum = function(){
  155.     return this.a +this.b;
  156.     };
  157. // 子类构造器，构造函数、、
  158. let Child = function (a,b) {
  159.     this.a =a;
  160.     this.b =b ;
  161. }
  163. // 子类继承父类的原型方法
  164. Child.prototype = Parent.prototype;
  165. let child = new Child (1,20);
  166. console.log(child.sum());
  167.     </script>
  168. </body>
  169. </html>

class类简化构造器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>class类简化构造函数创建对象的过程</title>
  8. </head>
  9. <body>
  10.     <script>
  11.     // 类？
  12.     // 其实js没有类 ，js中的类就是函数
  13.     // 声明类 ，空类
  14.     class Class1 {};
  15.     console.dir(Class1);
  16.     console.log('----------');
  17.     console.dir(function(){});
  18.     console.log('----------');
  19.     console.log(typeof Class1);
  20.     console.log('----------');
  21.     // es6 class
  22.     // class 声明类
  23.     class Demo1 {
  24.         // 构造方法，实例初始化
  25.         //  注意构造方法后面 不要有分号
  26.         constructor(name ,sex) {
  27.     //    自有属性
  28.             this.name= name;
  29.             this.sex = sex;
  30.     //  注意构造方法后面 不要有分号
  31.         }
  33.         // 共享、原型成员 声明在原型里面
  34.         //  注意构造方法后面 不要有分号
  35.         getInfo() {
  36.             // 模板字面量
  37.             return `${this.name}:${this.sex} `;
  38.         }
  39.         // 静态成员
  40.         static status = 'enable';
  41.     };
  42.      const obj   = new Demo1 (`小黑`,'男');
  43.      console.log(obj.getInfo());
  44.      console.log('----------');
  45.     //  访问不到 静态成员要以构造函数访问
  46.      console.log(obj.status);
  47.      console.log('----------');
  48.          //  访问到了
  49.    console.log(Demo1.status);
  50.    console.log('----------');
  51. //    继承   extends      Demo2  也是类
  52. class Demo2  extends    Demo1 {
  53. //  子类 构造器  写的方法一
  54.       //  注意构造方法后面 不要有分号
  55.     //   constructor(name ,sex) {
  56.     //    自有属性
  57.             // this.name= name;
  58.             // this.sex = sex;
  59.     //  注意构造方法后面 不要有分号
  60.         // }
  61.         //  子类 构造器  写的方法二 
  62.         // super()会自动 调用父类的构造器初始化该实例
  63.         constructor(name ,sex,email) {
  64.         super(name,sex);
  65.         // 子类自有属性 子类属性初始化
  66.         this.email =email;
  67. }
  68.     // 子类对父类方法初始化和扩展
  69.     getInfo() {
  70.             // 模板字面量  写法一
  71.             // 反引号中不能有中文
  72.             return `${this.name}:${this.sex},${this.email} `;
  73.             // 简写
  74.             return `${super.getInfo()}+${this.email} `;
  75.         }
  76. }
  77. const obj2 = new Demo2('小曹','男','244@qq.com');
  78. console.log(obj2.getInfo());
  79. console.log('----------');
  80. // 在类中可以使用访问器属性
  81. class Demo3 {
  82.     age = 30;
  83.     get age(){
  84.         return  this.age;
  85.     }
  86.     set age(value){
  87.         this.age =value;
  88.     }
  89. }
  90. // 访问器属性实现
  91. const obj4  = new Demo3 ();
  92. console.log(obj4.age);
  93. console.log('----------');
  94. obj4.age = 80;
  95. console.log(obj4.age);
  96.     </script>
  97. </body>
  98. </html>

解构赋值

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>解构赋值</title>
  8. </head>
  9. <body>
  10.     <script>
  11.       const user = ['小红','女'];
  12.     let username = user[0];
  13.     let username1 = user[1]
  14.     console.log(username ,username1);
  15. console.log('------------');
  16.     // 1、数字解构
  17. // 更新
  18. [username ,username1] = ['小芳','女'];
  19. console.log(username ,username1);
  20. // 初始化
  21. let [username2 ,username3] = ['小购','女'];
  22. console.log(username2 ,username3);
  23. console.log('------------');
  24. // 参数不足：默认值上
  25. // 模板中有三个变量，但是值只有两个 不足，只展示两个
  26. [username ,username1,age] = ['小解','女'];
  27. console.log(username ,username1);
  28. // 参数过多
  29. [a,b,c,...arr] = [1,2,3,4,5,6,7];
  30. console.log(a,b,c);
  31. console.log(...arr);
  33. // 二次交换
  34. let x =10;
  35. let y =20;
  36. console.log([x,y]);
  37. console.log('------------');
  38. // let z = x;
  39. // let  x = y ;
  40. // let  y = z;
  41. [y,x]  =      [x,y];
  42. console.log([x,y]);
  43. console.log('------------');
  44. // 对象解构
  45. // 目标是吧对象中的属性值保存到对应的，与属性同名的变量中
  46. let {id , lesson ,price} = {id :1, lesson :'语文',price:90};
  47. console.log(id, lesson,price );
  48. // 更新  必须转为表达式  小括号 把整个表达式封装起来
  49. ({id , lesson ,price} = {id :2, lesson :'数学',price:60});
  50. console.log(id, lesson,price );
  51. console.log('------------');
  53. // 如果左边模板中的变量存在命名冲突，需要起一个别名
  54. let   {id:item , num ,score} = {id :3, num :'英语',score:50};
  55. console.log(item,num,score);
  56. console.log('------------');
  57. // 应用场景  
  58. function getUser(user123){
  59.     // user123 是一个对象
  60.     console.log(user123.id11, user123.name11, user123.email11);
  61. }
  62. // 方法一
  63. let user123 = { id11:55, name11:'小好',email11:'1234@qq.com'}
  64. // 方法一 调用
  65. getUser(user123);
  67. console.log('------------');
  69. let  user456 = {id1234:11, name1234:11,email1234:11};
  70. function getUser2({id1234, name1234,email1234}){
  71.     // user456 是一个对象
  72.     console.log(id1234, name1234,email1234);
  73. }
  75. // 方法一 调用
  76. getUser2(user456);
  79.     </script>
  80. </body>
  81. </html>

上一条：计算机内部是如何实现加减乘除的下一条：图文导航与课程表
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多