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陷阱题
Feb 07 Javascript
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
Jquery实现鼠标移动放大图片功能实例
Mar 25 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
JS实现电商商品展示放大镜特效
Jan 07 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
2020/03/17 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
关键字final的用法
2013/10/02 面试题
高中课程设置方案
2014/05/28 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
南京南京观后感
2015/06/02 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL