JS Object Oriented (3) Object classes static properties closures private properties the use of call and apply three methods of inheritance implementation

1. Object class

In JS, Object is the base class for all classes, and it is possible to create custom objects using the Object class without defining 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 our program that can store a large amount of data, so we can consider using the Object class. The ES15en class avoids defining constructors. Another commonly used attribute under the Object class: hasOwnProperty

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

2. Static properties

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

Grammar:

Class name. Property name

Property =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 attributes 
Person.getCount=function(){ // A static method 
alert(' The current total of ' + Person.count + ' personal ');
}
}
Person.count = ;
var p = new Person();
var p = new Person();
var p = new Person();
Person.getCount();

3. The closure

Concept: A closure is an expression (usually a function) that has a number of variables and the environment to which those variables are bound, and therefore those variables are part of the expression.

1 question:

function display(){
var i=; 
}
display();
// In this case, you want to access local variables i

Globally, the local variable i cannot be accessed because the scope is different and the local variable i is reclaimed after the execution of the display function. Closures: "Access local variables" and "Do not free the memory held by variables"

// case 
function fn(){
function fn(){
alert('hello');
}
return fn; // return fn Function header address 
}
var test=fn(); //test Also points to the fn The first address of the function 
test();

Example 1 shows that a variable can refer to the first address of a function, and a function can return the first address of another function.

// case 
function fn(){
var i = ;
function fn(){
alert(i);
}
return fn; // return fn Function header address 
}
var test=fn(); //test Also points to the fn The first address of the function 
test();

From example 2 we know that using a function containing the variable i, the memory of the local variable i will not be reclaimed.

// case 
function fn(){
var i = ;
function fn(){
alert(i++);
}
return fn; // return fn Function header address 
}
var test=fn(); //test Also points to the fn The first address of the function 
test();
test();
test();

In Example 3, the value of i is +1 each time fn2 is called, because the memory of i is never reclaimed. The result is popup 10, popup 11, popup 12.

How closures work: In Example 3, there are three scopes: the global scope, the scope of fn1, and the scope of fn2. In the global scope there is test=fn1(), which is the same as test=fn2 In the scope of fn1 there are var, i=10 and return, fn2, in the scope of fn2 there are alert(i++). When test=fn1() in the global scope is executed, test points to the scope of fn2. At this time, the i in the global scope of fn2 is hooked by the global scope. According to the law of scope chain, there is no definition of i under fn2, so look up the scope of i under fn2 and find the scope of var and i=10. So global test hooks i for fn2 and i for fn2 hooks i for fn1, so when fn1 is finished, it will not be collected.

4. Private properties

In object-oriented thinking, members that are somewhat sensitive and do not want to be public can be defined as private, which 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 wanted to use var to represent private member properties, but after the Person constructor is executed, age will be reclaimed and cannot be used as a member property.

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

0

this.setAge and this.getAge use local variable age, so age will not be recycled.

If there are only set methods, the property is a write-only property.

If there are only get methods, the attribute is read-only.

5. Use of call and apply

call and apply capabilities: Call the current function with the specified object. call and apply do exactly the same thing, with a slight difference in syntax.

Grammar:

call([thisObj[,arg1[,arg2[,argN]]]])

Parameter 1: Who this points to when the function is executed

Afterward parameters: Specify in the order required

apply([thisObj[,argArray]])

Parameter 1: Who this points to when the function is executed

Parameter 2: array, which represents the collection of parameters

In js, functions can be called in several ways:

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

1

Call using call and apply

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

2

call and apply do two things when they are executed: 1) point the function's inner this to the first argument and 2) call the function

In addition, we can solve the problem like this:

P1.say=speak;

P1.say();

This solution is fundamentally different from the above solution:

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

The following solution will add attributes to the p1 object, which will increase the "size" of the p1 object.

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 id='div'>hello javascript</div>
<input type='button' id='btn' value=' determine '>

6. Three implementations of inheritance

Concept: In some object-oriented languages, one class (subclass) can inherit from another class (parent class), which can have the properties and methods of the parent class. This functionality can be emulated in js.

Three methods:

Type 1: Extend the Object method

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

4

For example:

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

5

Type 2: Use call and apply methods

Grammar:

call(this,.......) ;

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

6

Third: archetypal inheritance

Grammar:

prototype = new parent ();

var per = new Object();
per.name = 'zhangsan';
per.age = ;
if per.hasOwnProperty('email'){
alert(' with email');
}else{
alert(' There is no email');
}

7

The above content gives you an introduction to JS object-oriented (3) Object class, static properties, closures, private properties, call and apply use, inheritance of 3 implementation methods, I hope to help you!