Day04-JavaScript 高阶

最新推荐文章于 2024-11-04 16:17:23 发布

前端拓海

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量59

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Spirs/article/details/134793640

版权

一.定时器传递参数

<script>

        // 外部函数
        function fun(num) {
            console.log(num);
        }

        setInterval(function () {
            fun(10);
        }, 1000)
    
</script>

二.创建对象

<script>

        // 1.字面量
        var obj = {}

        // 2.new Object() 
        var obj2 = new Object();
        obj2.name = "小好";

        // 3.构造函数创建对象
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        var person = new Person("小谷", 18);

        console.log(person);
   
 </script>

三.创建类

<script>

        // 创建类
        class Person {

            // 给类添加公共属性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 给类添加公共方法
            sayHi() {
                console.log(this.name + "说你好");
            }
        }

        // 通过类实例化对象
        var person = new Person("小好", 20);

        console.log(person);
        person.sayHi();
    
</script>

四.类的继承1

<script>

        // 创建类
        class Father {

            // 给类添加公共属性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 给类添加公共方法
            sayHi() {
                console.log(this.name + "说你好");
            }
        }

        // 实现类的继承 extends
        class Son extends Father { }


        var son1 = new Son("小谷", 10);
        console.log(son1);
    
</script>

五.类的继承2

 <script>

        // 创建类
        class Father {

            // 给类添加公共属性
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 给类添加公共方法
            sayHi() {
                console.log(this.name + "说你好");
            }
        }

        // 实现类的继承 extends
        class Son extends Father {
            // 属性
            constructor(name, age, height) {

                // 继承父类的属性 super() 必须写在this之前来调用
                super(name, age);

                // 自己特有的属性
                this.height = height;
            }

            sayHi() {
                console.log(this.name + "说hello");
            }
        }

        var son1 = new Son("小谷", 20, 180);

        console.log(son1);

        son1.sayHi();
        son1.__proto__.__proto__.sayHi();
   
 </script>

六.通过类操作DOM元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

</head>

<body>

    <div id="box"></div>

    <script>

        // 通过类操作DOM元素

        // 封装一个类
        class EditDom {

            constructor(id) {
                this.box = document.querySelector(id);
                console.log(this.box);

                this.init();
            }

            init() {
                this.box.onclick = this.randomFun.bind(this);
            }

            // 写入随机数
            randomFun() {
                console.log(this);
                this.box.innerHTML += Math.random();
            }
        }


        // 实例化
        var box = new EditDom("#box");

    </script>

</body>

</html>