1. 程式人生 > 其它 >【前端】JavaScript學習筆記(四)——面向物件程式設計

【前端】JavaScript學習筆記(四)——面向物件程式設計

✨課程連結

【狂神說Java】JavaScript最新教程通俗易懂_嗶哩嗶哩_bilibili


✨學習筆記

內部物件

Date

var date = new Date();
date.getFullYear()
date.getMonth() // 0-11
date.getDate()
date.getDay() // 星期幾
date.getHours()
date.getMinutes()
date.getSeconds()
date.getTime() // 時間戳

console.log(new Date(date.getTime()))
console.log(date.toLocaleString())

JSON

var user = {
    name:"user",
    age:"3",
}

var jsonUser = JSON.stringify(user);
console.log(jsonUser)

var stringUser = JSON.parse('{"name":"user","age":"3"}')
console.log(stringUser)

Ajax

  • 原生js寫法 xhr非同步請求
  • JQuery封裝好的方法 $("#name").ajax("")
  • axios請求

原型物件

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

    <script>
        var Student = {
            name:"student",
            age:"3",
            run:function () {
                console.log(this.name + " run...")
            }
        }

        var temp = {
            name:"temp"
        }

        temp.__proto__ = user
        temp.run()

    </script>

<body>

</body>
</html>

class繼承

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

    <script>
        function Student(name){
            this.name = name
        }
        // 新增方法
        Student.prototype.hello = function () {
            alert("Hello")
        }

        // ES6 之後
        // 定義一個Student類
        class Student{
            constructor(name) {
                this.name = name
            }
            hello(){
                alert("Hello")
            }
        }
        var student = new Student("test");
        console.log(student.name)
        student.hello()

        class CollegeStudent extends Student{
            constructor(props, grade) {
                super(props);
                this.grade = grade
            }

            printGrade(){
                alert(this.grade)
            }

        }
    </script>

</head>
<body>

</body>
</html>

⭐轉載請註明出處

本文作者:雙份濃縮馥芮白

原文連結:https://www.cnblogs.com/Flat-White/p/15026129.html

版權所有,如需轉載請註明出處。