【JavaScript】ES5/ES6 创建对象与继承

最新推荐文章于 2023-03-01 18:42:25 发布
最新推荐文章于 2023-03-01 18:42:25 发布
阅读量222 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5b3b31586fb9a04fb614c0a9
版权

1. ES5 创建对象的方式

在 JavaScript 中，创建对象的方式有很多种，最常用的一般是通过字面量的方式，而要创建实例对象则一般通过创建一个构造函数，通过 new 关键字来构造。

虽然 Object 函数和字面量都可以创建对象，但同时也会有一个问题：使用一个接口创建多个对象时，会出现大量重复代码。下面来介绍一些创建对象的变体。

1.1 工厂模式

function createPerson(name, age) {
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayName = function () {
        console.log(this.name);
    };
    return obj;
}
var person = createPerson('mike', 18);
复制代码

工厂模式解决了创建多个相似对象的问题，但缺点是无法识别对象原型。

这里打印 person 对象，可以看到有 2 个属性和 1 个方法，原型对象是 Obejct，constructor 属性（指向构造函数的指针）指向 Object 对象。

1.2 构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        console.log(this.name);
    }
}
var person = new Person('mike', 18);
var person2 = new Person('alice', 20);
// 相当于以下操作
var obj = new Object(); 
obj.__proto__ = Person.prototype;
Person.call(obj, 'mike', 18);
复制代码

构造函数模式是比较常见的一种方式，通过大写函数名的第一个字母来用以区分普通函数。

构造函数与工厂模式还有以下的不同：

  • 没有显示创建对象
  • 直接将属性赋值给了 this
  • 没有 return

此时创建 person 实例需要通过 new 关键字，通过 new 关键字调用构造函数的过程其实经历了以下四个步骤：

  1. 创建一个新对象: var obj = new Object();
  2. 将构造函数的原型对象赋值给新的对象 obj: obj.__proto__ = Person.prototype;
  3. 执行构造函数中的代码，给新对象 obj 添加属性和方法: Person.call(obj, 'mike', 18);
  4. 返回 obj 对象

构造函数解决了工厂模式不能识别实例类型的问题，但是也有一个缺点：在这个例子里它会多次创建了相同函数 sayName。

1.3 原型模式

我们创建每一个函数都有一个 prototype（原型）属性，指向一个对象。这个对象的用途是包含所有特定类型（例子是 Person）的所有实例共享的属性（name age）和方法（sayName）。

function Person() { }
Person.prototype = {
    constructor: Person, // 不指定 constructor 会使 constructor 指向断裂，导致对象类型无法正确识别。
    name: 'mike',
    age: 19,
    hobby: ['football', 'singing'],
    sayName: function () {
        console.log(this.name);
    }
}
var person1 = new Person();
var person2 = new Person();
person1.hobby.push('dancing'); // person2.hobby: ['football', 'singing','dancing']
复制代码

constructor 指向未断裂的情况：指向了 Person

constructor 指向断裂的情况：失去了 constructor，默认指向了 Object

原型链示意图：

下图可见通过原型模式解决了构造函数模式多次创建了 sayName 方法的问题，但聪明的电视机前的你肯定发现了定义的原型属性会被所有的实例共享。

当我们操作了 person1 的 hobby 对象的时候，person2 的也同时被修改了，这是我们不愿看到的。

1.4 组合模式

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.hobby = ['football', 'singing']
}

Person.prototype = {
    constructor: Person, // 不指定 constructor 会使 constructor 指向断裂，导致对象类型无法正确识别。
    sayName: function () {
        console.log(this.name);
    }
}
var person1 = new Person('mike', 18);
person1.hobby.push('dancing');
var person2 = new Person('alice', 19);
复制代码

通过以上的几种方式的分析，我们差不多也能得到比较好的一种模式了，那就是组合模式。

在构造函数中添加实例属性，在构造函数的原型链上添加实例方法，这样既解决了实例共享，又解决了多次创建相同函数的问题，是目前使用比较广泛的模式。

2. ES6 创建对象的方式

ES6 里我们可以通过 class 关键字来定义一个类，class 实际上是一个语法糖，虽然绝大部分的功能可以通过 ES5 实现，但是 class 的写法让对象变的更加清晰，更接近面向对象的语法。 通过 class 来改写组合模式：

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.hobby = ['football', 'singing'];
    }
     sayName() {
         console.log(this.name);
    }
}
var person1 = new Person('mike', 18);
person1.hobby.push('dancing');
var person2 = new Person('alice', 19);
复制代码

