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 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
Dec 12 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
Jul 27 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jquery密码强度校验
Dec 02 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
微信小程序实现拖拽功能
Sep 26 Javascript
node.js使用fs读取文件出错的解决方案
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
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
php cli换行示例
2014/04/22 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
jquery滚动加载数据的方法
2015/03/09 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
seajs下require书写约定实例分析
2018/05/16 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python实现在字符串中查找子字符串的方法
2015/07/11 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
使用Python处理BAM的方法
2018/09/28 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python默认参数调用方法解析
2020/02/09 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
Perry Ellis官网:美国男士品味服装
2016/12/09 全球购物
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
安全生产宣传标语
2014/06/06 职场文书
三国演义读书笔记
2015/06/25 职场文书
红与黑读书笔记
2015/06/29 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers