JavaScript04：面向对象
标准对象
typeof关键字获取对象的类型
typeof 123 //'number'
typeof "123" // 'string'
typeof true // 'boolean'
typeof NaN // 'number'
typeof [] // 'object'
typeof {} // 'object'
typeof Math.abs // 'function'
typeof undefined // 'undefined'
typeof null // 'object'
Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<script>
"use strict";
/**
* 获取日期和时间
*/
let now = new Date();
console.log(now); // 中国标准时间
console.log(now.getFullYear()); // 年
console.log(now.getMonth()); // 月（从0开始）
console.log(now.getDate()); // 日
console.log(now.getDay()); // 星期几
console.log(now.getHours()); // 时
console.log(now.getMinutes()); // 分
console.log(now.getSeconds()); // 秒
console.log(now.getTime()); // 时间戳
/**
* 转换格式
*/
console.log(now.toLocaleString()); // 转换为正常格式
console.log(new Date(1648000989044)); // 时间戳转换为标准时间
</script>
</head>
<body>
</body>
</html>
JSON
JSON（JavaScript Object Notation）是一种层次结构清晰的轻量级数据交换格式，任何JavaScript对象都可以转换为JSON格式，语法格式也一样
把JavaScript对象序列化成一个JSON格式的字符串，就能够通过网络传递给其他计算机
把JSON格式的字符串反序列化成一个JavaScript对象，就可以在JavaScript中直接使用这个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<script>
"use strict";
let person = {
name: "ty",
age: 24,
gender: "man"
}
/**
* 序列化
* JSON.stringify()方法将对象转换为JSON字符串，第二种写法可以显示层次结构
* 对象的属性名不用引号
*/
console.log(JSON.stringify(person));
console.log(JSON.stringify(person, null, ' '));
/**
* 反序列化
* JSON.parse()方法将JSON字符串转换为对象
* 对象属性名要用引号，为了避免转义，{}必须用不同的引号括起来
*/
console.log(JSON.parse('{"name":"ty","age":24,"gender":"man"}'));
</script>
</head>
<body>
</body>
</html>
RegExp
正则表达式：可以直接通过/正则表达式/写出来，或者是通过new RegExp('正则表达式')创建一个RegExp对象
\d可以匹配一个数字，\w可以匹配一个字母或数字，.可以匹配任意一个字符，*表示任意个字符（包括0个），+表示至少一个字符，?表示0个或1个字符，+?表示非贪婪匹配，g表示全局搜索，{n}表示n个字符，{n,m}表示n-m个字符（不能有空格），\s可以匹配一个空格（也包括Tab等空白符），\可以转义特殊字符，[]表示范围（如[0-9a-zA-Z_]可以匹配一个数字、字母或者下划线），A|B可以匹配A或B，()表示分组（可以提取子串），^表示行的开头，$表示行的结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
</body>
</html>
<script>
"use strict";
let reg = /^\d{3}-\d{3,8}$/;
/**
* test()方法可以测试字符串是否满足正则表达式
*/
console.log(reg.test("111-123443"));
console.log(reg.test("111-123443z"));
/**
* split()方法切分字符串
*/
console.log("a b c d".split(/\s+/));
console.log("a, b, c,d".split(/[\s\,]+/));
/**
* exec()方法获取子串
* 匹配成功会返回一个数组
* 匹配失败返回null
*/
reg = /^(\d{3})-(\d{3,8})$/;
console.log(reg.exec("111-123443"));
console.log(reg.exec("111 123443"));
reg = /^([0-9]|[0-9]|1[0-9]|2[0-3]):([0-9]|0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9]):([0-9]|0[0-9]|1[0-9]|2[0-9]|3[0-9]|4[0-9]|5[0-9])$/;
console.log(reg.exec("20:30:30"));
reg = /^([\w.]+)@(\w+)\.(\w{3})$/;
console.log(reg.exec("bill.gates@microsoft.com"));
/**
* 非贪婪匹配
* 默认"+"是贪婪匹配，会匹配最多的字符，因此不能单独拿到后面的000
* 加个"?"是非贪婪匹配，尽可能少匹配
*/
reg = /^(\d+)(0*)$/;
let reg1 = /^(\d+?)(0*)$/;
console.log(reg.exec("1023000"));
console.log(reg1.exec("1023000"));
/**
* 全局搜索（多次匹配）
* 当指定g标志后，每次运行exec()，正则表达式本身会更新lastIndex属性，表示上次匹配到的最后索引
* 不能使用/^...$/，那样只会最多匹配一次
*
*/
reg = /[a-zA-Z]+Script/g;
for (let i = 0; i < 4; i++) {
console.log(reg.exec("JavaScript, VBScript, JScript and ECMAScript"));
console.log(reg.lastIndex);
}
</script>
原型链
JavaScript对每个创建的对象都会设置一个原型，指向它的原型对象
原型链：当我们用obj.xxx访问一个对象的属性时，JavaScript引擎先在当前对象上查找该属性，如果没有找到，就到其原型对象上找，如果还没有找到，就一直上溯到Object.prototype对象，最后，如果还没有找到，就只能返回undefined
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<script>
"use strict";
/**
* 数组对象的原型链
* arr ----> Array.prototype ----> Object.prototype ----> null
* Array.prototype定义了indexOf()、shift()等方法，因此可以在所有的Array对象上直接调用这些方法
*/
let arr = [1, 2];
/**
* 函数也是对象，函数对象的原型链
* test ----> Function.prototype ----> Object.prototype ----> null
* Function.prototype定义了apply()等方法，因此所有函数都可以调用apply()方法
*/
function test(){}
</script>
</head>
<body>
</body>
</html>
原型继承
JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程，将其他对象作为原型创建一个类似的对象，间接达到继承的目的
JavaScript的原型链和Java的Class区别在于，它没有“Class”的概念，所有对象都是实例，所谓继承关系不过是把一个对象的原型指向另一个对象而已
因此可以随意变更要继承的原型对象，但同时只能继承一个原型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<script>
"use strict";
let xiaoming = {
name: "xiaoming",
age: 24,
run: function (){
console.log(this.name + " is running");
}
}
console.log(xiaoming);
xiaoming.run();
let xiaohong = {
name: "xiaohong"
}
/**
* JavaScript没有类的概念，而是通过原型属性__proto__，让新对象继承其他对象
* 间接等效于两个对象都是同一个模板衍生出来的，这样也就拥有了其他对象的方法和属性
* 不建议这么使用
*/
xiaohong.__proto__ = xiaoming;
console.log(xiaohong);
xiaohong.run();
console.log(xiaohong.age);
let bird = {
name: "bird",
fly: function (){
console.log(this.name + " is flying");
}
}
/**
* 可以变更要继承的原型对象
*/
xiaohong.__proto__ = bird;
xiaohong.fly();
</script>
</head>
<body>
</body>
</html>
class继承
几乎和Java定义类一样，不过构造器方法统一用constructor()方法表示，子类构造器中必须要先调用父类构造器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<script>
"use strict";
/**
* class定义类
*/
class Person{
constructor(name) {
this.name = name;
}
who(){
console.log(this.name);
}
}
/**
* 继承
* 子类构造器中必须要先调用父类构造器
*/
class Chinese extends Person{
constructor(name, color) {
super(name);
this.color = color;
}
}
let xiaoming = new Person("xiaoming");
xiaoming.who();
</script>
</head>
<body>
</body>
</html>
浙公网安备 33010602011771号