由此对比可见，和 ES5 的结果只有在 __proto__ 对象里的 constructor 显示的是 class，其余的部分都是一致。 通过 babel 编译成 ES5，我们进行一下对比。

'use strict';

var _createClass = function () {
    // 定义属性的配置项
    function defineProperties(target, props) {
        for (var i = 0; i < props.length; i++) {
            var descriptor = props[i];
            descriptor.enumerable = descriptor.enumerable || false;
            descriptor.configurable = true;
            if ("value" in descriptor) descriptor.writable = true;
            Object.defineProperty(target, descriptor.key, descriptor);
        }
    }
    return function (Constructor, protoProps, staticProps) {
        if (protoProps) {
            defineProperties(Constructor.prototype, protoProps);
        }
        if (staticProps) {
            defineProperties(Constructor, staticProps);
        }
        return Constructor;
    };
}();

// 检查实例是否是后者的实例
function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Person = function () {
    function Person(name, age) {
        _classCallCheck(this, Person);

        this.name = name;
        this.age = age;
        this.hobby = ['football', 'singing'];
    }

    // 挂载 sayName 方法
    _createClass(Person, [{
        key: 'sayName',
        value: function sayName() {
            console.log(this.name);
        }
    }]);

    return Person;
}();

var person1 = new Person('mike', 18);
person1.hobby.push('dancing');
var person2 = new Person('alice', 19);
复制代码

抛开对属性的一些配置上的操作，与 ES5 我们所用的组合模式并无不同。

3. ES5 实现继承

首先我们通过组合模式创建一个 Animal 父类对象

// 定义一个动物类
function Animal(name) {
    // 属性
    this.name = name || 'Animal';
    // 实例方法
    this.sleep = function () {
        return this.name + ' 正在睡觉!';
    }
}
// 原型方法
Animal.prototype.eat = function (food) {
    return this.name + ' 正在吃: ' + food;
};
复制代码

3.1 原型链继承

核心： 将父类的实例作为子类的原型（注意不能使用字面量方式定义原型方法，会重写原型链）

function Cat() {}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//&emsp;Test Code
var cat = new Cat();
console.log(cat.name); // cat
console.log(cat.eat('fish')); // cat 正在吃：fish
console.log(cat.sleep()); // cat 正在睡觉!
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
复制代码

特点：

  1. 非常纯粹的继承关系，实例是子类的实例，也是父类的实例
  2. 父类新增原型方法/原型属性，子类都能访问到
  3. 简单，易于实现

缺点：

  1. 可以在Cat构造函数中，为Cat实例增加实例属性。如果要新增原型属性和方法，则必须放在new Animal()这样的语句之后执行。
  2. 无法实现多继承
  3. 来自原型对象的引用属性是所有实例共享的
  4. 创建子类实例时，无法向父类构造函数传参

推荐指数：★★（3、4两大致命缺陷）

3.2 构造继承

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name); // Tom
console.log(cat.sleep()); // Tom 正在睡觉
// console.log(cat.eat('fish')); // 会报错，原型在这里不可用
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
复制代码

特点：

  1. 解决了原型链继承中，子类实例共享父类引用属性的问题
  2. 创建子类实例时，可以向父类传递参数
  3. 可以实现多继承（call 多个父类对象）

缺点：

  1. 实例并不是父类的实例，只是子类的实例
  2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
  3. 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

推荐指数：★★（缺点3）

3.3 实例继承（原型式继承）

核心：为父类实例添加新特性，作为子类实例返回

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
复制代码

特点：不限制调用方式，不管是new 子类()还是子类(),返回的对象具有相同的效果

缺点：

  1. 实例是父类的实例，不是子类的实例
  2. 不支持多继承

推荐指数：★★

3.4 拷贝继承

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  Cat.prototype.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
复制代码

特点：支持多继承

缺点：

  1. 效率较低，内存占用高（因为要拷贝父类的属性）
  2. 无法获取父类不可枚举的方法（不可枚举方法，不能使用for in 访问到）

推荐指数：★（缺点1）

3.5 组合继承

核心：通过调用父类构造，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true
复制代码

特点：

  1. 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
  2. 既是子类的实例，也是父类的实例
  3. 不存在引用属性共享问题
  4. 可传参
  5. 函数可复用

缺点： 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

推荐指数：★★★★（仅仅多消耗了一点内存）

