• JavaScript基于原型的对象机制
  • JavaScript原型上的哪些事

 一、JavaScript基于原型的对象机制

JavaScript对象是基于原型的面向对象机制。在一定程度上js基于原型的对象机制依然维持了类的基本特征:抽象、封装、继承、多态。面向类的设计模式:实例化、继承、多态,这些无法直接对应到JavaScript的对象机制。与强类型语言的类相对应的是JavaScript的原型,所以,只能是基于原型来模拟实现类的设计模式。

为了便于理解,这里采用了Function构造函数及对象原型链的方式模拟汽车构造函数、小型客车类、配置构建五座小型客车对象:

 1 //汽车构造函数
 2 function Car(type,purpose,modelNumber){
 3     this.type = type;         //汽车类型 --如:客车、卡车
 4     this.purpose = purpose;    //用途 --如:载客、载货、越野
 5     this.modelNumber = modelNumber; //型号 --如:小型客车、中型客车、小型货车、挂载式货车
 6     switch(modelNumber){
 7         case"passengerCar":
 8             this[modelNumber] = PassengerCar;
 9             PassengerCar.prototype = this;
10             break;
11     }
12     return this[modelNumber];
13 }
14 //小型客车构造函数
15 function PassengerCar(brand,wheelHub,seat,engine){
16     this.brand = brand;
17     this.wheelHub={        //配置轮毂
18         wheelHubCount:wheelHub.wheelHubCount,     //轮毂数量 --如:4,6,8
19         wheelHubTexture:wheelHub.wheelHubTexture,//轮毂材质 --如:铝合金
20         wheelSpecification:wheelHub.wheelSpecification, //轮胎规格 --如:18,19,20英寸
21         tyreShoeType:wheelHub.tyreShoeType,        //轮胎类型 --如:真空胎,实心胎
22         tyreShoeBrand:wheelHub.tyreShoeBrand        //轮胎品牌 --如:米其林
23     };
24     this.seat = {    //配置座椅
25         seatCount:seat.seatCount,        //座椅个数 --如:2,4,5,7,9
26         seatTexture:seat.seatTexture    //座椅材质 --如:真皮,仿皮,
27     };
28     this.engine = { //配置发动机
29         engineBrand:engine.engineBrand,    //发动机品牌
30         engineModelNumber:engine.engineModelNumber //发动机型号
31     }
32 }
33 //创建小型客车类
34 var PassengerCarClass = new Car("小型客车","载客","passengerCar");
35 // 实例化五座小型客车
36 // 五座小型客车轮毂配置
37 var fivePassengerCarWheelHub = {
38     wheelHubCount:4,     //轮毂数量 --如:4,6,8
39     wheelHubTexture:"铝合金",//轮毂材质 --如:铝合金
40     wheelSpecification:"19", //轮胎规格 --如:18,19,20英寸
41     tyreShoeType:"真空胎",        //轮胎类型 --如:真空胎,实心胎
42     tyreShoeBrand:"米其林"
43 }
44 // 五座小型客车发动机配置
45 var fivePassengerCarEngine = {
46     engineBrand:"创驰蓝天",    //发动机品牌
47     engineModelNumber:"SKYACTIV-G" //发动机型号
48 }
49 // 五座小型客车座椅配置
50 var fivePassengerCarSeat = {
51     seatCount:5,        //座椅个数
52     seatTexture:"真皮"    //座椅材质
53 }
54 //构建五座小型客车对象
55 var fivePassengerCar = new PassengerCarClass("马自达",fivePassengerCarWheelHub,fivePassengerCarSeat,fivePassengerCarEngine);
View Code

相关文章: