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>
