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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
css图片自适应大小
Nov 28 Javascript
javascript 实用的文字链提示框效果
Jun 30 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
优化PHP代码的53条建议
2008/03/27 PHP
PHP XML操作的各种方法解析(比较详细)
2010/06/17 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
js导航菜单(自写)简单大方
2013/03/28 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
JS表的模拟方法
2015/02/05 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python字符串的拼接方法总结
2019/11/18 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Python如何实现定时器功能
2020/05/28 Python
Pycharm2020最新激活码|永久激活(附最新激活码和插件的详细教程)
2020/09/29 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
乡下人家教学反思
2014/02/01 职场文书
初中生评语大全
2014/04/24 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
激励员工的口号
2014/06/16 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
Python WSGI 规范简介
2021/04/11 Python
总结python多进程multiprocessing的相关知识
2021/06/29 Python
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
SQL CASE 表达式的具体使用
2022/03/21 SQL Server