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 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
Aug 17 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
微信小程序实现验证码获取倒计时效果
Feb 08 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
Vue CLI3基础学习之pages构建多页应用
Jun 02 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python的Flask框架中web表单的教程
2015/04/20 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
基于OpenCV python3实现证件照换背景的方法
2019/03/22 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python 字符串追加实例
2019/07/20 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
中科方德软件测试面试题
2016/04/21 面试题
高校十八大报告感想
2014/01/27 职场文书
法律专业自荐信
2014/06/03 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android