【前端】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

版权所有，如需转载请注明出处。

posted @ 2021-07-18 11:35  双份浓缩馥芮白  阅读(132)  评论(0)  编辑  收藏  举报