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高亮效果的二种实现方法
Sep 14 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
Apr 26 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
Knockoutjs 学习系列(一)ko初体验
Jun 07 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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检查是否是ajax请求的方法
2015/04/16 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
详解jQuery-each()方法
2019/03/13 jQuery
vue el-table实现行内编辑功能
2019/12/11 Javascript
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python数据化运营的重要意义
2019/11/25 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
工厂会计员职责
2014/02/06 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
母婴店促销方案
2014/03/05 职场文书
超市开店计划书
2014/09/15 职场文书
教师三严三实学习心得体会
2014/10/11 职场文书
督导岗位职责
2015/02/04 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript