Home > Web Front-end > JS Tutorial > Learn Javascript object-oriented programming encapsulation_javascript skills

Learn Javascript object-oriented programming encapsulation_javascript skills

WBOY
Release: 2016-05-16 15:14:14
Original
1276 people have browsed it

Javascript is an object-based language, and almost everything you encounter is an object. However, it is not a true object-oriented programming (OOP) language because there is no class in its syntax.
So, if we want to encapsulate "property" and "method" into an object, or even generate an instance object from the prototype object, what should we do?
1. Original mode of generating objects
Suppose we regard the cat as an object, which has two attributes: "name" and "color".

var Cat = {
    name : '',
    color : ''
  }
Copy after login

Now, we need to generate two instance objects based on the specification (schema) of this prototype object.

var cat1 = {}; // 创建一个空对象
    cat1.name = "大毛"; // 按照原型对象的属性赋值
    cat1.color = "黄色";
  var cat2 = {};
    cat2.name = "二毛";
    cat2.color = "黑色";
Copy after login

Okay, this is the simplest encapsulation, encapsulating two properties into an object. However, this way of writing has two disadvantages. First, if more instances are generated, it will be very troublesome to write; second, there is no way to see the connection between the instances and the prototype.
2. Improvements to the original mode
We can write a function to solve the problem of code duplication.

function Cat(name,color){
    return {
      name:name,
      color:color
    }
  }
Copy after login

Then generating an instance object is equivalent to calling a function:

var cat1 = Cat("大毛","黄色");
  var cat2 = Cat("二毛","黑色");
Copy after login

The problem with this method is still that there is no intrinsic connection between cat1 and cat2, and it cannot reflect that they are instances of the same prototype object.
3. Constructor pattern
In order to solve the problem of generating instances from prototype objects, Javascript provides a constructor (Constructor) pattern.
The so-called "constructor" is actually an ordinary function, but the this variable is used internally. Using the new operator on the constructor will generate an instance, and the this variable will be bound to the instance object.
For example, the prototype object of cat can now be written like this,

 function Cat(name,color){
    this.name=name;
    this.color=color;
  }
Copy after login

We can now generate instance objects.

 var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.name); // 大毛
  alert(cat1.color); // 黄色
Copy after login

At this time, cat1 and cat2 will automatically contain a constructor attribute pointing to their constructor.

alert(cat1.constructor == Cat); //true
  alert(cat2.constructor == Cat); //true
Copy after login

Javascript also provides an instanceof operator to verify the relationship between prototype objects and instance objects.

 alert(cat1 instanceof Cat); //true
  alert(cat2 instanceof Cat); //true
Copy after login

4. Problems with constructor pattern
The constructor method is easy to use, but there is a problem of wasting memory.
Please see, we now add an immutable attribute "type" (type) to the Cat object, and then add a method eat (eat mice). Then, the prototype object Cat becomes as follows:

 function Cat(name,color){
    this.name = name;
    this.color = color;
    this.type = "猫科动物";
    this.eat = function(){alert("吃老鼠");};
  }
Copy after login

Use the same method to generate an instance:

 var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat ("二毛","黑色");
  alert(cat1.type); // 猫科动物
  cat1.eat(); // 吃老鼠
Copy after login

On the surface, there seems to be no problem, but in fact, there is a big disadvantage in doing this. That is, for each instance object, the type attribute and eat() method have exactly the same content. Every time an instance is generated, it must occupy more memory for repeated content. This is neither environmentally friendly nor efficient. ​

alert(cat1.eat == cat2.eat); //false
Copy after login

Can the type attribute and eat() method be generated only once in memory, and then all instances point to that memory address? The answer is yes.
5. Prototype mode
Javascript stipulates that each constructor has a prototype attribute that points to another object. All properties and methods of this object will be inherited by the instance of the constructor.
This means that we can define those immutable properties and methods directly on the prototype object:

 function Cat(name,color){
    this.name = name;
    this.color = color;
  }
  Cat.prototype.type = "猫科动物";
  Cat.prototype.eat = function(){alert("吃老鼠")};
Copy after login

Then, generate the instance.

 var cat1 = new Cat("大毛","黄色");
  var cat2 = new Cat("二毛","黑色");
  alert(cat1.type); // 猫科动物
  cat1.eat(); // 吃老鼠
Copy after login

At this time, the type attribute and eat() method of all instances are actually the same memory address, pointing to the prototype object, thus improving operating efficiency.

 alert(cat1.eat == cat2.eat); //true
Copy after login

6. Verification method of Prototype mode
In order to cooperate with the prototype attribute, Javascript defines some auxiliary methods to help us use it. ,
6.1 isPrototypeOf()
This method is used to determine the relationship between a certain proptotype object and an instance.

 alert(Cat.prototype.isPrototypeOf(cat1)); //true
  alert(Cat.prototype.isPrototypeOf(cat2)); //true
Copy after login

6.2 hasOwnProperty()
Each instance object has a hasOwnProperty() method, which is used to determine whether a certain property is a local property or a property inherited from the prototype object.

 alert(cat1.hasOwnProperty("name")); // true
  alert(cat1.hasOwnProperty("type")); // false
Copy after login

6.3 in operator
The in operator can be used to determine whether an instance contains a certain attribute, whether it is a local attribute or not.

 alert("name" in cat1); // true
  alert("type" in cat1); // true
Copy after login
The

in operator can also be used to traverse all properties of an object.

 for(var prop in cat1) { alert("cat1["+prop+"]="+cat1[prop]); }
Copy after login

The above is all about javascript encapsulation. I hope it will be helpful to everyone's learning.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template