Home>

1.object class

In js, object is the base class of all classes,When using the object class to create custom objects,No need to define constructors (constructor, prototype, hasownproperty (property))

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 it can store a lot of data,at this time,We can consider using the object class. The object class avoids the definition of a constructor. Another common property under the object class:hasownproperty

var per=new object ();
per.name="zhangsan";
per.age =;
if per.hasownproperty ("email") {
alert ("has email");
} else {
alert ("No email");
}

2. Static attributes

In some object-oriented languages,You can use the static keyword to define static properties or methods of a class.In js, you can simulate.

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);

Add static properties and static methods:

function person () {
person.count ++;// static property
person.getcount=function () {// static method
alert ("Currently shared" + person.count + "Personal");
}
}
person.count =;
var p=new person ();
var p=new person ();
var p=new person ();
person.getcount ();

3. Closure

Concept:the so-called closure,Refers to an expression (usually a function) that has many variables and the environment to which those variables are bound, so these variables are also part of the expression.

raise a question:

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

Globally,Cannot access local variable i because the scope is different,Moreover, after the display function is executed,The local variable i is recycled. Functions of closures:"Access local variables" and "Make memory occupied by variables not released"

//example
function fn () {
function fn () {
alert ("hello");
}
return fn;// return the first address of the fn function
}
var test=fn ();// test also points to the first address of the fn function
test ();

Through Example 1, we know:the variable can point to the first address of the function,A function can also return the first address of another function.

//example
function fn () {
var i =;
function fn () {
alert (i);
}
return fn;// return the first address of the fn function
}
var test=fn ();// test also points to the first address of the fn function
test ();

Through Example 2, we know:use a rejection function to include the variable i so that the memory of the local variable i will not be reclaimed.

//example
function fn () {
var i =;
function fn () {
alert (i ++);
}
return fn;// return the first address of the fn function
}
var test=fn ();// test also points to the first address of the fn function
test ();
test ();
test ();

In Example 3, because i's memory is never reclaimed,So every time fn2 is called, the value of i will be +1. The result of the operation is pop-up 10, pop-up 11, pop-up 12.

The principle of closures:In Example 3, there are three scopes:the global scope,fn1 scope,The scope of fn2.There is test=fn1 () in the global scope. In fact, this sentence is equivalent to test=fn2. There are var i=10 and return fn2 in fn1 scope, and alert (i ++) in fn2 scope example. When test=fn1 () in the global scope is executed, test points to the scope of fn2,At this time, i under the fn2 scope is hooked by the global scope.According to the law of scope chains,There is no definition of i under fn2, so i under fn2 looks for the upper scope.We found var i=10 in the fn1 scope. So the global test hooks i of fn2, i of fn2 hooks i of fn1, so after fn1 finishes running,Will not be recycled.

4. Private Properties

In object-oriented thinking,For some sensitive ones,Unwanted members can be defined as private,This function can be simulated in javascript.

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 use var to represent private member attributes,But after the person constructor finishes executing, age will be recycled,Cannot be used as a member attribute.

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 two methods this.setage and this.getage use the local variable age, so age will not be recycled.

If there is only the set method, the attribute is write-only.

If there is only a get method, the attribute is read-only.

5. Use of call and apply

Call and apply functions:Use the specified object to call the current function.The functions of call and apply are exactly the same,It's just slightly different in syntax.

grammar:

call ([thisobj [, arg1 [, arg2 [, argn]]]])

First parameter:When the function is executed,who this points to

Subsequent parameters:specified in order as needed

apply ([thisobj [, argarray]])

First parameter:When the function is executed,who this points to

The second parameter:an array, representing a collection of parameters

In js, functions have several calling forms:

person ();// this within person points to window
var p=new person ();// this inside person points to p
per.person ();// this within person points to 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 attribute

Use call and apply to call

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 during execution:1) point this inside the function to the first parameter 2) call the function

In addition:You can also solve the problem like this:

p1.say=speak;

p1.say ();

This solution is essentially different from the above solution:

The solution above is to call the speak function directly, but the direction of this inside the function changes.

The following solution will add attributes to the p1 object,The "volume" of the p1 object becomes larger.

for example:

<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>hello javascript</div>
<input type="button" value="OK">

6. Three implementation methods of inheritance

Concept:In some object-oriented languages,You can use one class (child class) to inherit another class (parent class). Child classes can have properties and methods of the parent classThis function can be simulated in js.

three methods:

The first:extending the object method

object.prototype.method=function (parent object) {
for (var i in parent object) {
this [i]=parent object [i];
}
};

for example:

object.prototype.ext=function (parobject) {
// Cycle through all the properties of the parent object
for (var i in parobject) {
// Add this traversed attribute to the subclass object
// Its value is the property value of this property of the parent 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 methods

grammar:

The parent class constructor.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 ();

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 ();
  • Previous FrameLayout and Fragment handle UI layout examples for Android applications
  • Next Summary of common usage of fragments in Android application UI development
  • Trends