浅谈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 相关文章推荐
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
js图片轮播插件的封装
Jul 21 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
vue实现顶部菜单栏
Nov 08 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 使用redis简单示例分享
2015/03/05 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php封装一个异常的处理类
2017/06/08 PHP
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
jQuery判断自定义属性data-val用法示例
2019/01/07 jQuery
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
Python正则表达式介绍
2012/08/06 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Python实现12306火车票抢票系统
2019/07/04 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Python3并发写文件与Python对比
2019/11/20 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
实习老师离校感言
2014/02/03 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
通知函的格式
2015/04/27 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
基于Redis位图实现用户签到功能
2021/05/08 Redis