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 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
桌面中心(一)创建数据库
2006/10/09 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
js实现简易聊天对话框
2017/08/17 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
使用Python对SQLite数据库操作
2017/04/06 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
10 分钟快速入门 Python3的教程
2019/01/29 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
如何理解python面向对象编程
2020/06/01 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
四年级评语大全
2014/04/21 职场文书
党员自我评价范文2015
2015/03/03 职场文书
2015年教研组工作总结
2015/05/04 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
遗愿清单观后感
2015/06/09 职场文书
结婚幸福感言
2015/08/01 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
Linux磁盘管理方法介绍
2022/06/01 Servers