JavaScript實現多態和繼承的封裝操作示例

2019-11-19 13:12:33

字體：大中小

來源：轉載

供稿：網友

本文實例講述了JavaScript實現多態和繼承的封裝操作。分享給大家供大家參考，具體如下：

封裝Encapsulation

如下代碼,這就算是封裝了

(function (windows, undefined) {  var i = 0;//相對外部環境來說,這里的i就算是封裝了})(window, undefined);

繼承Inheritance

(function (windows, undefined) {  //父類  function Person() { }  Person.prototype.name = "name in Person";  //子類  function Student() { }  Student.prototype = new Person();      //修復原型  Student.prototype.constructor = Student;  //構造函數  Student.prototype.supr = Person.prototype; //父類  //創建子類實例  var stu = new Student();  Student.prototype.age = 28;  Student.prototype.name = "name in Student instance";  //打印子類成員及父類成員  console.log(stu.name); //name in Student instance  console.log(stu.supr.name); //name in Person  console.log(stu.age); //28})(window, undefined);

使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.VeVB.COm/code/HtmlJsRun，運行結果如下：

多態Polymorphism

有了繼承,多態就好辦了

//這就是繼承了(function (windows, undefined) {  //父類  function Person() { }  Person.prototype.name = "name in Person";  Person.prototype.learning = function () {    console.log("learning in Person")  }  //子類  function Student() { }  Student.prototype = new Person();      //修復原型  Student.prototype.constructor = Student;  //構造函數  Student.prototype.supr = Person.prototype; //父類  Student.prototype.learning = function () {    console.log("learning in Student");  }  //工人  function Worker() { }  Worker.prototype = new Person();      //修復原型  Worker.prototype.constructor = Worker;  //構造函數  Worker.prototype.supr = Person.prototype; //父類  Worker.prototype.learning = function () {    console.log("learning in Worker");  }  //工廠  var personFactory = function (type) {    switch (type) {      case "Worker":        return new Worker();        break;      case "Student":        return new Student();        break;    }    return new Person();  }  //客戶端  var person = personFactory("Student");  person.learning(); //learning in Student  person = personFactory("Worker");  person.learning(); //learning in Worker})(window, undefined);

使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.VeVB.COm/code/HtmlJsRun，運行結果如下：