3.6 寄生组合继承

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// 等价于下面这种情况
// function inheritPrototype(sub, sup) {
//    var Fn= function() {}
//    Fn.prototype = sup.prototype;
//    sub.prototype = new Fn();
// }

// inheritPrototype(Cat, Animal);

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
复制代码

特点：堪称完美

缺点：实现较为复杂

推荐指数：★★★★

4. ES6 实现继承

首先还是创建一个 Animal 类

class Animal {
    constructor(name) {
        this.name = name || 'Animal';
        this.sleep = function () {
            return this.name + ' 正在睡觉!';
        }
    }
    eat(food) {
        return this.name + ' 正在吃: ' + food;
    };
}
复制代码

然后通过 extends 关键字来继承 Animal

class Cat extends Animal {
    constructor(name, age) {
        super(name);
        this.age = age; // 新增的子类属性
    }
    eat(food) {
        const result = super.eat(food); // 通过 super 调用父类方法
        return this.age + ' 岁的 ' + result;
    }
}
const cat = new Cat('miao', 3);
复制代码

5. 总结

总的来说，ES6 的 class 语法糖更清晰和优雅地实现了创建对象和对象继承。 但是我们要想更好的理解 class，那么关于 ES5 的对象、对象继承以及原型链等知识也是要掌握的很牢固。

