美文网首页Web前端之路
在 ES5 中如何用函数模拟一个类?

在 ES5 中如何用函数模拟一个类?

作者: JaniceZD | 来源:发表于2019-08-01 09:27 被阅读1次

前言

现如今,单个网页包含10000行Javascript代码,早就司空见惯。
编写和维护复杂的Javascript代码,必须使用模块化策略。目前,业界的主流做法是采用“面向对象编程”。因此,Javascript如何实现面向对象编程,就成了一个热门课题。
麻烦的是,Javascipt语法不支持"类"(class),导致传统的面向对象编程方法无法直接使用。

本文将介绍 JavaScript 中模拟类的方法(暂不谈ES6 新增的 Class)。

Javascript 定义类(class)的三种方法

1. 构造函数法

它用构造函数模拟“类”,在其内部用 this 关键字指代实例对象。

function Obj(a, b){
  this.a = a;
  this.b = b;
}
//把那些不变的属性和方法,直接定义在prototype对象上
Obj.prototype.text = "Hi!"

// 生成实例的时候,使用new关键字。
var obj = new Obj(1, 2); //obj 等价于 { a:1, b:2 }

obj.text  //"Hi!"

使用构造函数的好处在于可以传递参数。构造函数通常首字母大写,而且需要使用 new 关键词来调用。在 JavaScript 中是没有类的,利用构造函数可以模拟一个类。

2. Object.create()法

为了更方便地生成对象,Javascript的国际标准ECMAScript第五版,提出了一个新的方法Object.create()

用这个方法,"类"就是一个对象,不是函数。

var Cat = {
  name: "大毛",
  makeSound: function(){ alert("喵喵喵"); }
};

// 直接用 Object.create() 生成实例,不需要用到 new
var cat1 = Object.create(Cat);

cat1.makeSound(); // 喵喵喵

这种方法比"构造函数法"简单,但是不能实现私有属性和私有方法,实例对象之间也不能共享数据,对"类"的模拟不够全面。

3. 极简主义法

荷兰程序员Gabor de Mooij提出了一种比 Object.create() 更好的新方法,他称这种方法为“极简主义法”(minimalist approach)。

3.1 封装
var Cat = {
  createNew: function () {
    var cat = {};
    cat.name = "大毛";
    cat.makeSound = function () { alert("喵喵喵"); };
    return cat;
  }
}

//使用的时候,调用createNew()方法,就可以得到实例对象
var cat1 = Cat.createNew();
cat1.makeSound(); // 喵喵喵
3.2 继承

让一个类继承另一个类,实现起来很方便。只要在前者的 createNew() 方法中,调用后者的 createNew() 方法即可。

var Animal = {
  createNew: function () {
    var animal = {};
    animal.sleep = function () { alert("睡懒觉"); };
    return animal;
  }
}

然后,在CatcreateNew() 方法中,调用 AnimalcreateNew()方法。

var Cat = {
  createNew: function () {
    var cat = Animal.createNew();
    cat.name = "大毛";
    cat.makeSound = function () { alert("喵喵喵"); };
    return cat;
  }
}
//这样得到的Cat实例,就会同时继承Cat类和Animal类。
var cat1 = Cat.createNew();

cat1.makeSound(); //喵喵喵
cat1.sleep(); // 睡懒觉
3.3 私有属性和私有方法
var Cat = {
  createNew: function () {
    var cat = {};
    var sound = "喵喵喵";
    cat.makeSound = function () { alert(sound); };
    return cat;
  }
};

var cat1 = Cat.createNew();

alert(cat1.sound); // undefined
cat1.makeSound(); //喵喵喵

上例的内部变量sound,外部无法读取,只有通过 cat 的公有方法makeSound() 来读取。

参考链接

相关文章

  • 面向对象

    this是谁? new到底做了什么? 在 ES5 中如何用函数模拟一个类? 本质为原型链继承human.proto...

  • 在 ES5 中如何用函数模拟一个类?

    ES 5 没有 class 关键字,所以只能使用函数来模拟类。 上面代码就是一个最简单的类,Human 构造函数创...

  • 在 ES5 中如何用函数模拟一个类?

    前言 现如今,单个网页包含10000行Javascript代码,早就司空见惯。编写和维护复杂的Javascript...

  • ES5构造函数与ES6类

    ES5 es5并没有类class,我们只能用构造函数来模拟类. 构造函数 构造函数用new操作符一起使用.new具...

  • 5月31号构造函数、ECMAscript(ES6)

    1,在很多面向对象语言中都有类的概念,但是在javascript(es5)中没有类。而我们可以通过构造函数来模拟一...

  • 构造函数、ECMAscript(ES6)

    1,在很多面向对象语言中都有类的概念,但是在javascript(es5)中没有类。而我们可以通过构造函数来模拟一...

  • 构造函数、ECMAscript(ES6)

    1,在很多面向对象语言中都有类的概念,但是在javascript(es5)中没有类。而我们可以通过构造函数来模拟一...

  • 构造函数,ECMAscript

    1,在很多面向对象语言中都有类的概念,但是在javascript(es5)中没有类。而我们可以通过构造函数来模拟一...

  • 构造函数,ECMAscript

    1,在很多面向对象语言中都有类的概念,但是在javascript(es5)中没有类。而我们可以通过构造函数来模拟一...

  • JS##12 在 ES5 中如何用函数模拟一个类

    ES 5 没有 class 关键字,所以只能使用函数来模拟类。生成实例的时候,使用new关键字。类的属性和方法,还...

网友评论

    本文标题:在 ES5 中如何用函数模拟一个类?

    本文链接:https://www.haomeiwen.com/subject/llkgrctx.html