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>

效果图

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

php之类与继承

2021-05-07 22:53:35