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对象的函数
Dec 22 Javascript
JavaScript实现拼音排序的方法
Nov 20 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
json传值以及ajax接收详解
May 24 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
基于js中document.cookie全面解析
Sep 14 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
JS实现省市县三级下拉联动
Apr 10 Javascript
vue 图片裁剪上传组件的实现
Nov 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 socket方式提交的post详解
2008/07/19 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php判断目录存在的简单方法
2019/09/26 PHP
PHP多进程简单实例小结
2019/11/09 PHP
比较简单的一个符合web标准的JS调用flash方法
2007/11/29 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
vue中路由参数传递可能会遇到的坑
2017/12/07 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
JS中async/await实现异步调用的方法
2019/08/28 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Python configparser模块常用方法解析
2020/05/22 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
信息专业大学生自我评价分享
2014/01/17 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
物业经理自我鉴定
2014/03/03 职场文书
教师一帮一活动总结
2014/07/08 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
航班延误投诉信
2015/07/02 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python