js定义类的几种方法(推荐)


Posted in Javascript onJune 08, 2016

ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类。

js中的类,既是重点,也是难点,很多时候都感觉模棱两可。

首先强调一下js中很重要的3个知识点:this、prototype、constructor。

下面我们来总结一下定义(模拟)类的几种方法:

1.工厂模式

function createObject(name,age){
  var obj = new Object();
  obj.name = name;
  obj.age = age;
  obj.getName = function(){
    return this.name;
  };
  obj.getAge = function(){
    return this.age;
  }
  return obj;
}
var obj2 = createObject("王五",19);
console.log(obj2.getName());
console.log(obj2.getAge());
console.log(obj2.constructor);

工厂模式的方法创建对象,工厂模式可以根据接受的参数来创建一个包含必要信息的对象,可以无限次数的调用这个方法,每次都返回一个包含2个属性2个方法的对象。工厂模式解决了创建类似对象的问题,但没有解决对象的识别问题,即不能确定一个对象的类别,统一为Object。

2.构造函数法

function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
}

Person.prototype = {
  constructor:Person,
  getName:function(){
    return this.name;
  },
  getAge:function(){
    return this.age;
  },
  getJob:function(){
    return this.job;
  }
}

var p = new Person("二麻子",18,"worker");
console.log(p.constructor);
console.log(p.getName());
console.log(p.getAge());
console.log(p.getJob());

构造函数的方式虽然确定了对象的归属问题,能够确定对象的类型,但构造函数中的方法需要在每个对象中都要重新创建一遍,导致一些性能问题。

3.原型模式

function Person(){

}
Person.prototype = {
  constructor:Person,
  name:"张三",
  age:21,
  job:"teacher",
  getName:function(){
    return this.name;
  },
  getJob:function(){
    return this.job;
  }
}

var p = new Person();
console.log(p.getName()); //张三
console.log(p.getJob()); //teacher
var p2 = new Person();
p2.name = "李四";
console.log(p2.getName()); //李四

由实例代码我们可以知道,对象实例可以访问原型中的值,但不能重写原型中的值,如果对象实例中定义了和原型重名的属性,那么该属性就会屏蔽原型中的那个属性,但并不会重写。

4.封装(暂且这么叫吧)

var Dog = {
  createDog:function(){
    var dog = {};
    dog.name = "汪汪";
    dog.sayHello = function(){
      console.log("Hello World!");
    };
    return dog;
  }
};
var dog = Dog.createDog();
dog.sayHello();

就是把代码都封装起来,将实例对象作为一个整体返回,有点类似于工厂模式。

以上这篇js定义类的几种方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
详解JavaScript修改注册表的方法
Jan 05 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 #Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 #Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 #Javascript
webpack中引用jquery的简单实现
Jun 08 #Javascript
js验证框架之RealyEasy验证详解
Jun 08 #Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 #Javascript
json的使用小结
Jun 08 #Javascript
You might like
php中mysql模块部分功能的简单封装
2011/09/30 PHP
那些年一起学习的PHP(二)
2012/03/21 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
jQuery大于号(>)选择器的作用解释
2015/01/13 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Django实现学员管理系统
2019/02/26 Python
python web框架 django wsgi原理解析
2019/08/20 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python关于变量名的基础知识点
2020/03/03 Python
Python中常用的os操作汇总
2020/11/05 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
Molly Bracken法国电子商店:法国女性时尚品牌
2019/07/24 全球购物
新闻学专业应届生求职信
2013/11/08 职场文书
机械制造与自动化应届生求职信
2013/11/16 职场文书
关于读书的演讲稿
2014/05/07 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2015团员个人年度总结
2015/11/24 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android