weixin_34121282
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ES5对象的的创建及属性状态维护分析
Simon_ITer的博客
09-07 916
在说属性之前，我们先来了解一下ES5的新方法,Object.create()函数。新的对象创建方法在旧的“原型继承”观念中，它的本质上是“复制原型”，即：以原型为模板复制一个新的对象。然而我们应该注意到一点事实：在这个思路上，“构造器函数”本身是无意义的。更确切的说，构造器函数对实例的修饰作用可有可无，例如：//在构造器中修饰对象实例 function MyObject(){ this.yy
ES5 与 ES6 创建对象的写法
Winnie438372的博客
04-12 399
JS 创建对象 ES5 和 ES6 的不同
ES5与ES6之创建对象
youlinhuanyan的博客
11-25 300
ES5及ES6写对象的对比 经常会遇到需要在js 写 ES6 写对象，写了个实例供大家参考 ES5创建对象 // 类的基本写法 function Person(name, sex) { var self = this; this._name = name; // 外部可见的成员变量 this._sex = sex; var no = Person.population; // 静态变量的...
es5创建对象和es6的Class
zhm0303的博客
04-16 1722
es5创建对象的方式  有工厂模式，构造函数模式，原型模式和  组合使用构造函数模式+原型模式最常使用的模式是 组合使用 构造函数模式+原型模式，这样的好处是，每个实例可以保持独特的实例属性，也可以共有原型方法function Person(name,age){ this.name=name; this.age=age; } Person.prototype.sayName=functi...
原型链和ES6和ES5创建对象并实现继承
MISS_zhang_0110的博客
06-28 119
当实例化调用属性和方法的时候，会在实例化本身找，如果没有就沿着__proto__属性找到原型对象的__proto__属性，找原型对象上的属性和方法（如果找到就用），如果没有就一直往上走，直到找到Object 原型对象的__proto__属性为null为止，这一系列由__proto__属性串连起来的原型对象为原型链。构造函数初始化的时候，会创造一个特殊的实例化对象，该对象为原型对象，构造函数的prototype属性指向原型对象。②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象。
继承行为在 ES5 与 ES6 中的区别详解
11-29
1. ES5使用构造函数和`prototype`对象模拟类和继承，而ES6引入了`class`和`extends`关键字，提供了更接近传统面向对象语言的语法。 2. ES5中子类必须通过`call`或`apply`调用父类构造函数，而在ES6中，通过`super`...
ES5与ES6继承.pdf
最新发布
02-26
ES5与ES6继承.pdf
React中ES5与ES6写法的区别总结
12-10
在React开发中，ES5和ES6（ES2015）是两种常见的JavaScript语法，它们在编写组件和处理模块时有所不同。这篇文章将对比这两种语法在React中的应用，帮助初学者更好地理解和转换代码。 首先，让我们看看模块引用的...
es6：ES5与ES6参考
02-05
下面我们将深入探讨一些核心的ES6特性及其与ES5的比较。** ### 1. 声明变量：`let` 和 `const` 在ES5中，我们主要使用`var`来声明变量，但存在作用域和提升等问题。ES6引入了`let`和`const`，它们都是块级作用域，...
javascript-practice-es6:练习ES5至ES6代码
05-12
ES6引入了类的概念，虽然本质上仍然是基于原型的继承，但语法更加面向对象，如 `class Person { constructor(name) { this.name = name; } }`。类还可以使用`extends`关键字实现继承。 6. **模块化**： `import`...
ES6 创建对象与对象继承
m0_62012366的博客
10-18 356
ES6 提供了更接近传统语言的写法~ 为直观感受下直接上栗子吧 ES6之前的写法： function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2); ES6写法： class Point { constructor(x,
es5和es6定义对象比较
weixin_40073115的博客
01-14 676
js中定义对象有多种方法再加上es6的新方法，难免使用时让人摸不着头脑，本篇博文对经典的集中对象定义方法做一次总结，最主要是和es6进行比较加强理解。 es5定义对象：Object构造函数、对象字面量、工厂模式、构造函数模式、原型模式、组合模式。 es6：class定义类。 es5定义对象 对象字面量 使用对象字面量创建对象的写法简单直观，所以定义一个对象的最简单方式就是对象字面量，它是通过在一个...
es5创建对象与继承
weixin_30381317的博客
05-31 66
创建对象7种方法 继承的六种方式 转载于:https://www.cnblogs.com/94pm/p/9114876.html
ES5的对象创建以及对象继承
sanlingwu的博客
02-27 492
一、对象的创建 1、工厂模式 function createPerson(){        //内部先声明一个新对象，然后定义对象的属性和方法，最后return这个对象 } var person=createPerson(); 2、构造函数模式 function Person(name){//函数名一定大写！！！        this.name=name;        th...
ES5创建对象 — 《JavaScript高级程序设计》
sinat_18194249的博客
03-01 159
构造函数的问题就是每个方法都要在实例上创建一遍，所以需要把方法提出来，在构造函数中引用方法名。所以就有了原型模式。每一个函数都有一个prototype（原型）属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。所以就有了 组合使用构造函数模式和原型模式。工厂模式解决了创建多个相似对象的问题，但是没有解决对象识别的问题（一个对象的类型），所以出现了构造函数模式。构造函数用于定义实例属性，原型模式用于定义方法和共享的属性。6、组合使用构造函数模式和原型模式。
JavaScript创建对象—从es5到es6
Dolanf的博客
07-30 489
本文主要讲述了使用JavaScript创建对象的几种方式，它们的优缺点，原型链的原理，以及比较几种继承方式的实现，最后从babel的角度探究从es5到es6的类的实现。
ES6 中Class创建对象与继承实现
weixin_34273481的博客
03-01 418
1 Class in ES6 ES6提出了类(Class)的概念，让对象的原型的写法更像面向对象语言写法。 ES6中通过class定义对象，默认具有constructor方法和自定义方法，但是包含在class中的方法不可枚举。 class Point{ constructor(){ ...
ES5对象学习—单个对象的创建
qq_57443373的博客
09-01 308
JavaScript中的对象 作为一名优秀的程序猿，不会还有人没有对象吧。 既然如此，下面我们就来学习一下如何让自己拥有一个对象。     首先来了解一下对象，在JavaScript中，对象(Object)是一个很重要的概念，对象是JS最重要的数据类型。 那么什么是对象呢?     对象不是你的boyfriend或girlfriend。在JavaScript中，对象是一组"键值对"的集合,是一组无序的数据集合。 创建对象的方式
ES5对象学习-多个对象的创建
qq_57443373的博客
09-06 395
文章目录一、工厂模式二、构造函数模式三、原型模式四、组合模式 一、工厂模式 在之前我们所了解的创建对象的方法，无非就是字面量方式或者构造函数创建对象。 当我们使用字面量方式来创建对象时， 我们来思考一下，假如我们要创建一个学生类型的对象，属性有姓名、年龄、性别这三个简单的属性。 var student1={ ​ name:'xiaoming', ​ age:20, ​ gender:'male' } 可以看到，创建一个学生，我们只需要5行代码就能创建一个对象了。但是如果我们要同时创建一个班级的学
ES5 和 ES6区别
03-29
4. 类和继承：ES6 引入了 class 和 extends 关键字，使得 JavaScript 可以像传统面向对象语言一样使用类和继承。 5. 解构赋值：ES6 引入了解构赋值，可以方便地从对象或数组中取出值赋给变量。 6. Promise：ES6 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值