new

Ts-类/3_多态.ts

@@ -0,0 +1,59 @@
+// 多态： 父类型的引用指向了子类型的对象 ，不同类型的对象针对相同的方法，产生了不同的行为
+(() => {
+  //定义一个父类
+  class Animal {
+    name: string
+    //定义一个构造函数
+    constructor(name: string) {
+      this.name = name
+    }
+    //方法
+    run(distance: number = 0) {
+      console.log(`run ${distance} far away`,this.name)
+    }
+  }
+  //定义一个子类
+  class Dog extends Animal{
+    //构造函数
+    constructor(name: string){
+      //调用父类的构造函数 实现子类中属性的初始化操作
+      super(name)
+    }
+    //实例的方法
+    run(distance: number = 10): void {
+      console.log(`run ${distance} far away`,this.name)
+    }
+  }
+  class Pig extends Animal {
+    //构造函数
+    constructor(name: string){
+      super(name)
+    }
+    run(distance: number = 20): void {
+        console.log(`run ${distance} far away`,this.name)
+    }
+  }
+
+  //实例化父类的对象
+  const ani: Animal = new Animal('动物')
+  ani.run()
+  //实例化子类对象
+  const dog: Dog = new Dog('大黄')
+  dog.run()
+  const pig: Pig = new Pig('佩奇')
+  pig.run()
+
+  /* 父类和子类的关系  可以通过父类的类型 创建子类的类型 */
+  const dog1: Animal = new Dog('小黄')
+  const pig1: Animal = new Pig('乔治')
+  dog1.run()
+  pig1.run()
+
+  /* 函数 */
+  function showRun(ani: Animal){
+    ani.run()
+  }
+  showRun(dog1)
+  showRun(pig1)
+
+})()

Ts-类/4_修饰符.ts

@@ -0,0 +1,30 @@
+//修饰符：主要是描述类中成员(属性，构造函数，方法)的可访问性
+//public 修饰符 类中成员默认的修饰符 代表的公共的任何位置都可以访问类当中的成员
+//private 修饰符 类中成员如果使用这个修饰符 外部成员无法访问这个数据 子类也无法访问
+//protected 修饰符 类中成员如果使用这个修饰符 外部无法访问数据 子类可以访问数据
+(() => {
+  //定义一个类
+  class Person {
+    name: string
+    // public name: string
+    // private name: string
+    // protected name:string
+    constructor(name: string) {
+      this.name = name
+    }
+    eat() {
+      console.log('我是eat方法', this.name)
+    }
+  }
+  //定义一个子类
+  class Student extends Person {
+    constructor(name: string) {
+      super(name)
+    }
+    play() {
+      console.log('我是play方法', this.name)
+    }
+  }
+  const per = new Person('小红')
+  console.log(per.name)
+})()

Ts-类/5_readonly修饰符.ts

@@ -0,0 +1,14 @@
+//readonly 只读属性
+(()=>{
+  class Person{
+    readonly name: string = 'abc'
+    constructor(name:string){
+      this.name = name
+    }
+  }
+  let john = new Person('john')
+  console.log(john)
+  // john.name = 'peter'
+  //因为是只读属性  所以会进行报错 
+  //但是转化为js之后还是可以编译 并且修改的
+})()

Ts-类/6_存储器.ts

@@ -0,0 +1,25 @@
+//存储器： 让我们可以有效的控制对于对象的成员的访问  通过getters或者setters进行操作
+(()=>{
+  class Person{
+    firstName: string = 'A'
+    lastName: string = 'B'
+    get fullName(){
+      return this.firstName + '_' + this.lastName
+    }
+    set fullName(value){
+      const names = value.split('_')
+      this.firstName = names[0]
+      this.lastName = names[1]
+    }
+  }
+  const p = new Person()
+  console.log(p.fullName)
+
+
+  p.firstName = 'C'
+  p.lastName = 'D'
+  console.log(p.fullName)
+  
+  p.fullName = 'E_F'
+  console.log(p.firstName,p.lastName)
+})()

Ts-类/js/3_多态.js

