简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1. 用class创建一个类, 并实现自有,共享,静态成员的声明与输出 2. 实例演示数组与对象解构
Blogger Information
Blog 46
fans 2
comment 0
visits 19149
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1. 用class创建一个类, 并实现自有,共享,静态成员的声明与输出 2. 实例演示数组与对象解构
P粉314265155
Original
368 people have browsed it

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>

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！