作用域与闭包;类与类的继承

作用域闭包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作用域闭包</title>
</head>
<body>
    <script>
        // 全局作用域
        let str = "111";
        console.log(str);
        // 函数作用域
        function getname() {
            let str1 = "222";
            console.log(str1);
        }
        getname();
        // 下面代码中str1无法输出报错,因为str1的作用域范围再getname函数中才起效果,此时str1为私有变量(私有成员)
        // console.log(str1);
        // 块作用域{}用大括号包裹起来,var不支持块作用,
        {
            let a = 1, b = 2;
            console.log(a, b);
        }
        //闭包:能够访问自由变量的函数,理论上讲,所有函数都是闭包
        let c = 300;
        function sum(a, b) {
            return a + b + c;
        }
        //通过闭包来访问函数的私有成员 /函数中嵌套函数的是高阶函数
        function demo1() {
            let name = "halo";
            return function getname() {
                return name;
            };
        }
        console.log(demo1()());
    </script>
</body>
</html>

类与类的继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类与类的继承</title>
</head>
<body>
    <script>
        class User {
            // 构造方法:初始化对象,关键字constructor
            constructor(name, email) {
                this.name = name;
                this.email = email;
            }
            // 原型方法(共享方法)
            show() {
                return { name: this.name, email: this.email, age: this.#age };
            }
            // 静态方法:不需要实例化(new class ),直接用类来调用,关键字static
            static fetch() {
                // 静态成员中的this表示的就是当前的类
                return this.userName;
            }
            // 静态属性--变量
            static userName = "无间道";
            // 私有成员,关键字#
            #age = 30;
            // 还可以声明访问器属性:伪装成属性的方法,有get,set
            get age() {
                return this.#age;
            }
            set age(value) {
                if (value >= 18 && value <= 60) { this.#age = value; }
                else { console.log("年龄不符合"); }
            }
        }
        // 公共方法放在构造函数的原型上:原型方法
        const user = new User("老师", "111@qq.com");
        console.log(user);
        console.log(user.show());
        // 静态方法直接用类调用,不需要去new了
        console.log(User.fetch());
        // 如果非静态方法要  console.log((new User).fetch());
        console.log(user.age);
        user.age = 90;
        console.log(user.age);
        //继承关键字extends
        // 继承: 通常时对父类进行一些扩展(添加一些新的属性或方法)
        class Child extends User {
            constructor(name, email, gender) {
                // 第一步必须将父类的构造方法执行一下, 否则this用不了
                super(
                    name, email
                );
                // 第二步,给子类的新成员初始化
                this.gender = gender;
            }
            // 给子类重写父类的原型方法(共享方法)
            show() {
                return { name: this.name, email: this.email, gender: this.gender };
            }
        }
        const child = new Child("新子类", "aa@qq.com", 42);
        console.log(child);
    </script>
</body>
</html>

作用域闭包

类与类的继承

相关文章