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 相关文章推荐
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
AngularJS的$location使用方法详解
Oct 19 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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数组是否为空的代码
2011/09/08 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
JS替换字符串中字符即替换全部而不是第一个
2014/06/04 Javascript
js密码强度检测
2016/01/07 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[01:01:31]2018DOTA2亚洲邀请赛3月29日小组赛B组 Mineski VS paiN
2018/03/30 DOTA
python生成指定尺寸缩略图的示例
2014/05/07 Python
python使用心得之获得github代码库列表
2014/06/25 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
Python使用gensim计算文档相似性
2016/04/10 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
python字典的常用方法总结
2019/07/31 Python
Python json读写方式和字典相互转化
2020/04/18 Python
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
珠宝的促销活动方案
2014/08/31 职场文书
客房部经理岗位职责
2015/02/02 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
五年级作文之想象作文
2019/10/30 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python正则表达式中flags参数的实例详解
2022/04/01 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers