javascript-210317-01

javascript - 210317 - 01

• Date日期对象
• JSON
• 面向对象编程

Date日期对象

	判断数据类型
		typeof 123		number
		typeof "123"	string
		typeof true		boolean
		typeof NaN		number
		typeof []		object
		typeof {}		object

---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
</head>
<body>

<script>
    var now = new Date();
    console.log(now);                   // Date Mon Apr 12 2021 19:38:46 GMT+0800 (中国标准时间)
    console.log(now.getFullYear());     // 年
    console.log(now.getMonth());        // 月
    console.log(now.getDate());         // 日
    console.log(now.getDay());          // 星期几
    console.log(now.getHours());        // 时
    console.log(now.getMinutes());      // 分
    console.log(now.getSeconds());      // 秒
    console.log(now.getTime());         // 时间戳 全世界同一时间 1970 1.1 0:00:00    得到的结果：1618227224800
    console.log(new Date(1618227224800))    // 时间戳转日期   Date Mon Apr 12 2021 19:38:46 GMT+0800 (中国标准时间)

    console.log(now.toLocaleString());      // 2021/4/12 下午7:38:46

</script>

</body>
</html>

---

JSON

什么是JSON：
	JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。采用完全独立于编程语言的文本格式来存储和表示数据。
	简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 
	易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
	

在JavaScript中，一切皆为对象，任何js支持的类型都可以用JSON来表示；
格式：
	对象：	{}
	数组：	[]
	所有键值对  都是用  key:value

---

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsonDemo01</title>
</head>
<body>
<script>

    var user = {
        name:'bgy',
        age:21,
        sex:'男'
    }

    // 对象转换为json字符串，{"name":"bgy","age":"21","sex":"男"}
    var jsonUser = JSON.stringify(user);
    
    console.log(user);		//{ name: "bgy", age: 21, sex: "男" }
    console.log(jsonUser);	//{"name":"bgy","age":21,"sex":"男"}

    // 将字符串转化为对象，参数为json字符串
    // var obj = JSON.parse({"name":"bgy","age":"21","sex":"男"});
    
</script>
</body>
</html>

---

JSON 和 JavaScript 的区别：
	var obj = { name: "bgy", age: 21, sex: "男" }
	var json = {"name":"bgy","age":21,"sex":"男"}

---

面向对象编程

JavaScript，Java，C#....等面向对象语言，，，，，JavaScript有些区别！！！！

原型对象
原型链  __proto__

	类：模板，原型对象
	对象：具体的实类

原型对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo01</title>
</head>
<body>
<script>
    var Student = {
        name:"bgy",
        age:21,
        run:function (){
            console.log(this.name + " is running.........");
        }
    };
    console.log(Student.run());

    var bxg = {
        name:"baixiaoguang"
    };

    // 设置白小光的原型，，，，白小光的原型现在为Student
    // 原型对象
    bxg.__proto__=Student;
    console.log(bxg.run());

    //=================================================

    var Bird = {
        fly:function (){
            console.log(this.name + " is flying.........");
        }
    };

    // 设置白小光1的原型，，，，白小光的原型现在为Bird
    var bxg1 = {
        name:"baixiaoguang1"
    };
    // 原型对象
    bxg1.__proto__=Bird;
    console.log(bxg1.fly());

</script>
</body>
</html>

---

class继承

class关键字是在ES6引入的

归根结底，，，还是上面的原型链结构，，，只是代码看起来比较爽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo02</title>
</head>
<body>
<script>

    function Student(name){
        this.name = name;
    }
    // 给student新增一个方法
    Student.prototype.hello = function (){
        alert('hello bgy');
    }


    // ES6之后，，，可以使用class关键字
    class Student01{
        // 构造器
        constructor(name) {
            this.name = name;
        }

        hello(){
            alert('hello,'+this.name);
        }
    }

    var bxg01 = new Student01("白小光01");
    bxg01.hello();
    var bxg02 = new Student01("白小光02");
    bxg02.hello();

    // 继承
    class SmallStudent extends Student01{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        myGrade(){
            alert(this.name+"的年级是"+this.grade);
        }
    }
    var littleStuent01 = new SmallStudent("小光",3);
    littleStuent01.myGrade();

</script>
</body>
</html>