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接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
js如何获取object类型里的键值
Feb 18 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
js模拟微博发布消息
Feb 23 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
性能优化篇之Webpack构建速度优化的建议
Apr 03 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 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 数组和字符串互相转换实现方法
2013/03/26 PHP
深入PHP curl参数的详解
2013/06/17 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
javascript some()函数用法详解
2014/11/13 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
载入进度条 效果
2006/07/08 Javascript
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
js 创建书签小工具之理论
2011/02/25 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
pycharm永久激活超详细教程
2020/10/29 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
计算机网络专业推荐信
2013/11/24 职场文书
单位成立周年感言
2014/01/26 职场文书
简历的自我评价
2014/02/03 职场文书
幼儿园大班教学反思
2014/02/10 职场文书
空气环保标语
2014/06/12 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server