typescript封装属性publicprivateprotectedconstructorgetsetextends

Posted 2022-01-31 web半晨

// 自执行函数的作用是形成单独模块（块作用域），
// 防止此文件的变量或方法与其他文件的属性或方法冲突
(function () 
    // 可以任意修改类中属性的值
    class ArbitrarilyEdit 
        name: string;
        age: number;

        constructor(name: string, age: number) 
            this.name = name;
            this.age = age;
        
    

    let arbitrarilyEdit = new ArbitrarilyEdit('半晨', 24);

    // 在对象中直接设置属性
    // 属性可以任意的被修改
    // 属性可以任意被修改将会导致对象中的数据变得非常不安全
    console.log('before-arbitrarilyEdit:', arbitrarilyEdit);
    // before-arbitrarilyEdit: ArbitrarilyEdit name: "半晨", age: 24
    arbitrarilyEdit.name = '舒冬';
    arbitrarilyEdit.age = -33;
    console.log('after-arbitrarilyEdit:', arbitrarilyEdit);
    // arbitrarilyEdit: ArbitrarilyEdit name: "舒冬", age: -33

    // 定义一个不可以任意修改类中值的类
    class Person 
        // typescript可以在属性前添加属性的修饰符
        // public 修饰的属性可以在任意位置访问（修改） 默认值
        // private 私有属性，私有属性只能在类内部进行访问（修改）
        // 通过在类中添加方法使得私有属性可以被外部访问
        // protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）
        private _name: string;
        private _age: number;

        constructor(name: string, age: number) 
            this._name = name;
            this._age = age;
        

        // getter方法用来读取属性
        // setter方法用来设置属性
        // 它们被称为属性的存取器

        // 定义方法，用来获取name属性
        getName() 
            return this._name;
        

        // 定义方法，用来设置name属性
        setName(value: string) 
            this._name = value;
        

        getAge() 
            return this._age;
        

        setAge(value: number) 
            // 判断年龄是否合法
            if (value >= 0) 
                this._age = value;
            
        

        get name() 
            return this._name;
        

        set name(value) 
            this._name = value;
        

        get age() 
            return this._age;
        

        set age(value) 
            if (value >= 0) 
                this._age = value
            
        
    

    const per = new Person('半晨', 18);

    console.log('before-per:', per);
    // before-per: Person _name: "半晨", _age: 18
    per._name = '舒冬';
    per._age = -36;
    console.log('after-per:', per);
    // after-per: Person _name: "舒冬", _age: -36
    // 此时是可以编译通过
    // 但是_name和_age会出现下波浪线提示错误

    // 定义方法，获取name属性
    console.log('getName:', per.getName());
    // getName: 舒冬
    // 定义方法，设置name属性
    per.setName('苏檀');
    console.log('setName:', per.getName());
    // setName: 苏檀

    // 定义方法，获取age属性
    console.log('getAge:', per.getAge());
    // getAge: -36
    // 定义方法，设置age属性
    // 此处无法修改原先赋值为 -36 的值
    per.setAge(-16);
    console.log('setAge:', per.getAge());
    // setAge: -36

    // 使用自带的get和set方法
    console.log('before-getName:', per.name);
    // before-getName: 苏檀
    console.log('before-age:', per.age);
    // before-age: -36
    per.name = '宁毅';
    per.age = 36;
    console.log('after-getName:', per.name);
    // after-getName: 宁毅
    console.log('after-age:', per.age);
    // after-age: 36

    // ----------------------------------------------------------
    class A 
        // protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）
        protected num: number;

        constructor(num: number) 
            this.num = num;
        
    

    class B extends A 
        test() 
            console.log(this.num);
            // 33
        
    

    const b = new B(3436);
    console.log('before-b:', b);
    // before-b: B num: 3436
    b.num = 33;
    // 属性“num”受保护，只能在类“A”及其子类中访问。
    console.log('after-b:', b);
    // after-b: B num: 33
    // 本来是不应该修改的，
    // 但是编译时没有限制报错不能生成文件导致结果是可以修改
    b.test();

    // ----------------------------------------------------------
    // 方式一和方式二是一样的效果
    // class C 
    //     name: string;
    //     age: number

    //     // 可以直接将属性定义在构造函数中
    //     constructor(name: string, age: number) 
    //         this.name = name;
    //         this.age = age;
    //     
    // 

    // 方式二和方式一是一样的效果
    class C 
        // 可以直接将属性定义在构造函数中
        constructor(public name: string, public age: number) 
            console.log(name, age);
            // xxx 111
        
    

    const c = new C('xxx', 111);
    console.log('c:', c);
    // c: C name: "xxx", age: 111
)();