JavaScript实例属性与原型属性详解及访问权限分析

JavaScript实例属性与原型属性详解及访问权限分析

请仔细阅读代码中的注释，此处不再赘述，直接展示代码实现。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试文档</title>
<script type="text/javascript">
// 实质上属性和方法是一致的，方法本质上是引用类型为函数的属性。
// 一个对象包含4种属性类型：
// 1. 构造函数通过this关键字定义的属性
// 2. 构造函数通过var关键字定义的属性
// 3. 构造函数的原型对象上添加的属性
// 4. 对象动态添加的属性
// 实例的公有属性：包括通过this关键字定义的属性，可访问类型1、2、3、4。
// 实例的私有属性：仅指通过var关键字定义的属性，仅可访问类型2。
// 实例的共享属性：指通过实例指向的原型添加的属性，可访问类型1、3、4。
// 实例的静态属性：指对象动态添加的属性，可访问类型1、3、4。
// 总结：
// 实例属性：1. 公有；2. 私有；4. 静态
// 原型属性：3. 共享
// 由this定义的为特权属性，所有类型均可访问。
// 由var定义的为私有属性。
// 动态添加的属性为公有属性，但不可访问私有属性。
// 实例对象指向的原型属性为原型属性，不可访问私有属性，且其优先级低于公有属性。
// 实例属性主要由公有属性和特权属性构成，均可被外部和原型属性访问。主要区别在于是否可访问私有属性。
// 原型属性优先级低于实例属性，可被外部访问和实例属性访问（除私有属性外）。
// -----------------此处为分割线-----------------------------
// 公有属性：对象暴露给外部环境的属性，也是对象的属性。
// 私有属性：对象内部的属性，通常不可访问，仅在构造函数层面上考虑才有意义。
// 静态属性：动态添加的属性，也是对象的属性。
// 共有属性：所有构造函数生成的实例所共享的属性。
代码实现与属性访问验证function User(){
// 公有属性：每new一个User实例对象，都有的属性。
// 为实例属性，所有实例的属性不共享内存。
// 外部可访问。
 this.name='byronvis';
// 特权方法：每new一个User实例对象，都有的方法。
// 为实例方法，所有实例的方法不共享内存。
// 外部可访问。
// 可访问公有属性。
// 可访问私有属性。
 this.sayName=function(){
 alert(this.name);
 alert(this.school);
 alert(age);//变量声明会自动提前。
 alert(this.sex);
 };
// 私有属性：外部不可访问。
// 仅对构造函数有意义，对于new的User实例对象无意义。
 var age=22;
// 私有方法：外部不可访问。
// 仅对构造函数有意义，对于new的User实例对象无意义。
 function sayAge(){
 alert(age);
 }
 sayAge();
 }
// 共有属性： 共享内存。
 User.prototype.school='zky';
// 共有方法：可访问公有属性。
// 共享内存。
 User.prototype.saySchool=function(){
 alert(this.school);
 alert(this.name);
 alert(this.sex);
 alert(age);
 };
 var obj=new User();
// 静态属性：就是动态添加的实例属性。
 obj.sex='man';
// 静态方法：就是动态添加的实例方法。
 obj.saySex=function(){
 alert(this.sex);
 alert(this.name);
 alert(this.school);
 alert(age);
 };
//-----------------此处为分割线-----------------------------
//// 证明this关键字定义的属性和动态添加的属性本质上一样的，都可认为是实例对象的公有属性。
// 验证： this关键字定义的属性访问动态添加的属性
// obj.sayName();//true
// 验证：动态添加的属性访问this关键字定义的属性
// obj.saySex();//true
// 验证：公有属性访问私有属性
// obj.sayName();//true
 obj.saySex();//false
// 验证：共享属性访问私有属性
// obj.saySchool();//false
</script>
</head>
<body>
 测试文档
</body>
</html>

通过上述代码示例，相信大家对实例属性和原型属性有了更清晰的认识。本文进行了较为详细的阐述，推荐给大家，希望有所帮助。