typescript學習之旅----建立物件 類 繼承
阿新 • • 發佈：2019-01-27
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src='./ts02.js'></script> </head> <body> <script> // es5 類 function Person() { this.name = 'ts' } var p = new Person() console.log(p) // 2、建構函式和原型鏈裡面增加方法 function Person() { this.name = '張三'; /*屬性*/ this.age = 20; this.run = function () { /*例項方法*/ alert(this.name + '在運動'); } } Person.getInfo = function () { alert('我是靜態方法'); } //原型鏈上面的屬性會被多個例項共享 建構函式不會 Person.prototype.sex = "男"; Person.prototype.work = function () { alert(this.name + '在工作'); } var p = new Person(); // alert(p.name); // p.run(); p.work(); //呼叫靜態方法 Person.getInfo(); //Web類 繼承Person類 原型鏈+物件冒充的組合繼承模式 function Web() { Person.call(this); /*物件冒充實現繼承*/ } var w = new Web(); // w.run(); //物件冒充可以繼承建構函式裡面的屬性和方法 w.work(); //物件冒充可以繼承建構函式裡面的屬性和方法 但是沒法繼承原型鏈上面的屬性和方法 Web.prototype = new Person(); //原型鏈實現繼承 var w = new Web(); //原型鏈實現繼承:可以繼承建構函式裡面的屬性和方法 也可以繼承原型鏈上面的屬性和方法 //w.run(); w.work(); //7.原型鏈+物件冒充的組合繼承模式 function Person(name, age) { this.name = name; /*屬性*/ this.age = age; this.run = function () { /*例項方法*/ alert(this.name + '在運動'); } } Person.prototype.sex = "男"; Person.prototype.work = function () { alert(this.name + '在工作'); } function Web(name, age) { Person.call(this, name, age); //物件冒充繼承 例項化子類可以給父類傳參 } Web.prototype = new Person(); var w = new Web('趙四', 20); //例項化子類的時候沒法給父類傳參 // w.run(); w.work(); // var w1=new Web('王五',22); //8、原型鏈+物件冒充繼承的另一種方式 function Person(name, age) { this.name = name; /*屬性*/ this.age = age; this.run = function () { /*例項方法*/ alert(this.name + '在運動'); } } Person.prototype.sex = "男"; Person.prototype.work = function () { alert(this.name + '在工作'); } function Web(name, age) { Person.call(this, name, age); //物件冒充繼承 可以繼承建構函式裡面的屬性和方法、例項化子類可以給父類傳參 } Web.prototype = Person.prototype; var w = new Web('趙四', 20); //例項化子類的時候沒法給父類傳參 w.run(); // w.work(); // var w1=new Web('王五',22); </script> </body> </html>
es5中的建構函式，原型鏈繼承，冒充繼承，原型鏈+物件冒充繼承