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 28 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
javascript常用对话框小集
Sep 13 Javascript
javascript判断office版本示例
Apr 11 Javascript
JS获取时间的方法
Jan 21 Javascript
详解Node.js模块间共享数据库连接的方法
May 24 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
微信小程序 五星评分的实现实例
Aug 04 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
微信小程序页面上下滚动效果
Nov 18 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跳转页面的几种实现方法详解
2013/06/08 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
微信小程序提取公用函数到util.js及使用方法示例
2019/01/10 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Python中的ctime()方法使用教程
2015/05/22 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
python中的lambda表达式用法详解
2016/06/22 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python调用staf自动化框架的方法
2018/12/26 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Python实现word2Vec model过程解析
2019/12/16 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
鱼油专家:Omegavia
2016/10/10 全球购物
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
食品安全宣传标语
2014/06/07 职场文书
2014年预算员工作总结
2014/12/05 职场文书
大学生学年个人总结
2015/02/15 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js