Object-oriented in javascript and object-oriented in javascript

Object-oriented in javascript and object-oriented in javascript

I believe everyone is familiar with object-oriented writing in javascript. Do you still remember several ways to create objects? I believe that everyone except what they often write is a bit vague, so let me help you remember your memories!

1. constructor Mode

Create a custom constructor to define attributes and methods of the custom object type.

function cons(name,age){ this.name = name; this.age = age; this.getMes = function(){  console.log(`my name is ${this.name},this year ${this.age}`); }}var mesge = new cons('will',21);mesge.getMes();

2. Factory Model

This mode abstracts the process of creating a specific object and uses functions to encapsulate the details of creating an object with a specific interface.

function cons(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.getMes = function(){  console.log(`my name is ${this.name},this year ${this.age}`); } return obj;}var mesge = cons('will',21);mesge.getMes();

3. Literal Mode

The literal can be used to create a single object. However, if you want to create multiple objects, a large amount of repeated code will be generated.

var cons = { name: 'will', age : 21, getMes: function(){  console.log(`my name is ${this.name},this year ${this.age}`); }}cons.getMes();

4. prototype mode

Using a prototype object, all instances can share its attributes and methods.

function cons(){ cons.prototype.name = "will"; cons.prototype.age = 21; cons.prototype.getMes = function(){  console.log(`my name is ${this.name},this year ${this.age}`); }}var mesge = new cons();mesge.getMes();var mesge1 = new cons();mesge1.getMes();console.log(mesge.sayName == mesge1.sayName);//true

5. Combination Mode

The most common method. The constructor mode is used to define instance attributes, while the prototype mode is used to define methods and shared attributes. This combination mode also supports passing parameters to the constructor. All instance objects have their own copies of instance attributes, and share the reference to methods to maximize memory savings. This mode is currently the most widely used and the most consistent mode for creating custom objects.

Function cons (name, age) {this. name = name; this. age = age; this. friends = ["arr", "all"];} cons. prototype = {getMes: function () {console. log ('My name is $ {this. name}, this year $ {this. age} ') ;}} var mesge = new cons ("will", 21); var mesge1 = new cons ("jalo", 21); console. log (mesge. friends); mesge. friends. push ('wc '); // You can also operate the array Haro (partition _ partition) O! Console. log (mesge. friends); console. log (mesge1.friends); mesge. getMes (); mesge1.getMes (); console. log (mesge. friends === mesge1.friends); console. log (mesge. sayName === mesge1.sayName );

Finally, let me tell you a secret. ES6 introduces classes to make object creation and inheritance more intuitive.

// Define class Cons {constructor (name, age) {this. name = name; this. age = age;} getMes () {console. log ('Hello $ {this. name }! ') ;}} Let mesge = new Cons ('la la ~ ', 21); mesge. getMes ();

In the code snippet above, A Cons class is defined first, and there is a constructor function, which is the constructor. The this keyword indicates the instance object.

Inheritance can be implemented through the extends keyword.

Class Ctrn extends Cons {constructor (name, anu) {super (name); // equivalent to super. constructor (x) this. anu = anu;} ingo () {console. log ('My name is $ {this. name}, this year $ {this. anu} ') ;}} let ster = new Ctrn ('will', 21); ster. ingo (); ster. getMes ();

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!