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


Posted in Javascript onNovember 23, 2014

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

<!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>

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

Javascript 相关文章推荐
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
javascript实现京东快递单号的查询效果
Nov 30 Javascript
JS常用函数使用指南
Nov 23 #Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
Nov 23 #Javascript
理解jQuery stop()方法
Nov 21 #Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 #Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 #Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 #Javascript
js实现div弹出层的方法
Nov 20 #Javascript
You might like
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP引用的调用方法分析
2016/04/25 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
结构工程个人自荐信范文
2013/11/30 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
2014年科协工作总结
2014/12/09 职场文书
学生会个人总结范文
2015/02/15 职场文书
民事答辩状格式范文
2015/05/21 职场文书
四风之害观后感
2015/06/09 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
HDFS免重启挂载新磁盘
2022/04/06 Servers
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang