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 Jquery 遍历Json的实现代码
Mar 31 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
学习javascript文件加载优化
Feb 19 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
Vue实现选择城市功能
May 27 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 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正则表达式(regar expression)
2011/09/10 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
2010/12/30 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
实例讲解python函数式编程
2014/06/09 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
Python进阶:生成器 懒人版本的迭代器详解
2019/06/29 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
python实现提取str字符串/json中多级目录下的某个值
2020/02/27 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
语文教学随笔感言
2014/02/18 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
员工工作表现自我评价
2015/03/06 职场文书
总经理岗位职责范本
2015/04/01 职场文书
撤诉书怎么写
2015/05/19 职场文书
Java实现简单小画板
2022/06/10 Java/Android