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 相关文章推荐
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
js常用DOM方法详解
Feb 04 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
Mar 01 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
JS 事件机制完整示例分析
Jan 15 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中路径问题的解决方案
2006/10/09 PHP
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
PHP实现抓取Google IP并自动修改hosts文件
2015/02/12 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
详解vue或uni-app的跨域问题解决方案
2020/02/21 Javascript
vue实现计算器功能
2020/02/22 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python常用小技巧总结
2015/06/01 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
道路施工安全责任书
2014/07/24 职场文书
党员剖析材料范文
2014/12/18 职场文书
作文评语怎么写
2014/12/25 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
银行求职信模板
2015/03/20 职场文书
2016年员工年度考核评语
2015/12/02 职场文书
Python 如何安装Selenium
2021/05/06 Python
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
css3新特性的应用示例分析
2022/03/16 HTML / CSS