1.作用域

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域</title>
</head>
<body>
    <script>
// 全局作用域
        let a = 1;
// 函数作用域
    let fuc =()=> {
        let c =2;
        return c;
    }
    console.log(fuc());
//    console.log(c);
// 块作用域
{
    let b = 1;
}
console.log(b);
    </script>
</body>
</html>

效果图

2.闭包

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭包</title>
</head>
<body>
<script>
    let a = 1;
    let sum = (b,c) => {
        // b,c是形参，是自有的参数，c是自由变量，出现自由变量即为闭包
        return a+b+c;
    }
    console.log(sum(2,3));
</script>
</body>
</html>

效果图

3.原型与继承

代码块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型与继承</title>
</head>
<body>
<script>
    function User(name) {
        this.name = name;
        // show()输出属性
    }
    // 构造函数要加new
    const user = new User('root');
    console.log(user,typeof user);
    // user对象的原型属性永远指向他的构造函数的原型属性对象
    // user对象的原型
    console.log(user.__proto__)
    // user的构造函数的原型
    console.log(User.prototype);
    // 构造函数模拟类
    // 构造函数对象的原型对象上的成员，可以被所有实例共享
    User.prototype.show = function() {
        return {name: this.name}
    }
    console.log(user.show())
    const user1 = new User('admin');
    // 这时show方法已经搬到了user的原型上了，并不在user里面了
    console.log(user1);
    console.log(user1.show());
    class User1 {
        //构造函数
        constructor(a,b) {
            this.a = a;
            this.b = b;
        }
        // 原型方法（公共方法）
        show () {
            return {
                a: this.a , b:this.b
            }
        }
        // 静态方法
        static fetch () {
            return 'hello world!!!';
        }
        // 静态属性
        static me = '陈抟';
        //私有成员
        #age = 12;
        // 使用访问器属性
        get age() {
            return this.#age;
        }
        set age(value) {
            this.#age = value;
        }
    }
    const a = new User1(1,2);
    console.log(a.show());
    // 只有静态方法和静态属性可以直接用对象访问
    console.log(User1.fetch());
    console.log(User1.me);
    a.age = 100;
    console.log(a.age)
    // 继承
    class User2 extends User1 {
        // 第一步必须将父类的构造方法来执行以下，否者this用不了
        constructor(a,b,c) {
            super(a,b);
            // 第二步给子类的新成员赋值
            this.c = c;
        }
        // 父类的原型方法
        show () {
            return {
                a: this.a , b:this.b,c:this.c
            };
        }
    }
    const aaa = new User2(1,2,3);
    console.log(aaa.show());
</script>
</body>
</html>

效果图

js之作用域和闭包与原型

1.作用域

代码块

效果图

2.闭包

代码块

效果图

3.原型与继承

代码块

效果图