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 相关文章推荐
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
JS实现简单的右下角弹出提示窗口完整实例
Jun 21 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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 采集程序原理分析篇
2010/03/05 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
2011/07/31 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
react-router中的属性详解
2017/06/01 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
selenium+python实现自动登录脚本
2018/04/22 Python
django加载本地html的方法
2018/05/27 Python
python中pivot()函数基础知识点
2021/01/03 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
新员工培训个人的自我评价
2013/10/09 职场文书
酒店管理毕业生自荐信
2013/10/24 职场文书
村委会主任先进事迹
2014/01/15 职场文书
社会实践活动总结
2015/02/05 职场文书
党支部书记岗位职责
2015/02/15 职场文书
工资证明范本
2015/06/12 职场文书
毕业证明模板
2015/06/19 职场文书
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers