1. 背景
本篇博客将通过一个例子，来融汇贯通JavaScript中的基础知识点。
2. 题目说明
创建一个小型车队管理器应用程序。它维护两种类型的车辆:汽车和摩托车。
-
Vehicle定义了两个通用属性:车辆名称和制造年份。它包含一个print函数，用于打印车辆数据。
-
Car扩展了Vehicle，它包含另外两个属性:人数和发动机大小。
-
Motorbike扩展了Vehicle，它包含一个额外的属性来存储最大速度。
创建一个通用的打印机函数表达式，用于将汽车或摩托车数据打印到UI。
- 使用不同类型的函数调用来显示数据(显式或隐式绑定)。
3. 代码实现
3.1 利用原型模式
javascript
var printService = function () {
// this is used to access the bound object
var sOutput = this.getName() + " (" + this.getYear + ")";
if (this.engine) { sOutput += " Engine:" + this.getEngine() };
if (this.persons) { sOutput += " Persons:" + this.getPersons() };
if (this.speed) { sOutput += " Max speed:" + this.getMaxSpeed() };
console.log(sOutput);
}
function Vehicle(sName, iYear) {
this.name = sName;
this.year = iYear;
}
//.prototype assignment makes these properties available for children
Vehicle.prototype.name = "";
Vehicle.prototype.year = "";
Vehicle.prototype.getName = function () { return this.name };
Vehicle.prototype.getYear = function () { return this.year };
Vehicle.prototype.print = printService; // use existing function expression ('this' is bound automatically)
function Car(sName, iYear, iEngine, iPersons) {
Vehicle.call(this, sName, iYear); // call the constructor of the parent
this.engine = iEngine;
this.persons = iPersons;
}
//.prototype assignment makes these properties available for children
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.engine = "";
Car.prototype.persons = "";
Car.prototype.getEngine = function () { return this.engine };
Car.prototype.getPersons = function () { return this.persons };
function Motorcycle(sName, iYear, iMaxSpeed) {
Vehicle.call(this, sName, iYear); //call the constructor of the parent
this.speed = iMaxSpeed;
}
//.prototype assignment makes these properties available for children
Motorcycle.prototype = Object.create(Vehicle.prototype);
Motorcycle.prototype.speed = "";
Motorcycle.prototype.getMaxSpeed = function () { return this.speed };
// create one-one instance for Car and Mortocycle
var myCar = new Car("Opel Astra", 2014, 1389, 5);
var myMotorcycle = new Motorcycle("Honda", 2008, 216);
//log fleet data
printService.call(myCar); // explicit binding
printService.call(myMotorcycle); // explicit binding
myCar.print(); //implicit binding
myMotorcycle.print(); //implicit binding
var fnCarPrintService = printService.bind(myCar); // explicit binding; new function is required
fnCarPrintService();
var fnMotorcyclePrintService = printService.bind(myMotorcycle);
fnMotorcyclePrintService();
//printService(); it does not work because 'this' is set to global in non-strict mode and default binding最终实现以下效果：
基于Car生成的myCar实例 -
基于Motrocycle生成的myMotrocycle实例：
3.2 利用class语法糖改写
javascript
var printService = function () {
// this is used to access the bound object
var sOutput = this.getName() + " (" + this.getYear + ")";
if (this.engine) { sOutput += " Engine:" + this.getEngine() };
if (this.persons) { sOutput += " Persons:" + this.getPersons() };
if (this.speed) { sOutput += " Max speed:" + this.getMaxSpeed() };
console.log(sOutput);
}
class Vehicle {
constructor(sName, iYear) {
this.name = sName;
this.year = iYear;
}
getName = function () { return this.name };
getYear = function () { return this.year };
print = printService; // use existing function expression ('this' is bound automatically)
}
class Car extends Vehicle {
constructor(sName, iYear, iEngine, iPersons) {
super(sName, iYear); // call the constructor of the parent
this.engine = iEngine;
this.persons = iPersons;
}
getEngine = function () { return this.engine };
getPersons = function () { return this.persons };
}
class Motorcycle extends Vehicle {
constructor(sName, iYear, iMaxSpeed) {
super(sName, iYear); //call the constructor of the parent
this.speed = iMaxSpeed;
}
getMaxSpeed = function () { return this.speed };
}
// create one-one instance for Car and Mortocycle
var myCar = new Car("Opel Astra", 2014, 1389, 5);
var myMotorcycle = new Motorcycle("Honda", 2008, 216);
//log fleet data
printService.call(myCar); // explicit binding
printService.call(myMotorcycle); // explicit binding
myCar.print(); //implicit binding
myMotorcycle.print(); //implicit binding
var fnCarPrintService = printService.bind(myCar); // explicit binding; new function is required
fnCarPrintService();
var fnMotorcyclePrintService = printService.bind(myMotorcycle);
fnMotorcyclePrintService();
//printService(); it does not work because 'this' is set to global in non-strict mode and default binding最终实现以下效果：
基于Car生成的myCar实例 -
基于Motrocycle生成的myMotrocycle实例：
4. 小结
本篇博客将通过一个例子，融汇贯通了JavaScript中的基础知识点。在运行代码时，可以通过调试模式来查看代码的运行逻辑。
希望本文对你有帮助！