js实例属性和原型属性示例详解

 更新时间:2014年11月23日 10:23:42   转载 投稿:hebedich  
本文通过实例向大家讲述了js实例属性和原型属性,详情请看注释,看不懂的话,请放弃javascript吧。

详情请仔细研读注释,这里就废话少说,直接上代码了。

复制代码 代码如下:

<!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原生拖放的深入理解

    拖放(drag-and-drop,DnD)其实是两个动作——拖和放。所以,它涉及到两个元素。一个是被拖的元素,称为拖放源;另一个是要放的目标,称为拖放目标。本文将通过拆分这两个概念来详细介绍原生拖放,感兴趣的朋友一起学习吧
    2016-09-09
  • Javascript中click与blur事件的顺序详析

    Javascript中click与blur事件的顺序详析

    这篇文章主要给大家介绍了关于Javascript中click与blur事件顺序的相关资料,文中介绍的非常详细,对大家学习或者使用Javascript中的click与blur事件具有一定的参考学习价值,需要的朋友可以下面来一起看看吧。
    2017-04-04
  • 基于HTML5+JS实现本地图片裁剪并上传功能

    基于HTML5+JS实现本地图片裁剪并上传功能

    这篇文章主要为大家详细介绍了HTML5本地图片裁剪并上传的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 9个javascript语法高亮插件 推荐

    9个javascript语法高亮插件 推荐

    语法高亮效果使用非常频繁,特别是在博客里展示各种代码的时候,可以让代码更易读。我们身边就有很多语法高亮的插件,其中大部分是用javascript写的,也有一些是通过server端语言实现(比如Phyton或Ruby)。
    2009-07-07
  • 纯原生js实现贪吃蛇游戏

    纯原生js实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了纯原生js实现贪吃蛇游戏的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Javascript控制input输入时间格式的方法

    Javascript控制input输入时间格式的方法

    这篇文章主要介绍了Javascript控制input输入时间格式的方法,涉及鼠标事件及正则表达式的灵活应用,需要的朋友可以参考下
    2015-01-01
  • javascript引用对象的方法代码

    javascript引用对象的方法代码

    javascript引用对象的方法代码...
    2007-08-08
  • javascript生成json数据简单示例分享

    javascript生成json数据简单示例分享

    这篇文章主要介绍了javascript生成json数据示例,需要的朋友可以参考下
    2014-02-02
  • JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

    JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

    这篇文章主要介绍了JS+HTML5本地存储Localstorage实现注册登录及验证功能,结合实例形式分析了基于JS+HTML5本地存储Localstorage实现注册登录及验证相关操作技巧,需要的朋友可以参考下
    2020-02-02
  • js和jquery中循环的退出和继续学习记录

    js和jquery中循环的退出和继续学习记录

    这篇文章主要介绍了js和jquery中循环的退出和继续学习记录,下哦功能不简单,需要的朋友可以参考下
    2014-09-09

最新评论