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 相关文章推荐
在Windows上安装Node.js模块的方法
Sep 25 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
js给table赋值的实例代码
Oct 13 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
Jan 26 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 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 curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
JavaScript实现LI列表数据绑定的方法
2015/08/04 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
基于Vue如何封装分页组件
2016/12/16 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
layui表格实现代码
2017/05/20 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
分公司经理任命书
2014/06/05 职场文书
普通话演讲稿
2014/09/03 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
责任书范本大全
2015/05/11 职场文书
勇敢的心观后感
2015/06/09 职场文书