@@ -0,0 +1,77 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+// 多态： 父类型的引用指向了子类型的对象 ，不同类型的对象针对相同的方法，产生了不同的行为
+(function () {
+    //定义一个父类
+    var Animal = /** @class */ (function () {
+        //定义一个构造函数
+        function Animal(name) {
+            this.name = name;
+        }
+        //方法
+        Animal.prototype.run = function (distance) {
+            if (distance === void 0) { distance = 0; }
+            console.log("run " + distance + " far away", this.name);
+        };
+        return Animal;
+    }());
+    //定义一个子类
+    var Dog = /** @class */ (function (_super) {
+        __extends(Dog, _super);
+        //构造函数
+        function Dog(name) {
+            //调用父类的构造函数 实现子类中属性的初始化操作
+            return _super.call(this, name) || this;
+        }
+        //实例的方法
+        Dog.prototype.run = function (distance) {
+            if (distance === void 0) { distance = 10; }
+            console.log("run " + distance + " far away", this.name);
+        };
+        return Dog;
+    }(Animal));
+    var Pig = /** @class */ (function (_super) {
+        __extends(Pig, _super);
+        //构造函数
+        function Pig(name) {
+            return _super.call(this, name) || this;
+        }
+        Pig.prototype.run = function (distance) {
+            if (distance === void 0) { distance = 20; }
+            console.log("run " + distance + " far away", this.name);
+        };
+        return Pig;
+    }(Animal));
+    //实例化父类的对象
+    var ani = new Animal('动物');
+    ani.run();
+    //实例化子类对象
+    var dog = new Dog('大黄');
+    dog.run();
+    var pig = new Pig('佩奇');
+    pig.run();
+    /* 父类和子类的关系  可以通过父类的类型 创建子类的类型 */
+    var dog1 = new Dog('小黄');
+    var pig1 = new Pig('乔治');
+    dog1.run();
+    pig1.run();
+    /* 函数 */
+    function showRun(ani) {
+        ani.run();
+    }
+    showRun(dog1);
+    showRun(pig1);
+})();

Ts-类/js/4_修饰符.js

@@ -0,0 +1,47 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+//修饰符：主要是描述类中成员(属性，构造函数，方法)的可访问性
+//public 修饰符 类中成员默认的修饰符 代表的公共的任何位置都可以访问类当中的成员
+//private 修饰符 类中成员如果使用这个修饰符 外部成员无法访问这个数据 子类也无法访问
+//protected 修饰符 类中成员如果使用这个修饰符 外部无法访问数据 子类可以访问数据
+(function () {
+    //定义一个类
+    var Person = /** @class */ (function () {
+        // public name: string
+        // private name: string
+        // protected name:string
+        function Person(name) {
+            this.name = name;
+        }
+        Person.prototype.eat = function () {
+            console.log('我是eat方法', this.name);
+        };
+        return Person;
+    }());
+    //定义一个子类
+    var Student = /** @class */ (function (_super) {
+        __extends(Student, _super);
+        function Student(name) {
+            return _super.call(this, name) || this;
+        }
+        Student.prototype.play = function () {
+            console.log('我是play方法', this.name);
+        };
+        return Student;
+    }(Person));
+    var per = new Person('小红');
+    console.log(per.name);
+})();

Ts-类/js/5_readonly修饰符.js

@@ -0,0 +1,15 @@
+//readonly 只读属性
+(function () {
+    var Person = /** @class */ (function () {
+        function Person(name) {
+            this.name = 'abc';
+            this.name = name;
+        }
+        return Person;
+    }());
+    var john = new Person('john');
+    console.log(john);
+    // john.name = 'peter'
+    //因为是只读属性  所以会进行报错 
+    //但是转化为js之后还是可以编译 并且修改的
+})();

Ts-类/js/6_存储器.js

@@ -0,0 +1,29 @@
+//存储器： 让我们可以有效的控制对于对象的成员的访问  通过getters或者setters进行操作
+(function () {
+    var Person = /** @class */ (function () {
+        function Person() {
+            this.firstName = 'A';
+            this.lastName = 'B';
+        }
+        Object.defineProperty(Person.prototype, "fullName", {
+            get: function () {
+                return this.firstName + '_' + this.lastName;
+            },
+            set: function (value) {
+                var names = value.split('_');
+                this.firstName = names[0];
+                this.lastName = names[1];
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return Person;
+    }());
+    var p = new Person();
+    console.log(p.fullName);
+    p.firstName = 'C';
+    p.lastName = 'D';
+    console.log(p.fullName);
+    p.fullName = 'E_F';
+    console.log(p.firstName, p.lastName);
+})();

Ts-类/页面.html

@@ -8,6 +8,10 @@
 </head>
 <body>
   <!-- <script src="./js/1_类.js"></script> -->
-  <script src="./js/2_继承.js"></script>
+  <!-- <script src="./js/2_继承.js"></script> -->
+  <!-- <script src="./js/3_多态.js"></script> -->
+  <!-- <script src="./js/4_修饰符.js"></script> -->
+  <!-- <script src="./js/5_readonly修饰符.js"></script> -->
+  <script src="./js/6_存储器.js"></script>
 </body>
 </html>