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 相关文章推荐
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
js的延迟执行问题分析
Jun 23 Javascript
javascript操作符"!~"详解
Feb 10 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jQuery实现动态文字搜索功能
Jan 05 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
vue中axios的二次封装实例讲解
Oct 14 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函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
jQuery表格插件datatables用法总结
2014/09/05 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
vue-resource 拦截器(interceptor)的使用详解
2017/07/04 Javascript
vue组件生命周期详解
2017/11/07 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
分享ES6的7个实用技巧
2018/01/18 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
python项目对接钉钉SDK的实现
2019/07/15 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
Python3 合并二叉树的实现
2019/09/30 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
python装饰器使用实例详解
2019/12/14 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
给民警的表扬信
2014/01/08 职场文书
入党自我评价范文
2014/02/02 职场文书
现场施工员岗位职责
2014/03/10 职场文书
大学生创业事迹材料
2014/12/30 职场文书
思想道德自我评价2015
2015/03/09 职场文书
实习指导老师意见
2015/06/04 职场文书
Python3 类型标注支持操作
2021/06/02 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python