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 硬盘序列号+其它硬件信息
Dec 23 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
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
session 的生命周期是多长
2006/10/09 PHP
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
jQuery级联操作绑定事件实例
2014/09/02 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
python类参数self使用示例
2014/02/17 Python
Python类定义和类继承详解
2015/05/08 Python
python实现用户登录系统
2016/05/21 Python
Python中函数参数匹配模型详解
2019/06/09 Python
pandas按行按列遍历Dataframe的几种方式
2019/10/23 Python
python 字典套字典或列表的示例
2019/12/16 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
Python如何实现邮件功能
2020/05/27 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
业务员岗位职责范本
2013/12/15 职场文书
我的长生果教学反思
2014/04/28 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
python实现简单反弹球游戏
2021/04/12 Python