日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

typescript封裝屬性、public、private、protected、constructor、get、set、extends

作者:web半晨 更新時間: 2022-06-06 編程語言
// 自執行函數的作用是形成單獨模塊(塊作用域),
// 防止此文件的變量或方法與其他文件的屬性或方法沖突
(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}
})();

原文鏈接:https://blog.csdn.net/weixin_51157081/article/details/122312681

欄目分類
最近更新