浅谈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 相关文章推荐
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
Jan 23 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
AngularJS快速入门
Apr 02 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
js作用域和作用域链及预解析
Apr 11 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 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
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
新浪SAE搭建PHP项目教程
2015/01/28 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
EASYUI TREEGRID异步加载数据实现方法
2012/08/22 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
浏览器的JavaScript引擎的识别方法
2013/10/20 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
基于python 凸包问题的解决
2020/04/16 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
HTML5实现直播间评论滚动效果的代码
2020/05/27 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
网吧员工管理制度
2015/08/05 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript