【JavaScript】ES5和ES6面向对象

最新推荐文章于 2022-05-03 21:38:26 发布
原创 最新推荐文章于 2022-05-03 21:38:26 发布 · 368 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了JavaScript中类和继承的实现方式，对比了ES5和ES6的语法，解析了封装、继承、多态的核心概念，以及ES6类语法糖的实质。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

面向对象.png

 

前言（Preface）

 

Object Oriented 的一个标志就是 Class （类），通过类可以创建任意多个具有相同属性和方法的对象。然而，JavaScript中只有对象，没有类。 ECMA-262 把对象定义成：无序的属性集合。由于许多开发者都喜欢并习惯于面向类的软件设计，所以JavaScript中充斥着各种模拟类的实现，以致 ES6 专门新增了 class 语法使类的概念在JavaScript中落地。本文主要整理了在ES5和ES6中模拟类的不同实现方式，分析二者之间的联系，同时也指出了新的class语法的一些不完美之处。

 

 

内容（Contents）

  一、ES5中是如何模拟“类”的

 

类是一种设计模式。许多语言提供了面向类软件设计的原生语法。JavaScript 也有类似的语法，但是和其他语言中的类完全不同。多年以来，JavaScript 中有一种奇怪的行为一直在被无耻地滥用，那就是模仿类。【1】

 

面向类的设计模式的三大核心：封装、继承、多态。下面简介它们在ES5中的实现（参考【2】）。

 

封装

JavaScript可以直接使用字面量创建对象，但是这样达不到“封装”的目的。

1. 工厂模式

function createPerson(name, age) {
    let obj = {};
  obj.name = name;
  obj.age = age;
  obj.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
  return obj;
}

let john = createPerson("john", 26);
let lily = createPerson("lily", 12);

【问题】：没有解决 对象识别 问题（无法确认 john 和 lily 都是 Person ）

 

2. 构造函数模式

ECMAScript中的 构造函数可用来创建特定类型的对象 。

 

function Person(name, age) {
    this.name = name;
  this.age = age;
  this.greet = function() {
    console.log("Hello, my name is " + this.name);
  };
}

let maYun = new Person("maYun", 50);
let me = new Person("zhuPengji", 26);

me.constructor === Person; // true
me.constructor === maYun.constructor; // true
me instanceof Object; // true
me instanceof Person; // true

me.greet === maYun.greet; // false

【问题】：每个方法都在每个实例上重新创建一遍， 方法复用 问题（ me 和 maYun 的 greet 方法是两个不同的 Function 实例）

 

3. 原型模式

使用函数的原型对象的好处是，可以让所有对象实例共享原型对象所包含的属性和方法。也就是说，原型对象适合 共享公有方法和属性 。所有原生的引用类型都是采用这种模式创建的。

 

function Person() {};

Person.prototype.name = "maYun";
Person.prototype.greet = function() {
    console.log("Hello, my name is " + this.name);
};

let maYun = new Person();
maYun.greet();

原型的动态性 : 在原型中查找值的过程是一次搜索，所以原型的更改会动态影响所有实例

function Person() {};
let me = new Person();

me.greet(); // TypeError

Person.prototype.greet = function() { return "Hello"; };
me.greet(); // "Hello"

// 切断了引用，会影响新生成的实例，无法影响已生成的实例
Person.prototype = {
    bye: function() { return "bye"; }
}
me.bye(); // TypeError

【问题】：原型模式最大的优点在于共享，最大的问题也在于啥都共享

 

4. 组合构造函数和原型模式

构造函数模式用于定义实例属性，而原型模式定义方法和共享属性。这是目前使用最广泛，认可度最高的创建自定义类型的方法。

function Person(name, age) {
    this.name = name;
  this.age = age;
}

Person.prototype.greet = function() {
    console.log("Hello, my name is " + this.name);
};

let me = new Person("zpj", 26);

 

继承

1. 原型链式继承

使用原型链继承核心在于，让子类的原型对象指向父类的实例。

function SuperType(property) {
    this.property = property;
}
SuperType.prototype.method = function() { return this.property; };

function SubType() {}
SubType.prototype = new SuperType(["Hello"]);

