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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
Dec 13 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
vue实现表格过滤功能
Sep 27 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
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
2013/05/07 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
Node.js成为Web应用开发最佳选择的原因
2018/02/05 Javascript
js实现左右轮播图
2020/01/09 Javascript
python机器学习实战之树回归详解
2017/12/20 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Python requests设置代理的方法步骤
2020/02/23 Python
python爬取天气数据的实例详解
2020/11/20 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
生日寿宴答谢词
2014/01/19 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
运动会入场词50字
2014/02/20 职场文书
洗手间标语
2014/06/23 职场文书
统计专业自荐书
2014/07/06 职场文书
奶茶店创业计划书
2014/08/14 职场文书
离婚协议书范本2014
2014/10/27 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
求职自荐信怎么写
2015/03/04 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript