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 语言的递归编程
May 18 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
Sep 10 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
js 获取html5的data属性实现方法
Jul 28 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
May 31 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
前端框架ECharts dataset对数据可视化的高级管理
Dec 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
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP5.3新特性小结
2016/02/14 PHP
javascript控制swfObject应用介绍
2012/11/29 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
JavaScript数据结构之二叉树的查找算法示例
2017/04/13 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
原生JavaScript实现Ajax异步请求
2017/11/19 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
增大python字体的方法步骤
2020/07/05 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
工商管理实习自我鉴定
2013/09/28 职场文书
大学毕业登记表自我鉴定
2013/10/09 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
国旗下演讲稿
2014/05/08 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
就业协议书怎么填
2014/09/15 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
2014年终个人工作总结
2014/11/07 职场文书
廉洁自律个人总结
2015/02/14 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python