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 API学Jquery 之二 属性
Apr 09 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
vue 父组件调用子组件方法及事件
Mar 29 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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
php UBB 解析实现代码
2011/11/27 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
(仅IE下有效)关于checkbox 三态
2007/05/12 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
js实现微博发布小功能
2017/01/12 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
vue.js评论发布信息可插入QQ表情功能
2017/08/08 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
python Django批量导入数据
2016/03/25 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
详解Django 时间与时区设置问题
2019/07/23 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
Linux文件操作命令都有哪些
2016/07/23 面试题
超市5.1促销活动
2014/01/15 职场文书
出国留学担保书
2014/05/20 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
肖申克救赎观后感
2015/06/02 职场文书
感谢师恩主题班会
2015/08/17 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
Win11 BitLocker 驱动器加密
2022/04/19 数码科技
Golang 并发编程 SingleFlight模式
2022/04/26 Golang