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 相关文章推荐
细品javascript 寻址,闭包,对象模型和相关问题
Apr 27 Javascript
javascript Demo模态窗口
Dec 06 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
javascript白色简洁计算器
May 04 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
Jul 30 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
浅谈Vue的响应式原理
May 30 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 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分页显示制作详细讲解
2006/10/09 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
JS实现排行榜文字向上滚动轮播效果
2019/11/26 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
python中元类用法实例
2014/10/10 Python
python字典操作实例详解
2017/11/16 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
python计算日期之间的放假日期
2018/06/05 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
pandas去除重复列的实现方法
2019/01/29 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
创业计划书如何吸引他人眼球
2014/01/10 职场文书
校园广播稿500字
2014/02/04 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
安全施工标语
2014/06/07 职场文书
企业三严三实学习心得体会
2014/10/13 职场文书
反腐倡廉观后感
2015/06/08 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers