JavaScript programming for OOP

The simplest way to define an object

var car = {color: "Red", Drive:function () {alert (This.color + "car Moved");}}

This method is not very useful because it creates a separate object that has no connection to any common data structure, and in order to create a second car instance, it must redefine its structure.

Create a new object from a constructor function

function Car () {this.color = "red"; this.drive = function () {alert (This.color + "Car moved");}} var car = new car (); car.drive ();

Each function in JavaScript has a property called prototype. If a function is used as a constructor, this property is automatically created by the new call to create the object's prototype

function Car () {this.color = "red";} Car.prototype.drive = function () {alert (This.color + "car Moved");} var car = new car (); car.drive ();

Any changes made to the prototype property can be applied to each object constructed through new Car (), whether it was created before or after the change. Adds a new function for Car.prototype. For each object that shares the same prototype, the function can be used immediately, Whether it is constructed before or after the change, as follows:

Update prototype function Car (color) {this.color = color;} Car.prototype.drive = function () {alert (This.color + "car is driving");} var car1 = new Car ("Red"); alert (car1.__proto__ = = = Car.prototype); Truecar1.drive ();//Add a new function Car.prototype.stop = function () {alert (This.color + "car has stopped") for the prototype;} var car2 = new Car ("Blue");//object that shares the same object prototype alert (object.getprototypeof (car1) = = = Object.getprototypeof (car2));  true//Both objects now have access to this new method Car2.stop (); Car1.stop ();

An important feature of object-oriented is that it inherits, as long as it is introduced through the prototype chain

Inherited basic Settings function Car (color) {this.color = color;} Car.prototype.drive = function () {alert (This.color + "car is driving");} Car.prototype.turn = function (direction) {alert (This.color + "car turns" + direction);} Car.prototype.stop = function () {alert (This.color + "car has stopped");} Fire engine function Firtruck () {}firtruck.prototype.turncannon = function (direction) {alert ("Cannon moves to the" + direction) ;} var truck = new Firtruck ();//Because Car.prototype is not in the truck object's prototype chain//So the method move () is not available truck.move (); Truck.turncannon ("right");

There is a very special object.create (proto, properties) method in JavaScript, note: IE8 and below do not support
It can be used to create a new blank object and set its prototype to Proto

function Car (color) {this.color = color;} Car.prototype.move = function () {alert (This.color + "car is driving");} Car.prototype.turn = function (direction) {alert (This.color + "car turns" + direction);} Car.prototype.stop = function () {alert (This.color + "car has stopped");} if (! Object.create) {        //compatibility handling       Firetruck.prototype = Car.prototype;} Else{firetruck.prototype = Object.create (Car.prototype);} function Firetruck () {}//Check, just in case//alert (object.getprototypeof (firetruck.prototype) = = = Car.prototype);//If true// Then Car.prototype is added to the chain FireTruck.prototype.turnCannon = function (direction) {alert ("Cannon moves to the" + direction);} var truck = new Firetruck ();//can now work because Car.prototype has truck.move () in the truck object's prototype chain; Truck.turncannon ("right");

The code can run, but there are some problems with its output

True
Undefined car is driving
Cannon moves to the right

The color of a car can now be set by the constructor of car. The constructor itself is not executed, so its color is displayed as undefined. This problem is well resolved, modify the Firetruck constructor, where you add a call to the car constructor, This way, car can initialize its own object variable

function Firetruck () {Car.call (this, "Red");}

Run the code again and enjoy the correct output

Even if the code runs successfully, there is still a small problem that needs to be addressed. When this new function is created, its prototype property is not empty. It has a property called constructor that will reference the function itself when calling

Firetruck.prototype = Object.create (Car.prototype);

, this property is missing because the new object does not have its own properties. You can pass the missing attribute as the second parameter to the Create

Firetruck.prototype = Object.create (Car.prototype, {constructor: {value:firetruck,         // Same as FireTruck.prototype.constructor enumerable:false,writable:true,configurable:true}});

The constructor here is not the usual attribute. When the key value of an object is looped, it does not appear, but can be accessed directly by name. The same effect can be achieved by passing the property "descriptor" to the second parameter of Create ()
The descriptor has several fields as shown below
Value: Initial value
Enumerable: If the property appears in the list of object properties, in a loop or object.keys like for...in
Writable: If the attribute can be assigned a different value
Configurable: True if a descriptor-defined rule can be modified or its properties can be deleted
So that we can imitate the real constructor behavior .

Example of an inheritance of the final version

function Extend (Subconstructor, superconstructor) {if (! object.create) {Subconstructor.prototype = Superconstructor.prototype;subconstructor.constructor = {Value:firetruck ,//And FireTruck.prototype.constructor as ENUMERABLE:FALSE,WRITABLE:TRUE,CONFIGURABLE:TRUE}}ELSE{SUBCONSTRUCTOR.PR Ototype = Object.create (Superconstructor.prototype, {constructor: {value:firetruck,//and FireTruck.prototype.const Ructor like Enumerable:false,writable:true,configurable:true}});}} function Car (color) {this.color = color;} Car.prototype.move = function () {alert (This.color + "car is driving");} Car.prototype.turn = function (direction) {alert (This.color + "car turns" + direction);} Car.prototype.stop = function () {alert (This.color + "car has stopped");} function Firetruck () {Car.call (this, "Red");} Extend (firetruck, Car); FireTruck.prototype.turnCannon = function (direction) {alert ("Cannon moves to the" + direction);} var truck = new Firetruck (); Truck.move (); Truck.turncannon ("right");

JavaScript programming for OOP