JS object-oriented (3) Object class, static properties, closures, private properties, use of call and apply, three implementation methods of inheritance_javascript skills

1.Object class

In JS, Object is the base class of all classes. When using the Object class to create a custom object, you do not need to define a constructor (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 large amount of data. At this time, we can consider using the Object class. 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('具有email');
}else{
alert('无email');
}

2. Static attributes

In some object-oriented languages, you can use the static keyword to define static properties or static methods of a class, which can be simulated in JS.

Syntax:

Class name.Attribute 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++; //静态属性
Person.getCount=function(){ //静态方法
alert('当前共有' + Person.count + '个人');
}
}
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 an environment bound to these variables, so these variables are also part of the expression.

Ask a question:

function display(){
var i=; 
}
display();
//在这里，想访问局部变量i

In the global world, local variable i cannot be accessed because the scope is different, and after the display function is executed, local variable i will be recycled. The function of closure: "access local variables" and "prevent the memory occupied by the variables from being released"

//例
function fn(){
function fn(){
alert('hello');
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

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

//例
function fn(){
var i = ;
function fn(){
alert(i);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();

We know from Example 2: Use a reject function to include variable i, so that the memory of local variable i will not be reclaimed.

//例
function fn(){
var i = ;
function fn(){
alert(i++);
}
return fn; //返回fn函数首地址
}
var test=fn(); //test也指向了fn函数的首地址
test();
test();
test();

In Example 3, because the memory of i will never be reclaimed, the value of i will be +1 every time fn2 is called. The result of the operation is that 10 pops up, 11 pops up, and 12 pops up.

Principle of closure: In Example 3, there are three scopes: global scope, fn1 scope, fn2 scope. 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 the fn1 scope, and alert(i++) in the fn2 scope. 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 rules of the scope chain, i is not defined under fn2. , so i looked up the upper scope for i under fn2, and found var i=10 under fn1 scope. Therefore, the global test hooks the i of fn2, and the i of fn2 hooks the i of fn1, so fn1 will not be recycled after running.

4. Private attributes

In object-oriented thinking, some sensitive members that do not want to be made public can be defined as private, and this function can be simulated in JavaScript.

Syntax:

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 above example, we want to use var to represent private member properties, but after the Person constructor is executed, age will be recycled 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 two methods this.setAge and this.getAge use the local variable age, so age will not be recycled.

If there is only a set method, it means that the attribute is a write-only attribute.

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

5. Use of call and apply

The functions of call and apply: call the current function using the specified object. The functions of call and apply are exactly the same, but they have slightly different syntax.

Syntax:

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

The first parameter: who this points to when the function is executed

Parameters after

: specify

in order as needed

apply([thisObj[,argArray]])

The first parameter: who this points to when the function is executed

The second parameter: array, indicating the parameter set

In js, functions have several calling forms:

Person(); //Person内的this指向window
var p=new Person(); //Person内的this指向p
per.Person(); //Person内的this指向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指向window
//p.speak(); p对象没有speak属性

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

Also: You can also 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 pointer of this inside the function changes.

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

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='确定'>

6.继承的三种实现方法

概念：在有些面向对象语言中，可以使用一个类（子类）继承另一个类（父类），子类可以拥有父类的属性和方法，这个功能可以在js中进行模拟。

三种方法：

第一种：扩展Object方法

Object.prototype.方法=function(父类对象){
for(var i in 父类对象){
this[i] = 父类对象[i];
}　
};

举例说明：

Object.prototype.ext=function(parObject){
//循环遍历父类对象所有属性
for(var i in parObject){
//为子类对象添加这个遍历到的属性
//它的值是父类对象这个属性的属性值
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();

第二种：使用call和apply方法

语法：

父类构造器.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();

第三种：原型继承

语法：

子类.prototype = new 父类();

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

以上内容给大家介绍了JS面向对象（3）之Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法，希望对大家有所帮助！