js模拟类

ECMAScript6已经支持了class,但之前版本都不支持类,但是可以通过一些方法来模拟类。

js中的类,既是重点,也是难点,很多时候都感觉模棱两可。

首先强调一下js中很重要的3个知识点:this、prototype、constructor。

下面我们来总结一下定义(模拟)类的几种方法:

1.工厂模式

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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.构造函数法

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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.原型模式

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

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.封装(暂且这么叫吧)

?


1

2

3

4

5

6

7

8

9

10

11

12

var Dog = {

  createDog:function(){

    var dog = {};

    dog.name = "汪汪";

    dog.sayHello = function(){

      console.log("Hello World!");

    };

    return dog;

  }

};

var dog = Dog.createDog();

dog.sayHello();

就是把代码都封装起来,将实例对象作为一个整体返回,有点类似于工厂模式。

时间: 2024-10-08 12:36:45

js模拟类的相关文章

js模拟类的创建以及继承

<html> <body> <script>    //js模拟类的创建以及继承        //第一步:创建父类        function Parent(name){            this.name = name;        }        //给父类添加属性方法        Parent.prototype.age = 18;        //var p1 = new Parent();    //第二步:创建子类            

js模拟类的继承

var object = {   //定义object基本类,用于实现最基础的方法和属性 isA: function(type){ var self = this; while(self){ if(self == type){ return true; } self = self.Type; }; return false; }, name: 'object' } function Class(baseClass, defineClass){ //创建类的函数,用于声明类及继承的关系 funct

JS模拟类继承

//最后一个参数是JSON表示的类定义 //如果参数大于一,则第一个参数是基类,否则,基类是object //中间的参数是类实现的接口 //返回值是类,类是一个构造函数,并继承了基类的prototype function Class(){ aDefine = arguments[arguments.length - 1]; //传入的最后一个参数是要定义的类 if(!aDefine) return; //如果没用传参数,则直接结束. var aBase = arguments.length>1?

关于js模拟c#的Delegate(委托)实现

这是我的第一篇博文,想来讲一讲js的函数.我的标题是js模拟c#的Delegate. 一.什么是Delegate(委托) 在jquery中有delegate函数,作用是将某个dom元素的标签的事件委托给一个函数队列,在触发这个事件的时候会触发这个函数队列中的所有函数.而c#中的Delegate对象也是如此,将多个方法添加至一个委托对象,或称将多个方法委托给一个委托对象,当调用委托对象的Invoke方法时会调用所有被委托的方法.由此可以看出Delegate的本质应该是一个函数队列,执行委托对象就是

JS5模拟类

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>结算程序</h1> 9 <p> 10 <input type="text" placeholder="原价&quo

DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; }

js自定义类与对象

js中创建自定义类与创建对象:js创建类与AS3,java都有很大的不同,,,下面来看看他的庐山真面目..由于js也是一个面向对象的编程语言所以也存在像其他语言那样的创建自定义的类,和通过类来创建对象.js的类是有一下三部门组成1.构造函数2.属性3.方法自定义一个类: function MyClass(id,age,name) { this.id = id; this.age = age; this.name = name; } 从这个类的定义形式可以看出,js定义类的形式和其他语言有很大的不

单篇文章JS模拟分页

废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请求的时候,就已经把全文回传给客户端了,只是我们通过js的方式,把全文隐藏,每次翻页至显示出我们需要的那一部分,而不是真正的按需要去发出HTML请求.所以,在做这个插件的时候去掉了ajax请求的功能及其附带参数,去掉了pageSize参数(恒等于1).这里就不讨论具体的技术细节了和上一篇的分页计算原理

JS定义类及对象

JS定义类及对象 1.工厂方式 <script type="text/javascript"> function createObject(name){ var p = new Object(); p.name=name; p.say = function(){alert(p.name+'ff');} return p; } var p1 = createObject("p1"); var p2 = createObject("p2"