浅谈Javascript的静态属性和原型属性


Posted in Javascript onMay 07, 2015

文章给各位介绍Javascript的静态方法和原型方法一个例子,如果大家对于Javascript的静态方法和原型方法不了解可以和小编一起来看看。 一段代码,了解静态方法和实例方法:

<script>
    //对象构造函数
    function Atest(name){
      //私有属性,只能在对象构造函数内部使用
      var className = "Atest";
      //公有属性,在对象实例化后调用
      this.name = name;
      //对象方法
      this.hello = function(){
        alert(this.name);
        alert(this.msg());//使用原型方法扩充的方法可以在类内部使用
        alert(this.sex);//使用原型方法扩充的属性可以在类内部使用
        alert(Atest.age);//静态属性调用时格式为[对象.静态属性]
      }
    }
    //类方法 (实际是静态方法直接调用) 位置:Person类的外部 语法格式:类名称.方法名称 = function([参数...]){ 语句行; }
    Atest.Run = function(){
      alert("我是类方法 Run");
    }
 
 
    //原型方法
    Atest.prototype.msg = function(){
      alert("我的名字是:"+this.name);//如果原型方法当作静态方法直接调用时,this.name无法被调用
    }
 
    //公有静态属性 在类的外部
    Atest.age = 20;//公有静态属性不能使用 【this.属性】,只能使用 【对象.属性】 调用
 
    //原型属性,当作是类内部的属性使用【this.原型属性】,也可以当成公有静态属性使用【对象.prototype.原型属性】
    Atest.prototype.sex = "男";
 
    Atest.Run(); //类方法也是静态方法,可以直接使用 【对象.静态方法()】
    Atest.prototype.msg();//原型方法当成静态方法使用时【对象.prototype.方法()】 
    alert(Atest.prototype.sex);//原型属性当作静态属性使用时【对象.prototype.方法()】
    var a = new Atest("zhangsan");//对象方法和原型方法需要实例化对象后才可以使用
    a.hello();//对象方法必须实例化对象
    a.msg();//原型方法必须实例化对象
    alert(a.age)://错误,公有静态属性只能使用 【对象.属性】调用
 
    //ps:尽量将方法定义为原型方法,原型方法避免了每次调用构造函数时对属性或方法的构造,节省空间,创建对象快.
  </script>
Javascript 相关文章推荐
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
深入理解JavaScript系列(34):设计模式之命令模式详解
Mar 03 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 #Javascript
JS中获取函数调用链所有参数的方法
May 07 #Javascript
jQuery中animate动画第二次点击事件没反应
May 07 #Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 #Javascript
JS实现文字掉落效果的方法
May 06 #Javascript
DOM 高级编程
May 06 #Javascript
js获得当前系统日期时间的方法
May 06 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
实例讲解PHP面向对象之多态
2014/08/20 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
Python实现多线程HTTP下载器示例
2017/02/11 Python
django 自定义过滤器的实现
2019/02/26 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
python访问hdfs的操作
2020/06/06 Python
Python用Jira库来操作Jira
2020/12/28 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
初中数学教学反思
2014/01/16 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
小学敬老月活动方案
2014/02/11 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
实习单位指导教师评语
2014/12/30 职场文书