let sub = new SubType();
let sub2 = new SubType();

sub.property.push("World");
sub2.property; // ["Hello", "World"]

【问题】：过度依赖父类的属性共享（副作用：父类实例的属性成为了子类的原型属性）

 

2. 借用构造函数式继承

借用构造函数（ constructor stealing ）也被称为经典继承。具体操作方法是：在子类构造函数内部调用父类构造函数，同时改变this指向。

function SuperType(property) {
    this.property = property;
  /* 注意到我们把方法写到了构造函数内部，这是这种模式被称为“经典继承”的原因 */
  this.method = function() {
    return this.property;
  };
}

function SubType(property) {
    SuperType.call(this, property); /* 每个子类实例都会有自己的独立副本（包括属性和方法） */
}

let sub = new SubType("Hello");
let sub2 = new SubType("World");
sub.method(); // "Hello"
sub2.method(); // "World"

【问题】：方法没有共享，函数复用无从谈起

 

3. 组合原型链和构造函数式继承

组合继承（ combination inheritance ）也被称作伪经典继承，其实现思路是使用原型链来继承原型属性和方法，而通过构造函数继承实例属性。

function SuperType(property) {
    this.property = property;
}
SuperType.prototype.method = function() { return this.property; };

function SubType(property, subProp) {
    SuperType.call(this, property);
  this.subProp = subProp;
}
SubType.prototype = new SuperType("Hello");

let sub = new SubType("World");
sub.method(); // "World"

【问题】：1. 调用了两次父类函数；2. 多余的父类实例属性留在原型上，永远被子类同名属性屏蔽

 

4. 寄生组合式继承

寄生（ parasitic ）组合式继承本质上，是让子类的原型对象指向父类的原型对象的副本，而非父类实例。

function SuperType(property) {
  this.property = property;
}
SuperType.prototype.method = function() { return this.property; };

function SubType(property) {
  SuperType.call(this, property);
}
SubType.prototype = Object.create(SuperType.prototype); /* 寄生：父类原型的副本 */
SubType.prototype.constructor = SubType; /* 修正constructor指向 */

let sub = new SubType("World");
sub instanceof SubType; // true
sub.constructor === SubType; // true

开发人员普遍认为寄生组合式继承模式是引用类型最理想的继承范式。

多态

1. 重写

子类原型上的方法，来自于父类原型对象的副本，可以直接重写，并不会影响父类。

function SuperType() {}
SuperType.prototype.method = function() { return "Hello"; };

function SubType() {
    SuperType.call(this);
}
SubType.prototype = Object.create(SuperType.prototype);
SubType.prototype.constructor = SubType;
/* 重写 */
SubType.prototype.method = function() { return "World"; };

let sup = new SuperType();
sup.method(); // "Hello"
let sub = new SubType();
sub.method(); // "World"

 

  二、ES6的class语法

 

ES5的实现具有明显的缺点：繁琐杂乱的 .prototype 引用、试图调用原型链上层同名函数时的 显式伪多态 以及不可靠、不美观而且容易被误解成“构造函数”的 .constructor 。【1】

ES6的 class 语法可以看做是一个语法糖，他的绝大部分功能，ES5都可以做到，新的class语法只是让对象原型的写法更加清晰、更像是面向对象编程的语法而已。【3】

 

下面的两种写法效果是一样的。

// ES5
function Point(x, y) {
    this.x = x;
  this.y = y;
}
Point.prototype.distance = function() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
}

// ES6
class Point {
    constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  distance() {
      return Math.sqrt(this.x * this.x + this.y * this.y);
  }
}

class还是function

 

对于真正的类来说，构造函数是属于类的，但是在JavaScript中，类是属于构造函数的。【1】

 

一般语言都是new class， ES5在new function，虽然ES6带来了class，可以new class了， class 语法也提供了constructor来完成曾经的function的功能，但是谨记，这一切都只是语法糖而已。

 

class Point {
  // ...
}
typeof Point; // function
Point === Point.prototype.constructor; // true

 

构造函数constructor

 

