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 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
Three.js快速入门教程
Sep 09 Javascript
简单理解vue中Props属性
Oct 27 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
一秒学会微信小程序制作table表格
Feb 14 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
React实现动效弹窗组件
Jun 21 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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
PHP6 先修班 JSON实例代码
2008/08/23 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JavaScript中对循环语句的优化技巧深入探讨
2014/06/06 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
2020/03/28 Javascript
JavaScript中附件预览功能实现详解(推荐)
2017/08/15 Javascript
Vue2实时监听表单变化的示例讲解
2018/08/30 Javascript
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
python topk()函数求最大和最小值实例
2020/04/02 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
档案室主任岗位职责
2014/02/12 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
房屋出租委托书格式
2014/09/23 职场文书
中秋节感想
2015/08/10 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL