js实例属性和原型属性示例详解

所属分类: 网络编程 / JavaScript 阅读数: 927
收藏 0 赞 0 分享

详情请仔细研读注释,这里就废话少说,直接上代码了。

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试文档</title>
    <script type="text/javascript">
// 实质上属性和方法是一样的,方法是属性为引用型的函数。
//一个对象有4种属性:
//                 1,构造函数通过this关键字定义的属性
//                 2,构造函数通过var关键字定义的属性
//                 3,构造函数的原型对象添加的属性
//                 4,对象动态添加的属性
//实例的公有属性:1      通过this关键字定义的属性           可访问   1,2,3,4
//实例的私有属性:2      通过var关键字定义的属性。          可访问   2
//实例的共享属性:3      通过实例指向的原型添加的属性。      可访问   1,3,4
//实例的静态属性: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>

小伙伴们是否看明白了,了解了实例属性和原型属性了吗?本文讲述的非常的详细,推荐给大家,希望对小伙伴们能有所帮助

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多