ES6的[class]，其实就是ES5的[function.prototype.constructor]，但是这造成了[class.prototype]这样不伦不类的存在。

  • 构造方法constructor和所有普通方法一样，都是[class.prototype]中的一员
  • 一个类必须有constructor方法，不显式添加，也会自动添加空的 constructor 方法
  • constructor必须使用 new 调用，默认返回实例对象，即this

 

实际上JavaScript中没有“构造函数”，只是函数有两种调用方式：“普通函数调用”和“构造函数调用”

  • 你无法区分一个函数是普通函数还是构造函数
  • 当你通过new调用函数时，叫做“构造函数调用”

 

构造函数与其他函数的唯一区别，就在于调用它们的方式不同。不过，构造函数毕竟也是函数，不存在定义构造函数的特殊语法。任何函数只要通过new操作符来调用，那它就可以作为构造函数；而任何函数，如果不通过new操作符来调用，那它跟普通函数也不会有什么两样。【2】

 

实例

 

和ES5一样，类的所有实例共享一个原型对象。我们可以通过 __proto__ 或者 Object.getPrototypeOf() 来获取实例对象的原型对象 [class.prototype] ，这就意味着可以通过实例为“类”添加方法！又一次不伦不类？

let p1 = new Point(1, 2);
let p2 = new Point(3, 4);

p1.__proto__ === p2.__proto__; // true
Object.getPrototypeOf(p1) === Object.getPrototypeOf(p2); // true

Object.getPrototypeOf(p1).printName = function() {
    return "Astonished";
}

p2.printName(); // "Astonished"

getter和setter

 

在“类”的内部可以使用 get 和 set 关键字，对某个属性设置存值函数和取值函数。 class 语法比起ES5更加简洁，易读。

// ES5
function Person(name) {
    this.name = name;
}
Object.defineProperty(Person.prototype, "lowerName", {
    get: function() {
    return this.name.toLowerCase();
  }
});

// ES6
class Person {
  constructor(name) {
    this.name = name;
  }
  get lowerName() {
    return this.name.toLowerCase();
  }
}

class表达式

 

class 表达式是一个很有“JavaScript特色”的名字。但是明白 class 、 constructor 、 function 之间的关系，就能够理解这种“特色”了，这个名字来自于函数表达式。

const MyClass = class Me {
    getClassName() {
    return Me.name;
  }
}

let m = new MyClass();
m.getClassName(); // "Me"
let n = new Me(); // Me is not defined

立即执行的匿名 class 

let person = new class {
    constructor(name) {
    this.name = name;
  }
  greet() {
    return "Hello " + this.name;
  }
}("trump");

person.greet();

静态方法

 

加上 static 关键字的方法成为类的静态方法。

// ES5
function Person(){
  this.name = "zpj";
}
Person.prototype.greet = function() { return "Hello " + this.name; };
Person.bye = function() { return "GoodBye"; };

// ES6
class Person {
  name = "zpj"
  static bye() { return "GoodBye"; }
  greet() { return "Hello " + this.name; }
}

 

继承

1. super

super 有两种用法，一种是当函数，一种是当对象。

作为函数，只能用在子类的构造函数内，其作用相当于 SuperType.prototype.constructor.call(this) 。

class SuperType {}
class SubType extends SuperType {
    constructor() {
    super();
  }
}

作为对象，在普通方法内指向父类原型对象，相当于在执行 SuperType.prototype.method.call(this) ，在静态方法中指向父类，相当于在执行 SuperType.method.call(this) 。

class SuperType {
  hello() {
    return "Hello World";
  }
  static world() {
    return "World";
  }
}

class SubType extends SuperType {
  hello() {
    return "SubType " + super.hello();
  }
  static world() {
    return "SubType " + super.world();
  }
}

另外， super 作为父类在子类中的代言人，在内建对象类型中也可以使用。

var obj = {
    toString() {
    return "MyObject " + super.toString();
  }
}

obj.toString(); // "MyObject [object Object]"

2. 继承关系

Object.getPrototypeOf()  可以获取当前类的父类。 getPrototypeOf  这个名字在“语义”上依然不够“面向类”，配不上 class  语法，有点不伦不类。但是 instanceof 现在更符合其本意了，检测对象是否是某个类的实例。

class A {}
class B extends A {}
class C extends B {}

Object.getPrototypeOf(B) === A; // true
Object.getPrototypeOf(C) === A; // false

let b = new B();
b instanceof B; // true
b instanceof A; // true

 

3. ES5实现一个继承自Widget的Button类

function Widget(width, height) {
  this.width = width || 100;
  this.height = height || 30;
  this.$elem = null;
}
// 繁琐杂乱的.prototype引用
Widget.prototype.render = function (container) {
  if (this.$elem) {
    this.$elem.style.width = this.width + "px";
    this.$elem.style.height = this.height + "px";
    container.appendChild(this.$elem);
  }
}

function Button(label, width, height) {
  Widget.call(this, width, height);
  this.label = label;
  this.$elem = document.createElement("button");
}

Button.prototype = Object.create(Widget.prototype);
// 不可靠的constructor
Button.prototype.constructor = Button;

Button.prototype.render = function (container) {
  this.$elem.innerText = this.label;
  // 试图调用原型链上层同名函数的显式伪多态
  Widget.prototype.render.call(this, container);
}

let btn = new Button("按钮");
btn.render(document.body);

4. ES6实现一个继承自Widget的Button类

class Widget {
  constructor(width, height) {
    this.width = width || 100;
    this.height = height || 30;
    this.$elem = null;
  }
  render(container) {
    if (this.$elem) {
      this.$elem.style.width = this.width + "px";
      this.$elem.style.height = this.height + "px";
      container.appendChild(this.$elem);
    }
  }
}

class Button extends Widget {
  constructor(label, width, height) {
    super(width, height);
    this.label = label;
    this.$elem = document.createElement("button");
  }
  render(container) {
    this.$elem.innerText = this.label;
    super.render(container);
  }
}

let btn = new Button("按钮");
btn.render(document.body);

 

参考（References）

ES5 与 ES6 创建对象的写法
Winnie438372的博客
04-12 458
JS 创建对象 ES5 和 ES6 的不同
继承行为在 ES5 与 ES6 中的区别详解
11-29
JavaScript中的继承是面向对象编程的重要概念，用于复用和扩展已有类的功能。在ES5和ES6中，继承实现的...理解这些差异有助于开发者更好地利用ES6的特性进行面向对象编程，同时也能更好地理解和转换从ES5到ES6的代码。
重新认识JavaScript面向对象: 从ES5到ES6
林夏天的博客
03-17 229
重新认识JavaScript面向对象: 从ES5到ES6 一. 重新认识面向对象 1. JavaScript是一门面向对象的语言 在说明JavaScript是一个面向对象的语言之前, 我们来探讨一下面向对象的三大基本特征: 封装, 继承, 多态。 封装 把抽象出来的属性和对方法组合在一起, 且属性值被保护在内部, 只有通过特定的方法进行改变和读取称为封装 我们以代码举例, 首先我们构造一个P...
es5 的面向对象和 es6 的面向对象以及类（class）
weixin_60408555的博客
05-03 1497
es5 的面向对象和 es6 的面向对象 es5 的面向对象是通过 new 一个构造函数实现的 es6 的面向对象是通过 class 实现的 es6 的 class 就是面向对象的语法糖(实现同样的功能 但是代码更少 更加简洁) 面向对象是一个概念或者编程思想,面向对象是相对于面向过程来讲的,面向对象方法,把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统建模,更贴近事物的自然运行模式 (在 js 中一切皆对象 比如说数组 object number string 等等 这些都是内置对象 那么怎
javaScript - 面向对象 - ES5 和 ES6
anzhehan1535的博客
01-08 176
javaScript - 面向对象 - ES5 和 ES6 ES5之前用 构造函数 　　构造函数的特点 就是一个普通函数, 他的函数名要大写.: 　　 　　带方法的写法: 　　 　　原型的方式: 　　prototype 为内置的原型方法 　　this参数问题: ES6 里的写法: 　Promise对象 $...
ES5与ES6之创建对象
youlinhuanyan的博客
11-25 354
ES5及ES6写对象的对比 经常会遇到需要在js 写 ES6 写对象，写了个实例供大家参考 ES5创建对象 // 类的基本写法 function Person(name, sex) { var self = this; this._name = name; // 外部可见的成员变量 this._sex = sex; var no = Person.population; // 静态变量的...
ES5与ES6面向对象编程迷你项目实践
ES5（ECMAScript 5）和ES6（ECMAScript 2015，又称为ECMAScript 6）是JavaScript语言的两个不同版本，它们在面向对象编程方面提供了不同的语法和特性。 在ES5中，创建对象的常见方式包括使用构造函数和原型链。构造...
javascript-practice-es6:练习ES5至ES6代码
05-12
ES6引入了类的概念，虽然本质上仍然是基于原型的继承，但语法更加面向对象，如 `class Person { constructor(name) { this.name = name; } }`。类还可以使用`extends`关键字实现继承。 6. **模块化**： `import`...
js笔记整理BOM和DOM，es5和es6
05-09
此外，ES6还引入了类（class）和模块（import/export）等面向对象和模块化编程的特性。 在实际开发中，了解并熟练掌握BOM和DOM的交互，以及ES5和ES6的关键特性，对于编写高效、可维护的JavaScript代码至关重要。...
JavaScript设计模式之原型模式分析【ES5与ES6】
10-18
总之，原型模式是JavaScript中一种强大且灵活的对象创建方式，它让JavaScript的继承机制区别于传统的面向对象语言，为开发者提供了不同的编程思路和解决方案。通过理解和掌握原型模式，我们可以更加高效地利用...
有人可以使用HTML5，CSS3和JavaScript ES6从头为我编写24小时模拟时钟吗？
04-03
它不是那样的工作。我们不为您完成工作。如果您要有人编写代码，则必须付费-我建议您去Freelancer.com并在那里询问。但是请注意：您得到了您所支付的。 付钱买花生，买猴子。“发展”这个词就是...
JS基于面向对象实现的多个倒计时器功能示例
10-20
主要介绍了JS基于面向对象实现的多个倒计时器功能,结合实例形式分析了javascript面向对象及时间操作相关技巧,需要的朋友可以参考下
面向对象js开发钟表
09-03
面向对象js开发钟表，这相当于一个插件，可以进行自己的设计，传入相应的参数，就可以设置属于自己的钟表，前提是引入js文件
概述ES5和ES6中面向对象的实现方法
qq_32614411的博客
07-04 1015
大部分前端开发是做一些交互处理， 基本是面向过程的， 一溜烟的写下去， 但是在游戏开发和插件编写的时候是需要运用面向对象的思想实现的。接下来，就简单介绍一下ES5和ES6中面向对象的实现方法。 写在前面——声明函数function的方式、‘use strict’ 声明函数function时有两种方式： 方式一：函数声明 function fn2 {} 函数声明 是Google不推荐的写...
原生js 时钟
Lee的博客
03-08 6085
话不多说，直接上代码。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0; list-style: none;} .clo
webjs--两种时钟
dongmelon的博客
06-07 1325
1： canvas clock div{text-align:center;margin-top:250px;} 您的浏览器不支持canvas window.onload=function(){ var c=d
es6实现时分秒
weixin_30542079的博客
11-01 450
获取时分秒的demo呢 有很多 在这里我就简单分享一下我的一个方法 一下代码打印出来的效果格式为 20:28:51 setInterval(()=>{ constnow =newDate() const hours = now.getHours().toString() const minu...
js+纯css实现时钟动画案例（指针会动的那种）
w_xiaolin的博客
02-15 2461
今天我们来讲讲指针会动的那种时钟，废话不多说先看效果图吧。 一、html代码 先做好准备代码（我们不用用到背景图片） <!DOCTYPE html> <html lang="zh-CN"> <head> <title>时钟案例</title> <meta charset="UTF-8"&gt...
es6实现倒计时
weixin_41111987的博客
10-25 2596
1、思路如下 当前时间获取    let now=new Date().getTime(); 截止日期  let date = new Date('2020'); //设置截止日期 let end = date.getTime(); //这个日期要转换成时间戳 倒计时的日期 let last_time=end-now; 判断now和end大小，如果now ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值