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定义类的方法的更多相关文章

  1. js定义类和方法

    js中定义一个类 //定义一个user类 var user = function(){ //类中的属性 var age; //设置age的值 var setAge = function(age){ t ...

  2. JS定义类的六种方式详解

    转载自: http://www.jb51.net/article/84089.htm 在前端开发中,经常需要定义JS类.那么在JavaScript中,定义类的方式有几种,分别是什么呢?本文就JS定义类 ...

  3. 洗礼灵魂,修炼python(47)--巩固篇—定义类的方法之@classmethod,@staticmethod

    定义类的方法,相信你会说,不就是在class语句下使用def () 就是定义类的方法了嘛,是的,这是定义的方法的一种,而且是最普通的方式 首先,我们已经知道有两种方式: 1.普通方法: 1)与类无关的 ...

  4. js定义类

    以下是es5标准里定义类的方法: function Point(x,y){ this.x=x; this.y=y; } Point.prototype.toString=function(){ ret ...

  5. Javascript中两种最通用的定义类的方法

    在Javascript中,一切都是对象,包括函数.在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义.但Javascript中提供了一种折中的方案:把对象定 ...

  6. JS中定义类的方法

    JS中定义类的方式有很多种: 1.工厂方式    function Car(){     var ocar = new Object;     ocar.color = "blue" ...

  7. JS中定义类的方法<转>

    转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...

  8. JS创建类的方法--简单易懂有实例

    版权声明:本文为博主原创文章,转载请注明出处 Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class. ...

  9. js构建类的方法

    Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class.(不过,ES6引入了Class这个概念,作为对 ...

随机推荐

  1. flex 居中

    display: flex; justify-content: space-between; align-items: center;

  2. oracle中plsql练习题----查询姓为“SMITH”的员工信息,并输出其员工号、姓名、工资、部门号。 – –如果该员工不存在,则插入一条新记录,员工号为2012,员工姓名为“Smith”,工资为7500元,入职日期为“2002年3月5日”,部门号为50。 – –如果存在多个名“Smith”的员工,则输出所有名为“Smith”的员工号、姓名、工资、入职日期、部门号L。

    一.思路:首先判断这个查询的是emp表,需要接收值,声明一个rowtype类型接收数据即可,第二是,存在exception,需要处理,exception中有两种异常,分别处理即可,分别输出即可. 二. ...

  3. jenkins-gitlab-harbor-ceph基于Kubernetes的CI/CD运用(一)

    注:这部分的学习还是要靠自己多点点 多尝试尝试 这部分19年3月份我是玩的很溜的,一年没用,基本忘光光了. 学习要温故而知新! 流程拓扑图 前提准备 部署应用服务 部署kubernetes 集群:ht ...

  4. Python-文件操作-之优化购物车

    #此次购物车优化,主要使用了文件操作的相关方法,有买家入口,和商家入口 一.买家入口 1.买家第一次启动程序输入金额,金额会记录到文件里,再登录就读取文件里保存的金额,买家可以购买商品,按 ‘q’ 退 ...

  5. Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法

    问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...

  6. POJ1144 tarjan+网络中割点与割边的数量

    题目链接:http://poj.org/problem?id=1144 割点与割边的数量我们可以通过tarjan的思想从一个点开始对其余点进行访问.访问的顺序构成一棵dfs树,其中根节点到任何一个结点 ...

  7. 熟悉使用Webdriver ---- 商品自动秒杀

    前几天下载了Webdriver模块,经过简单的研究,发现这个模块可以做很多有意思的事情,下面我就用一个实例来理解webdriver的此处操作(完整代码在文章末尾). *浏览器:谷歌chrome浏览器 ...

  8. 工作流--Activiti

    一.工作流 1.工作流介绍 工作流(Workflow),就是通过计算机对业务流程自动化执行管理.它主要解决的是“使在多个参与者  之间按照某种预定义的规则自动进行传递文档.信息或任务的过程,从而实现某 ...

  9. eNSP之VLAN设计实验

    0.实验目的 1.掌握基于IP地址的VLAN划分: 2.掌握基于交换机端口VLAN划分: 3.通过网关实现不同VLAN间的通讯; 1.实验环境 环境:eNSP模拟器 版本信息:1.3.00.100 V ...

  10. css 重排与重绘

    css 重绘与重排 我们要知道当浏览器下载完页面的所有资源后,就会开始解析源代码. HTML 会被解析成 DOM Tree,Css 则会被渲染成 CSSOM Tree,最后它们会附加到一起,形成渲染树 ...