如何用JavaScript定义一个类


Posted in Javascript onSeptember 12, 2014

我原来的写法都是这样:

function Dog(){
  this.name = 'hachi';
}

Dog.prototype = {
  makeNoise:function(){
    alert('wangwangwang');
  }
};

后来又看到另外一种复杂一点而且看起来好像没有必要的写法:

function Dog(){
  var privateVariable = 'secret';

  var fn = function(){
    //...
  }

  fn.prototype = {
    makeNoise:function(){
      alert('wangwangwang');
    }
  }

  return fn;
}

这里的Dog函数其实是一个 制造类 的函数,它返回了真正的Dog类。
感觉这样做的好处是更好的实现了封装。
例如这里的privateVariable就是一个私有变量:

var d = new Dog;
d.privateVariable //undefined

另外如果在第一个例子的最后加上一句:

Dog.prototype = {
  //e...WTF??
}

这样Dog就不是Dog了~

后来的理解:
上面这样新建类的方法直接重写了prototype对象。这样prototype原本内置的属性就没有了(arguments, call, apply等)。
下面这种新建类的方法好像更好一些:

var Dog = function(name){
  this.name = name;
  var privateVariable = 'you cannot see me.';
  this.getPrivate = function(){return privateVariable;};
}
Javascript 相关文章推荐
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
js密码强度校验
Nov 10 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 #Javascript
jquery根据锚点offset值实现动画切换
Sep 11 #Javascript
无限树Jquery插件zTree的常用功能特性总结
Sep 11 #Javascript
js通过location.search来获取页面传来的参数
Sep 11 #Javascript
Javascript中设置默认参数值示例
Sep 11 #Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 #Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 #Javascript
You might like
php面向对象中的魔术方法中文说明
2014/03/04 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
php 中的closure用法详解
2017/06/12 PHP
laravel自定义分页效果
2017/07/23 PHP
PHP耦合设计模式实例分析
2018/08/08 PHP
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
基于JavaScript实现屏幕滚动效果
2017/01/18 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
js实现购物车功能
2018/06/12 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
python实现音乐下载的统计
2018/06/20 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
家长给孩子的表扬信
2014/01/17 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
师范生教育见习总结
2015/06/23 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