标签：12 console log Request host User 使用 com
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。