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 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
JS仿百度搜索自动提示框匹配查询功能
Nov 21 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
浅谈node.js中间件有哪些类型
Apr 29 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小偷相关截取函数备忘
2010/11/28 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php 判断数组是几维数组
2013/03/20 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
jquery随意添加移除html的实现代码
2011/06/21 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
2013/11/03 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
nodejs基础应用
2017/02/03 NodeJs
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信小程序中使用自定义图标(阿里icon)的方法
2018/08/20 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Django中使用group_by的方法
2015/05/26 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python线程里哪种模块比较适合
2020/08/02 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
社区母亲节活动方案
2014/03/05 职场文书
环保主题班会教案
2015/08/13 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android