2021-05-22 验证:只能通过类名调用static修饰的类属性和类方法以及static的主要使用场景

原创已于 2022-09-26 16:51:52 修改 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#类 #class #js #javascript #static

于 2021-05-22 09:00:49 首次发布

知识点同时被 2 个专栏收录

96 篇文章

订阅专栏

37 篇文章

订阅专栏

本文探讨了JavaScript中static关键字的主要应用，特别是在为循环生成的HTML标签绑定DOM0级事件时。通过示例展示了如何利用static修饰的类方法实现点击li元素时触发事件。

结论:static修饰的属性和方法是属于类的,只能通过类名调用

验证:

 //1.一般类包含的属性和方法可以被实例化对象调用
    class Person1 {
        name = "张三";
        say() {
            console.log("我是" + this.name)
        }
    }
    var p = new Person1();
    p.say();

   //2.static修饰的属性只能通过类名调用
    class Person2 {
        static name = "张三";
        say() {
            console.log("我是" + Person2.name)
        }
    }
    var p = new Person2();
    p.say();

	//3.static修饰的方法只能通过类名调用
    class Person3 {
        static name = "张三";
        static say() {
            console.log("我是" + Person3.name)
        }
    }
    //不能通过实例化对象调用static修饰的类方法
    Person3.say();

static的主要使用场景:给JS循环的HTML标签绑定DOM0级事件

例子:点击创建的li标签,触发点击事件(static修饰的类方法)

    <ul></ul>
    <script>
        class ul {
            constructor() {
                this.ulObj = document.querySelector("ul");
                this.arr = ['张三', '李四', '王五'];
                var str = '';
                this.arr.forEach(v => {
                    str += '<li οnclick="ul.clickFn()">' + v + '</li>'; //static修饰的类方法通过类名称来调用

                });
                this.ulObj.innerHTML = str;
            }
            static clickFn() { //static的主要使用场景
                console.log(this); //class ul
            }
        }
        new ul;
    </script>