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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
JavaScript中链式调用之研习
Apr 07 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
JS案例分享之金额小写转大写
May 15 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
Jul 20 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
Yii2简单实现给表单添加验证码的方法
2016/07/18 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
js 事件小结 表格区别
2007/08/13 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
python 实现两个npy档案合并
2020/07/01 Python
python如何调用java类
2020/07/05 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
UNIX文件系统分类
2014/11/11 面试题
机关门卫岗位职责
2013/12/30 职场文书
投标服务承诺书
2014/05/28 职场文书
初中学习计划书范文
2014/09/15 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技