JavaScript的学习-实例属性和类属性

JavaScript-实例属性和类属性

一、定义

根据函数中声明变量的方式，函数中变量分为以下三种：

        ->局部变量：在函数中以var声明的变量

        ->实例属性：在函数中以this前缀修饰的变量

        ->类属性：在函数中以函数名前缀修饰的变量

二、区别

->局部变量是只能在函数里访问的变量

->实例属性是属于单个对象的，因此必须通过对象来进行访问

->类属性是属于整个类（也指函数）本身的，因此必须通过类（也指函数）来进行访问

看如下代码：

<script type="text/javascript">
function Person(name,age)
{
	//以var定义的变量为局部变量
	var hello = "你好！";
	//this修饰的变量为实例属性
	this.age = age;
	//Person修饰的变量为类属性
	Person.name = name;
}

//创建Person的第一个对象p1:姓名为张三，年龄为20
var p1 = new Person('张三',20);
document.writeln("创建的第一个Person对象<br />");
//输出第一个对象p1的姓名和年龄
document.writeln("p1的age属性为：" + p1.age + "<br />");
document.writeln("p1的name属性为：" + p1.name + "<br />");
document.writeln("通过Person访问静态name属性为：" + Person.name + "<br />");
//输出hello属性
document.writeln("p1的hello属性为：" + p1.hello + "<br /><hr />");

//创建Person的第二个对象p2:姓名为李四，年龄为24
var p2 = new Person('李四',24);
document.writeln("创建两个Person对象之后<br />");

//再次输出第一个对象p1的姓名和年龄
document.writeln("p1的age属性为：" + p1.age + "<br />");
document.writeln("p1的name属性为：" + p1.name + "<br />");
//输出第一个对象p1的姓名和年龄
document.writeln("p2的age属性为：" + p2.age + "<br />");
document.writeln("p2的name属性为：" + p2.name + "<br />");
//通过类名访问类属性名
document.writeln("通过Person访问静态name属性为：" + Person.name + "<br />");

</script>

运行后：

Person函数的age属性为实例属性----》可通过Person对象来访问age属性

Person函数的name属性为类属性，则该属性完全属于Person类----》必须通过Person类来访问name属性

由上图代码可以看出，Person对象并没有name属性，所以通过Person对象访问该属性将返回undefined；而hello为Person的局部变量，在函数外是无法访问该变量的。

三、JavaScript的灵活性

JavaScript允许随时为对象增加属性和方法，当直接为对象的某个属性赋值时，即可视为给对象增加属性。

如下代码：

<script type="text/javascript">
	function Person(name , age)
	{
		//定义一个age实例属性，并传参
		this.age = age;
		//定义一个name类属性
		Person.name = name;
	}
	//创建一个p1对象
	p1 = new Person('张三',20);
	

	//由于name为类属性，因此通过p1访问该属性，返回为undefined
	document.writeln('p1的name属性为：' + p1.name +'<br />');
	document.writeln('p1的age属性为：' + p1.age + '<br />');
	document.writeln('Person的name属性为：' + Person.name + '<br />');
	
	//为p1对象的name属性赋值，就等同于为Person增加了一个name属性
	p1.name = '李四';

	document.writeln('<hr />为p1的name属性赋值后<br />');
	document.writeln('p1的name属性为：' + p1.name +'<br />');
	document.writeln('Person的name属性为：' + Person.name + '<br />');

</script>

运行后：

 

day 2018.11.09
整理自《疯狂HTML+CSS+JavaScript讲义第二版》
邮箱：707904142@qq.com