JS object-oriented (3) object class, static properties, closures, private properties, call and apply use, three implementation methods of inheritance _javascript tips

1.Object class

In JS, object is the base class for all classes, and you can use the object class to create custom objects without having to define constructors (Constructor,prototype,hasownproperty)

var per = new Object ();
Per.name = ' Zhangsan ';
Per.age =;
Alert (Per.name + per.age);

We want to get an object variable in the program, as long as we can store a lot of data, we can consider using the object class at this time. The object class avoids the definition of a constructor. Another commonly used property under the object class: hasOwnProperty

var per = new Object ();
Per.name = ' Zhangsan ';
Per.age =;
If Per.hasownproperty (' email ') {
alert (' with email ');
} else{
alert (' no email ');
}

2. Static properties

In some object-oriented languages, you can use the static keyword to define a class's statics or static methods, which can be emulated in JS.

Grammar:

Class name. property name

Class name. Attribute =function () {}

function person () {
}
person.count =;
var p = new person ();
person.count++;
var p = new person ();
person.count++;
var p = new person ();
person.count++;
alert (Person.count);

To add static properties and Static methods:

function person () {
person.count++;//static Property
Person.getcount=function () {//static method
alert (' current total ' + Person.count + ' personal ');
}
Person.count =;
var p = new person ();
var p = new person ();
var p = new person ();
Person.getcount ();

3. Closure of the package

Concept: The so-called closure refers to an expression (usually a function) that has many variables and an environment that binds them, so these variables are also part of the expression.

Ask a question:

function display () {
var i=; 
}
Display ();
Here, you want to access the local variable i

In the global, the local variable I cannot be accessed because the scope is different and the local variable i is reclaimed after the display function has finished executing. Closures feature: "Access local variables" and "Make variable memory not freed"

Example
function fn () {
function fn () {
alert (' Hello ');
}
return FN; Returns the first address of the FN letter,
var test=fn ();//test also points to the first address of the FN function
test ();

By Example 1 we know that a variable can point to the first address of a function, and a function can return the first address of another function.

Example
function fn () {
var i =;
function fn () {
alert (i);
}
return FN; Returns the first address of the FN letter,
var test=fn ();//test also points to the first address of the FN function
test ();

By Example 2 we know that using a Deny function contains the variable i so that the memory of the local variable i is not reclaimed.

Example
function fn () {
var i =;
function fn () {
alert (i++);
}
return FN; Returns the first address of the FN letter,
var test=fn ();//test also points to the first address of the FN function
test ();
Test ();
Test ();

In Example 3, because the memory of I will never be reclaimed, the value of Fn2,i is +1 per call. The result of the run is pop 10, pop 11, pop 12.

The principle of closure: in Example 3, there are three scopes: global scope, fn1 scope, and fn2 scope. In the global scope there is test=fn1 (), in fact, this sentence is equivalent to test=fn2. There are Var i=10 and return fn2 in the FN1 scope, with alert (i++) in the FN2 scope example. When Test=fn1 () is executed under the global scope, test points to the scope of the fn2, where I is hooked to the global scope by the FN2 scope, and according to the law of the scope chain, FN2 does not define I, so I look for it in the upper-layer scope under FN2, The Var i=10 under the fn1 scope was found. So the global test hooks up the FN2 's i,fn2 i hook up the fn1 I, so fn1 is not recycled after the run is completed.

4. Private property

In object-oriented thinking, for some sensitive, not exposed members can be defined as private, in JavaScript can simulate this function.

Grammar:

function Person (p_name) {
var name = P_name;
This.age
}

var: private

This: public

function Person (p_name,p_age) {
this.name = p_name;
var age = P_age;
}
var p = new Person (' Zhangsan ',);
alert (p.name);
alert (p.age);

In the example above, we want to represent a private member property with Var, but after the person constructor completes, the age is reclaimed and cannot be used as a member property.

function Person (p_name,p_age) {
this.name = p_name;
var age = P_age;
This.setage=function (a) {age
= A;
}
This.getage=function () {return
(age);
}
}
var p = new Person (' Zhangsan ',);
P.setage ();
Alert (P.getage ());

The This.setage and This.getage two methods use the local variable age, so age is not reclaimed.

If only the Set method, this property is a write-only property.

If there is only a Get method, the property is read-only.

Use of 5.call and apply

Call and apply function: invokes the current function with the specified object. Call and apply function exactly the same, but differ slightly in syntax.

Grammar:

Call ([Thisobj[,arg1[,arg2[,argn]]]]

First argument: When the function executes, this points to who

Parameters to be followed: specified in the order required

Apply ([Thisobj[,argarray]])

First argument: When the function executes, this points to who

Second parameter: array, representing the parameter collection

In JS, functions have several forms of invocation:

Person (); This in person refers to window
var p=new person (), and this in//person points to p per
. Person (); This in person refers to the
per function person (p_name,p_age) {
this.name = p_name;
This.age = P_age;
}
function speak () {
alert (this.name + this.age);
}
var p = new Person (' Zhangsan ',);
Speak (); This calls this to point to Window
//p.speak (); P object has no speak property

Use call and apply to invoke

function Person (p_name,p_age) {
this.name = p_name;
This.age = P_age;
}
function speak () {
alert (this.name + this.age);
}
var p = new Person (' Zhangsan ',);
Speak.call (p);
Speak.apply (P);

Call and apply do two things in execution: 1 The function inside this point to the first parameter 2.

In addition: You can also solve the problem:

P1.say=speak;

P1.say ();

This solution is essentially different from the above solution:

The solution above is to call the Speak function directly, except that the direction of this within the function changes.

The following workaround adds attributes to the P1 object, and the "volume" of the P1 object becomes larger.

An example is provided:

<script>
function fn () {
this.style.color= ' red ';
}
function fn () {
this.style.fontsize= ' px ';
}
Window.onload=function () {
document.getElementById (' btn '). Onclick=function () {
var div = document.getElementById (' div ');
Fn.call (div);
Fn.apply (div);
};
</script>
<div id= ' div ' >hello javascript</div> <input type= ' button ' id= ' btn ' value= '
Ok ' >

6. Three methods of implementation of inheritance

Concept: In some object-oriented languages, one class (subclass) can be used to inherit another class (The parent Class), and subclasses can have properties and methods of the parent class, which can be emulated in JS.

Three ways:

The first: Extending the Object method

Object.prototype. Method =function (Parent class object) {for
(var i in parent class object) {
This[i] = Parent class object [i];
}
;

An example is provided:

Object.prototype.ext=function (parobject) {
//loop traversal of all properties of the parent object
for (var i in Parobject) {
//Add this traversal to the subclass object to the attribute
//Its value is the property value of the parent class object
this[i] = Parobject[i];
}
function Person (p_name,p_age) {
this.name=p_name;
This.age=p_age;
This.speak=function () {
alert (this.name+this.age);
}
}
function Student (p_no) {
this.no=p_no;
This.say=function () {
alert (this.no+this.name_this.age);
}
}
var stu = new Student ();
Stu.ext (New person (' Xiaoqiang ',));
Stu.speak ();
Stu.say ();

The second: using the call and apply method

Grammar:

The parent Class Builder. Call (this,.......);

function Person (p_name,p_age) {
this.name=p_name;
This.age=p_age;
This.speak=function () {
alert (this.name+this.age);
}
}
function Student (p_no,p_name,p_age) {
this.no=p_no;
This.say=function () {
alert (this.name+this.age+this.no);
}
Person.call (this,p_name,p_age);
}
var stu = new Student (, ' Zhagsan ',);
Stu.speak ();
Stu.say ();

The third type: prototype inheritance

Grammar:

Subclass. prototype = new parent class ();

function Person (p_name,p_age) {
this.name=p_name;
This.age=p_age;
This.speak=function () {
alert (this.name+this.age);
}
}
function Student (p_no) {
this.no=p_no;
This.say=function () {
alert (this.name+this.age+this.no);
}
}
Student.prototype = new Person (' Wangwu ',);
var stu = new Student ();
Stu.speak ();
Stu.say ();

The above content to introduce the JS object-oriented (3) object class, static properties, closures, private properties, call and apply use, the inheritance of the three implementation methods, I hope to help!