TS中的类

2021-09-28  本文已影响0人  小溪流jun

/* 一、es5的面向对象 */
function Person(name, age) {  //函数名和实例化构造名相同且大写(非强制,但这么写有助于区分构造函数和普通函数)
    this.name = name;
    this.age = age;
}
Person.prototype.say = function () {
    return "我的名字叫" + this.name + "今年" + this.age + "岁了";
}
var obj = new Person("laotie", 88);  //通过构造函数创建对象,必须使用new 运算符
console.log(obj.say());  //我的名字叫laotie今年88岁了
/* 二、es6的class类*/
class Person {
    constructor(name, age) {  //constructor是一个构造方法,用来接收参数
        this.name = name;  //this代表的是实例对象
        this.age = age;
    }
    say() {  //这是一个类的方法,注意千万不要加上function
        return "我的名字叫" + this.name + "今年" + this.age + "岁了";
    }
}
var obj = new Person("laotie", 88);  //obj是Person的一个实例,即实例对象
console.log(obj.say());  //我的名字叫laotie今年88岁了
/* 三、向类中覆盖方法 */
Person.prototype.say = function () {  //定义与类中相同名字的方法。成功实现了覆盖!
    return "我是来证明的,你叫" + this.name + "今年" + this.age + "岁了";
}
var obj = new Person("laotie", 88);
console.log(obj.say());  //我是来证明的,你叫laotie今年88岁了
/* 四、向类中添加方法 */
Person.prototype.addFn = function () {
    return "我是通过prototype新增加的方法,名字叫addFn";
}
var obj = new Person("laotie", 88);
console.log(obj.addFn());  //我是通过prototype新增加的方法,名字叫addFn
/* 五、Object.assign方法来为对象动态增加方法 */
Object.assign(Person.prototype, {
    getName: function () {
        return this.name;
    },
    getAge: function () {
        return this.age;
    }
})
var obj = new Person("laotie", 88);
console.log(obj.getName());//laotie
console.log(obj.getAge());//88
/* 六、constructor的作用 */
class Box {
    constructor() {
        console.log("啦啦啦,今天天气好晴朗");//当实例化对象时该行代码会执行。
    }
}
var obj = new Box();
/* 七、隐视定义constructor */
class Desk {
    constructor() {
        this.xixi = "我是一只小小小小鸟!哦";
    }
}
class Box {
    constructor() {
        return new Desk();// 这里没有用this哦,直接返回一个全新的对象
    }
}
var obj = new Box();
console.log(obj.xixi);//我是一只小小小小鸟!哦
/* 八、hasOwnProperty()函数用于判断属性是否是实例属性 */
class Box {
    constructor(num1, num2) {
        this.num1 = num1; //constructor中定义的属性可以称为实例属性(即定义在this对象上)
        this.num2 = num2;
    }
    sum() {
        return num1 + num2; //constructor外声明的属性都是定义在原型上的,可以称为原型属性(即定义在class上)
    }
}
var box = new Box(12, 88);
console.log(box.hasOwnProperty("num1"));//true
console.log(box.hasOwnProperty("num2"));//true
console.log(box.hasOwnProperty("sum"));//false
console.log("num1" in box);//true
console.log("num2" in box);//true
console.log("sum" in box);//true
console.log("say" in box);//false
/* 九、类的所有实例共享一个原型对象,它们的原型都是Person.prototype,所以proto属性是相等的 */
class Box {
    constructor(num1, num2) {
        this.num1 = num1;
        this.num2 = num2;
    }
    sum() {
        return num1 + num2;
    }
}
var box1 = new Box(12, 88);  //box1与box2都是Box的实例。它们的__proto__都指向Box的prototype
var box2 = new Box(40, 60);
console.log(box1.__proto__ === box2.__proto__);//true
/*十、也可以通过proto来为类增加方法。使用实例的proto属性改写原型,会改变Class的原始定义,影响到所有实例,所以不推荐使用! */
class Box {
    constructor(num1, num2) {
        this.num1 = num1;
        this.num2 = num2;
    }
    sum() {
        return num1 + num2;
    }
}
var box1 = new Box(12, 88);
var box2 = new Box(40, 60);
box1.__proto__.sub = function () {
    return this.num2 - this.num1;
}
console.log(box1.sub());//76
console.log(box2.sub());//20
/* 十一、class不存在变量提升 */
new A();
function A() {  //ES5可以先使用再定义,存在变量提升

}
new B();//B is not defined    //ES6不能先使用再定义,不存在变量提升 会报错
class B {

}
/* 十二、类的继承 */
class Animal {
    constructor(public name) {
        this.name = name
    }
    sayHi() {
        return `My name is ${this.name}`
    }
}

let a = new Animal('Jack')
console.log(a.sayHi()) // My name is Jack
class Cat extends Animal {
    constructor(name) {
        super(name) // 调用父类的 constructor(name)
        console.log(this.name)
    }
    sayHi() {
        return 'Meow, ' + super.sayHi() // 调用父类的 sayHi()
    }
}

let c = new Cat('Tom') // Tom
console.log(c.sayHi()) // Meow, My name is Tom
/* 十三、存取器 */
class Animal {
    constructor(name) {
        this.name = name
    }
    get name() {  //不能有参数
        return 'Jack'  //这个伪属性只可读,不可写
    }
    set name(value) {  //有且有一个参数
        console.log('setter: ' + value)
    }
}

let a = new Animal('Kitty') // setter: Kitty
a.name = 'Tom' // setter: Tom
console.log(a.name) // Jack
/* 十四、使用 static 修饰符修饰的方法称为静态方法,它们不需要实例化,而是直接通过类来调用: */
class Animal {
    static isAnimal(a) {
        return a instanceof Animal
    }
}

let a = new Animal('Jack')
Animal.isAnimal(a) // true
a.isAnimal(a) // TypeError: a.isAnimal is not a function




上一篇 下一篇

猜你喜欢

热点阅读