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 ajax中使用jsonp的限制解决方法
Nov 22 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
node中间层实现文件上传功能
Jun 11 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
JS自定义右键菜单实现代码解析
Jul 16 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
类的另类用法--数据的封装
2006/10/09 PHP
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
js实现表格筛选功能
2017/01/18 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
业务代表的岗位职责
2013/11/16 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
最新离婚协议书范本
2014/08/19 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
小学中队委竞选稿
2015/11/20 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP