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 相关文章推荐
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
js使用ajax读博客rss示例
May 06 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
Jun 10 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
js实现全国省份城市级联下拉菜单效果代码
Sep 07 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
vue项目如何刷新当前页面的方法
May 18 Javascript
js实现AI五子棋人机大战
May 28 Javascript
Node.js API详解之 os模块用法实例分析
May 06 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
vue-router 控制路由权限的实现
Sep 24 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
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
详解vscode中vue代码颜色插件
2018/10/11 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
了解前端理论:rscss和rsjs
2019/05/23 Javascript
Vue基础配置讲解
2019/11/29 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
原生js实现九宫格拖拽换位
2021/01/26 Javascript
详解Python中time()方法的使用的教程
2015/05/22 Python
Python连接mysql数据库的正确姿势
2016/02/03 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
北大自主招生自荐信
2013/10/19 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
2014迎国庆演讲稿
2014/09/19 职场文书
认真学习保证书
2015/02/26 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js