What is the hardest part of learning JavaScript?
I think it Object
's the hardest. Because JavaScript Object
models are unique and different from other languages, beginners are not easy to master.
Here is my study notes, I hope to learn this part of you to help. I mainly refer to the following two books:
"Object-oriented JavaScript" (object-oriented JavaScript)
JavaScript Advanced Programming (Second Edition) (Professional JavaScript for WEB developers, 2nd Edition)
They are excellent JavaScript readings and are recommended for reading.
The notes are divided into three parts. The first part of today is the discussion of "encapsulation" (encapsulation), followed by the second and third parts of the discussion "Inheritance" (inheritance).
============================
Javascript Object-oriented programming (i): encapsulation
Nanyi
JavaScript is an object-based (object-based) language, and everything you encounter is almost always an object. However, it is not a true object-oriented programming (OOP) language because it has no syntax class
(class).
So, what should we do if we want to encapsulate the property and method as an object and even generate an instance object from the prototype object?
First, generate the original mode of the instance object
Suppose we think of a cat as an object that has two properties of "name" and "Color".
var Cat = {
Name: ",
Color: '
}
Now we need to generate two instance objects based on the schema of the prototype object.
var cat1 = {}; Create an empty object
Cat1.name = "Mao"; Assigning values according to the properties of the prototype object
Cat1.color = "Yellow";
var cat2 = {};
Cat2.name = "Er mao";
Cat2.color = "BLACK";
Well, this is the simplest package, encapsulating two attributes in an object. However, there are two shortcomings in this writing, one is that if you generate several instances, it is very troublesome to write, and the other is that there is no way between the example and the prototype, and we can see what the connection is.
Ii. improvement of the original model
We can write a function that solves the problem of code duplication.
function Cat (name,color) {
return {
Name:name,
Color:color
}
}
Then generate the instance object, which is equivalent to calling the function:
var cat1 = Cat ("Da Mao", "Yellow");
var cat2 = Cat ("Er Mao", "Black");
The problem with this approach remains that cat1
cat2
there is no intrinsic connection between them and that they are instances of the same prototype object.
Third, the structural function mode
To solve the problem of generating instances from prototype objects, JavaScript provides a constructor (Constructor) pattern.
The so-called "constructor", in fact, is a normal function, but the internal use of this
variables. Using an operator on a constructor new
enables you to generate an instance, and the this
variable is bound to the instance object.
For example, a cat's prototype object can now be written like this,
function Cat (name,color) {
This.name=name;
This.color=color;
}
We can now build the instance object.
var cat1 = new Cat ("Da Mao", "Yellow");
var cat2 = new Cat ("Er Mao", "Black");
alert (cat1.name); Da Mao
alert (Cat1.color); Yellow
At this point cat1
cat2
, it automatically contains a constructor
property that points to their constructor.
Alert (Cat1.constructor = = Cat); True
Alert (Cat2.constructor = = Cat); True
JavaScript also provides an instanceof
operator that validates the relationship between a prototype object and an instance object.
Alert (cat1 instanceof Cat); True
Alert (cat2 instanceof Cat); True
Four, the problem of the structure function pattern
The constructor method works well, but there is a problem of wasting memory.
See, let's add a constant Cat
property type
(kind) to the object, and add a method eat
(eat). Then the prototype object Cat
becomes the following:
function Cat (name,color) {
THIS.name = name;
This.color = color;
This.type = "Cat animal";
This.eat = function () {alert ("Eat Mouse");
}
The same approach is used to generate an instance:
var cat1 = new Cat ("Da Mao", "Yellow");
var cat2 = new Cat ("Er Mao", "Black");
alert (Cat1.type); Cat Animals
Cat1.eat (); Eat mice
There seems to be no problem on the surface, but there is a big drawback in actually doing so. That is, for each instance object, the type
properties and methods are exactly eat()
the same, and each time an instance is generated, it must be a duplicate of the content and occupy more memory. This is neither environmentally friendly nor inefficient.
Alert (cat1.eat = = cat2.eat); False
Can the type
properties and eat()
methods be generated only once in memory, and then all instances point to that memory address? The answer is yes.
Five, prototype mode
JavaScript specifies that each constructor has a prototype
property that points to another object. All properties and methods of this object are inherited by an instance of the constructor.
This means that we can define the invariant properties and methods directly prototype
on the object.
function Cat (name,color) {
THIS.name = name;
This.color = color;
}
Cat.prototype.type = "Cat animal";
Cat.prototype.eat = function () {alert ("Eat Mouse")};
Then, build the instance.
var cat1 = new Cat ("Da Mao", "Yellow");
var cat2 = new Cat ("Er Mao", "Black");
alert (Cat1.type); Cat Animals
Cat1.eat (); Eat mice
At this point, all instances of the type
properties and methods, in fact, are the eat()
same memory address, pointing prototype
to the object, thus improving the efficiency of the operation.
Alert (cat1.eat = = cat2.eat); True
Six, the verification method of prototype mode
To match prototype
the attributes, JavaScript defines some helper methods that help us to use it. ,
6.1 isprototypeof ()
This method is used to determine the proptotype
relationship between an object and an instance.
Alert (Cat.prototype.isPrototypeOf (CAT1)); True
Alert (Cat.prototype.isPrototypeOf (CAT2)); True
6.2 hasOwnProperty ()
Each instance object has a hasOwnProperty()
method that is used to determine whether a property is a local property or a property inherited from an prototype
object.
Alert (Cat1.hasownproperty ("name")); True
Alert (Cat1.hasownproperty ("type")); False
6.3 In operator
in
The operator can be used to determine whether an instance contains a property, whether it is a local property or not.
Alert ("name" in CAT1); True
Alert ("type" in CAT1); True
in
Operators can also be used to traverse all properties of an object.
For (Var prop in cat1) {alert ("cat1[" +prop+ "]=" +cat1[prop]);}
Learn Nanyi Teacher Tutorial
Link
Http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
Javascript Object-oriented programming (i): encapsulation