JavaScript函数的实例属性和类属性

时间:2021-09-08 14:56:36

由于JavaScript函数不仅仅是一个函数,而且是一个类 该函数还是此类唯一的构造器, 只要在调用函数时使用new
关键字,就可返回一个Object,这个Object不是函数的返回值,而是函数本身产生的对象。因此在JavaScript中定义的变量不仅有局部变量,还是实例属性和类属性
根据函数中声明变量的方式,函数中的变量有3种。

  • 局部变量:在函数中以普通方式声明的变量,包括以var或不加任何前缀声明的变量
  • 实例变量:在函数中以this前缀修饰的变量
  • 类属性:在函数中以函数名前缀修饰的变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
<script>
function Person(national,age) {
this.age=age;
Person.national=national;
var bb=0;
}

var p1=new Person("中国",29);
document.writeln("创建第一个Person对象<br/>");

document.writeln("p1的age属性:"+p1.age+"<br/>");
document.writeln("p1的national属性:"+p1.national+"<br/>")
document.writeln("通过Person访问静态national属性为:"+Person.national+"<br/>");
document.writeln("p1的bb属性:"+p1.bb+"<br/>");

document.writeln("<br/><br/>*******************************"+"<br/><br/>");
var p2=new Person("美国",32);
document.writeln("创建第二个Person对象<br/>");

document.writeln("p1的age属性:"+p1.age+"<br/>");
document.writeln("p1的nationl属性:"+p1.national+"<br/>");
document.writeln("p2的age属性:"+p2.age+"<br/>");
document.writeln("p2的national属性:"+p2.national+"<br/>")
document.writeln("通过Person访问静态national属性为:"+Person.national+"<br/>");
document.writeln("p2的bb属性:"+p2.bb+"<br/>");
</script>
</html>

运行效果:

JavaScript函数的实例属性和类属性

Person函数的age属性为实例属性
因而每个实例的age属性都可以完全不同。程序应通过Person对象来访问age属性;national属性为类属性,该属性完全属于Person类,因此必须通过Person类访问national属性,Person对象并没有national属性,所以通过Person对象访问该属性将返回undefined;而bb则是Person的局部变量,在Person函数以外无法访问该变量。

JavaScript与Java不同 它是一种动态语言 它允许随时为对象增加属性和方法,当我们直接为对象的某个属性赋值时,即可视为给对象增加属性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
<script>
var Obj=new Object();
/*此时的Obj类中并没有任何方法 属性*/
Obj.name="垃圾成都东软";
Obj.age=18;
with (document){
writeln("名字:"+Obj.name+"<br/>");
writeln("年龄:"+Obj.age)
}
</script>
</html>

运行效果:

JavaScript函数的实例属性和类属性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
<script>
function Student(grade,subject) {
this.grade=grade;
Student.subject=subject;
}
s1=new Student(5,"Java");
with(document){
writeln("s1的grade属性:"+s1.grade+"<br/>");
writeln("s1的subject属性:"+s1.subject+"<br/>");
writeln("Student的subject属性:"+Student.subject+"<br/>");
}
s1.subject="HTML";
with(document){
writeln("<hr/>s1的grade属性:"+s1.grade+"<br/>");
writeln("s1的subject属性:"+s1.subject+"<br/>");
writeln("Student的subject属性:"+Student.subject+"<br/>");
}
</script>
</html>

运行效果:

JavaScript函数的实例属性和类属性