JavaScript中的繼承

源碼地址

• 最簡單的類
• 構造函數和原型鏈裏面增加方法
• 類裏面的靜態方法
• 原型鏈+對象冒充的組合繼承模式
• 原型鏈實現繼承
• 原型鏈實現繼承的一個問題
• 原型鏈+對象冒充的組合繼承模式
• 原型鏈+對象冒充繼承的另一種方式

①最簡單的類

function Person(name, age) {
  this.name = name;               /* 屬性 */
  this.age = age;                 /* 屬性 */
}

var p = new Person('張三', 20);

console.log(p.name);              // 張三

②構造函數和原型鏈裏面增加方法

原型鏈上的屬性會被多個實例共享，但是構造函數不會被共享

function Person(name, age) {
  this.name = name;                    /* 屬性 */
  this.age = age;                      /* 屬性 */
  this.run = function () {             /* 實例方法 */
    console.log(`${this.name}在跑步！`);
  }
}

// 原型鏈上的屬性會被多個實例共享，但是構造函數不會被共享
Person.prototype.sex = '男';

Person.prototype.work = function () {  /* 原型鏈方法 */
  console.log(`${this.name}在工作！`);
}

var p = new Person('張三', 20);

console.log(p.name);                   // 張三

p.run();                               // 張三在跑步！

p.work();                              // 張三在工作！

③類裏面的靜態方法

function Person(name, age) {
  this.name = name;                    /* 屬性 */
  this.age = age;                      /* 屬性 */
  this.run = function () {             /* 實例方法 */
    console.log(`${this.name}在跑步！`);
  }
}

Person.getInfo = function () {         /* 靜態方法 */
  console.log('我是靜態方法！');
}

// 原型鏈上的屬性會被多個實例共享，但是構造函數不會被共享

Person.prototype.sex = '男';

Person.prototype.work = function () { /* 原型鏈方法 */
  console.log(`${this.name}在工作！`);
}

var p = new Person('張三', 20);

console.log(p.name);                   // 張三

p.run();                               // 張三在跑步！

p.work();                              // 張三在工作！

// 調用靜態方法   直接用構造函數調用，實例無法調用
Person.getInfo();                      // 我是靜態方法

④原型鏈+對象冒充的組合繼承模式

對象冒充可以繼承構造函數裏面的屬性和方法,但是不能繼承原型鏈上面的屬性和方法

function Person(name, age) {
  this.name = name;                    /* 屬性 */
  this.age = age;                      /* 屬性 */
  this.run = function () {             /* 實例方法 */
    console.log(`${this.name}在跑步！`);
  }
}

Person.prototype.sex = '男';

Person.prototype.work = function () { /* 原型鏈方法 */
  console.log(`${this.name}在工作！`);
}

// Web類繼承Person類   原型鏈+對象冒充的組合繼承模式
function Web(name, age) {
  Person.call(this, name, age);
}

var w = new Web('李四', 16);

console.log(w.name);        // 李四

// 對象冒充可以繼承構造函數裏面的屬性和方法
w.run();                 // 李四在工作

// 但是不能繼承原型鏈上面的屬性和方法
w.work();                // Error: w.work is not a function

⑤原型鏈實現繼承

原型鏈實現繼承:可以繼承構造函數裏面的屬性和方法,也可以繼承原型鏈上面的屬性和方法

function Person(name, age) {
  this.name = name;                    /* 屬性 */
  this.age = age;                      /* 屬性 */
  this.run = function () {             /* 實例方法 */
    console.log(`${this.name}在跑步！`);
  }
}

Person.prototype.sex = '男';

Person.prototype.work = function () { /* 原型鏈方法 */
  console.log(`${this.name}在工作！`);
}

function Web() {

}

// 原型鏈實現繼承
Web.prototype = new Person('王五', 24);

var w = new Web();

// 原型鏈實現繼承:可以繼承構造函數裏面的屬性和方法 
w.run();          // 王五在運動

// 原型鏈實現繼承:也可以繼承原型鏈上面的屬性和方法
w.work();         // 王五在工作！

⑥原型鏈繼承的一個問題

實例化子類的時候不能給父類傳參

function Person(name, age) {
  this.name = name;                    /* 屬性 */
  this.age = age;                      /* 屬性 */
  this.run = function () {             /* 實例方法 */
    console.log(`${this.name}在跑步！`);
  }
}

Person.prototype.sex = '男';

Person.prototype.work = function () { /* 原型鏈方法 */
  console.log(`${this.name}在工作！`);
}

function Web(name, age) {

}

// 原型鏈實現繼承
Web.prototype = new Person();

// 實例化子類的時候不能給父類傳參
var w = new Web('王五', 26);

w.run();          // undefined在跑步！

⑦原型鏈+對象冒充的組合繼承模式

function Person(name, age) {
  this.name = name;                    /* 屬性 */
  this.age = age;                      /* 屬性 */
  this.run = function () {             /* 實例方法 */
    console.log(`${this.name}在跑步！`);
  }
}

Person.prototype.sex = '男';

Person.prototype.work = function () { /* 原型鏈方法 */
  console.log(`${this.name}在工作！`);
}

function Web(name, age) {
  // 對象冒充繼承   實例化子類可以給父類傳參
  Person.call(this, name, age);
}

// 原型鏈實現繼承
Web.prototype = new Person();

var w = new Web('王五', 26);

w.run();          // 王五在跑步！

w.work();         // 王五在工作！

⑧原型鏈+對象冒充繼承的另一種方式

function Person(name, age) {
  this.name = name;                    /* 屬性 */
  this.age = age;                      /* 屬性 */
  this.run = function () {             /* 實例方法 */
    console.log(`${this.name}在跑步！`);
  }
}

Person.prototype.sex = '男';

Person.prototype.work = function () { /* 原型鏈方法 */
  console.log(`${this.name}在工作！`);
}

function Web(name, age) {
  // 對象冒充繼承   實例化子類可以給父類傳參
  Person.call(this, name, age);
}

// 原型鏈實現繼承
Web.prototype = Person.prototype;

var w = new Web('王五', 26);

w.run();          // 王五在跑步！

w.work();         // 王五在工作！