其他分享
首页 > 其他分享> > 12类的使用

12类的使用

作者:互联网

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8     <title>12类的使用</title>
  9 </head>
 10 <body>
 11 <script>
 12     /*说明:
 13     (1) 类(class)其实是一个语法糖的结构,内部其实还是一个函数,所以使用class的声明方式可以让书写面向对象的js代码更加清晰而已。
 14     (2) 把属性放到constructor中,保证每个对象的属性是独有的; 把方法放到原型中,保证每个对象可以共用方法。
 15     (3) 类中的静态属性和静态方法只能使用类来调用。
 16     */
 17     // class User {}
 18     // console.dir(User);
 19     // console.log(User === User.prototype.constructor); // true
 20     // function Hd() {}
 21     // console.dir(Hd);
 22     // console.log(Hd === Hd.prototype.constructor);     // true
 23 
 24     /*12.1 class声明类的语法*/
 25     /* 说明:
 26     (1) 把属性放到constructor中,保证每个对象的属性是独有的。
 27     (2) 把方法放到原型中,保证每个对象可以共用方法。
 28     */
 29     // let User = class {
 30     //     // 为对象初始化值
 31     //     constructor(name) {
 32     //         this.name = name;
 33     //     };
 34     //     getName() {
 35     //         return this.name;
 36     //     };
 37     // };
 38     // console.log(typeof User);    // function
 39     // let liSi = new User("李四");
 40     // console.log(liSi.getName()); // 李四
 41     // console.dir(liSi);
 42 
 43     /*12.2 静态属性使用*/
 44     // 为构造函数创建的属性称为静态属性,静态属性被所有创建的对象所使用(只能使用class修改该属性)。
 45     /*12.2.1 函数中静态属性的使用*/
 46     // function Web(url) {
 47     //     this.url = url;
 48     // }
 49     // let web1 = new Web("baidu.com");
 50     // Web.url = "www.baidu.com";
 51     // console.log(web1, Web.url); // Web{url: 'baidu.com'} 'www.baidu.com'
 52 
 53     /*12.2.2 类中静态属性的使用*/
 54     // class Request {
 55     //    static host = 'www.baidu.com';
 56     //    api(url) {
 57     //        return Request.host + `/${url}`;
 58     //    };
 59     // }
 60     // let obj = new Request();
 61     // console.log(obj);                // Request{}
 62     // console.log(obj.host);           // undefined
 63     // console.log(Request.host);       // www.baidu.com
 64     // console.dir(Request);            // class Request
 65     // console.log(obj.api('article')); // www.baidu.com/article
 66     // Request.host = "www.sina.com";
 67     // obj.host = "www.youtube.com";
 68     // console.log(obj.api('article')); // www.sina.com/article
 69     // console.log(obj);                // Request{host: 'www.youtube.com'}
 70 
 71     /*12.3 在类中使用访问器*/
 72     // 使用访问器控制类中属性的设置
 73     // class Request {
 74     //     constructor(host) {
 75     //         this.data = {};
 76     //         this.host = host;
 77     //     };
 78     //     set host (host) {
 79     //         if (!/^https?:\/\//i.test(host)) {
 80     //             throw new Error('地址错误');
 81     //         }
 82     //         this.data.host = host;
 83     //     };
 84     //     get host () {
 85     //         return this.data.host;
 86     //     };
 87     // }
 88     // let web = new Request("https://www.baidu.com");
 89     // web.host = "https://sina.com";
 90     // console.log(web);
 91     // /*
 92     // Request {data: {…}}
 93     // data: {host: 'https://sina.com'}
 94     // */
 95     // console.log(web.host, web.data.host); // https://sina.com https://sina.com
 96     // console.dir(web);
 97 
 98     /*12.4 private私有属性使用*/
 99     /*12.4.1 没有进行属性保护的公共属性*/
100     // 公共属性在类的内部和外部都可以进行访问。
101     // class User {
102     //     cname = "程序员";
103     //     constructor(name){
104     //         this.name = name;
105     //     };
106     // }
107     //
108     // let liSi = new User("李四");
109     // liSi.cname = "靓仔";
110     // console.log(liSi);     // User{cname: '靓仔', name: '李四'}
111     // let zhangSan = new User("张三")
112     // console.log(zhangSan); // User{cname: '程序员', name: '张三'}
113     // console.dir(User);
114 
115     /*12.4.2 private私有属性*/
116     // 属性只能在类内部进行访问,外部无法进行访问。
117     // class User {
118     //     // 定义私有属性,变量名前加井号(#)
119     //     #cname = "程序员";
120     //     constructor(name) {
121     //         this.name = name;
122     //     };
123     //     set cname (cname) {
124     //         this.#cname = cname
125     //     };
126     //     get cname () {
127     //         return this.#cname;
128     //     };
129     // }
130     // let liSi = new User("李四");
131     // // 修改私有属性时会报错
132     // // liSi.#cname = "靓仔";
133     // // 访问私有属性时会报错
134     // // console.log(liSi.#cname);
135     // console.log(liSi);     // User{name: '李四', #cname: '程序员'}
136     // // 通过访问器访问私有属性
137     // let zhangSan = new User("张三")
138     // console.log(zhangSan); // User{name: '张三', #cname: '程序员'}
139     // zhangSan.cname = "屌丝";
140     // console.log(zhangSan); // User{name: '张三', #cname: '屌丝'}
141 
142     /*12.5 类中静态方法的使用*/
143     // class Request {
144     //    static host = 'www.baidu.com';
145     //    static api(url) {
146     //        return Request.host + `/${url}`;
147     //    };
148     // }
149     // let obj = new Request();
150     // console.log(obj);                    // Request{}
151     // console.log(obj.host);               // undefined
152     // console.log(Request.host);           // www.baidu.com
153     // // console.log(obj.api('article'));     // 报错
154     // console.log(Request.api('article')); // www.baidu.com/article
155     // console.dir(Request);                // class Request
156 
157 </script>
158 </body>
159 </html>

 

标签:12,console,log,Request,host,User,使用,com
来源: https://www.cnblogs.com/LiuChang-blog/p/16619757.html