javaScript中的类和继承

最新推荐文章于 2023-10-20 00:58:28 发布
最新推荐文章于 2023-10-20 00:58:28 发布
阅读量136 收藏
点赞数 1
文章标签： javascript html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lnmgmgggggdd/article/details/120558637
版权

ES5之前的继承

既然要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

             

1、原型链继承

核心： 将父类的实例作为子类的原型

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

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

特点：

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

缺点：

  1. 要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中
  2. 无法实现多继承
  3. 来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的）（详细请看附录代码： 示例1）
  4. 创建子类实例时，无法向父类构造函数传参

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

2、构造继承

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

function Cat(name){
  Animal.call(this);
  this.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. 解决了1中，子类实例共享父类引用属性的问题
  2. 创建子类实例时，可以向父类传递参数
  3. 可以实现多继承（call多个父类对象）

缺点：

  1. 实例并不是父类的实例，只是子类的实例
  2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
  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

特点：

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

缺点：

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

推荐指数：★★

4、拷贝继承 

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  //如下实现修改了原型对象，会导致单个实例修改name，会影响所有实例的name值
  // Cat.prototype.name = name || 'Tom'; 错误的语句，下一句为正确的实现
  this.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. 支持多继承

缺点：

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

推荐指数：★（缺点1）

5、组合继承

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

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

// 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. 函数可复用

缺点：

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

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

6、寄生组合继承

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

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

// 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

Cat.prototype.constructor = Cat; // 需要修复下构造函数

特点：

  1. 堪称完美

缺点：

  1. 实现较为复杂

推荐指数：★★★★（实现复杂，扣掉一颗星）

附录代码：

示例一：

function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
  //实例引用属性
  this.features = [];
}
function Cat(name){
}
Cat.prototype = new Animal();

var tom = new Cat('Tom');
var kissy = new Cat('Kissy');

console.log(tom.name); // "Animal"
console.log(kissy.name); // "Animal"
console.log(tom.features); // []
console.log(kissy.features); // []

tom.name = 'Tom-New Name';
tom.features.push('eat');

//针对父类实例值类型成员的更改，不影响
console.log(tom.name); // "Tom-New Name"
console.log(kissy.name); // "Animal"
//针对父类实例引用类型成员的更改，会通过影响其他子类实例
console.log(tom.features); // ['eat']
console.log(kissy.features); // ['eat']

原因分析：

关键点：属性查找过程

执行tom.features.push，首先找tom对象的实例属性（找不到），
那么去原型对象中找，也就是Animal的实例。发现有，那么就直接在这个对象的
features属性中插入值。
在console.log(kissy.features); 的时候。同上，kissy实例上没有，那么去原型上找。
刚好原型上有，就直接返回，但是注意，这个原型对象中features属性值已经变化了。

 ES6中的Class类和继承

EcmaScript 2015 （又称ES6）通过一些新的关键字，使类成为了JS中一个新的一等公民。但是目前为止，这些关于类的新关键字仅仅是建立在旧的原型系统上的语法糖，所以它们并没有带来任何的新特性。不过，它使代码的可读性变得更高，并且为今后版本里更多面向对象的新特性打下了基础。

class 作为 ES6 中的重大升级之一的优势在哪里：

  1. class 写法更加简洁、含义更加明确、代码结构更加清晰。
  2. class 尽管也是函数，却无法直接调用（不存在防御性代码了）。
  3. class 不存在变量提升。
  4. class 为污染 window 等全局变量（这点很赞啊）。
  5. class 函数体中的代码始终以严格模式执行（新手写的代码可靠性也必须上来了）
class Parent {
  constructor (name, age) {
    this.name = name
    this.age = age
  }
  
  getUserInfo() {
    console.log(this.name, this.age)
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name, age)
    this.hobby = ['running', 'reading']
  }
}

const child = new Child('fuhangyy', 27)
child.getUserInfo()
// fuhangyy   27
console.log(child.hobby)
// ['running', 'reading']
console.log(child instanceof Child)
// true
console.log(child instanceof Parent)
// true

我们可以看到在子类的constructor方法调用了一个super方法，它在这里主要表示父类的构造函数，用来新建父类的this对象。

并且在子类的constructor方法中必须调用super方法，否则在新建子类的实例时是会报错的。因为子类中其实是没有this对象的，而是需要继承父类的this对象，然后对其加工，所以如果不调用super方法，也就得不得父类的this对象，子类也就没法对其进行加工，从而得不到自己的this对象了。

还可以看出来实例对象child同时是Child和Parent来个类的实例，这与ES5的继承行为是一致的。

class Parent {}

class Child extends Parent {
  constructor() {}
}

const child = new Child()

上面的示例代码中，用于在子类Child中没有调用super方法，导致在创建child示例时报错。

ES5中的继承的本质其实是先创建子类的实例对象this，然后再将父类的方法添加到this上面去(Parent.call(this))。但是Class的继承机制完全不同，它是先创建父类的实例对象的this(调用super方法)，然后再用子类的构造函数修改this。

我们都知道在使用Class定义类的时候，如果没有添加constructor方法时，都会默认添加的，在继承时也不例外：

class Child extends Parent {}

// 等价于
// 上面的例子中调用了consturctor方法，但是没有调用super方法，会报错的
class Child extends Parent {
  constructor (...arguments) {
    super(...arguments)
  }
}

还有一点需要注意的是，在子类中只有调用了super方法，才可以使用this对象，原因上面已经说过了。

class Child extends Parent {
  constructor(name, age) {
    this.hobby = ['running', 'reading']   // 这里使用this时是会报错
    super(name, age)
    this.hobby = ['running', 'reading']
  }
}

这里补充一个小知识，我们可以通过Object.getPrototypeOf()方法从子类上获取到父类。

Object.getPrototypeOf(Child) === Parent
// true

下面来一起看看super关键字，它既可以当函数来调用，也可以当做对象来使用，这两种情况下，他们的用法是完全不同的。

当super被当做函数来调用时，它代表的父类的构造函数，用来新建父类的this对象，提供给子类使用。所以在子类的constructor方法中必须要调用一次super方法，而且是只能在子类的constructor方法中调用，在其他地方调用就会导致报错。

super虽然代表了父类Parent的构造函数，但是返回的是子类Child的实例，即super内部的this指向的是子类Child，因此super()在这里相当于Parent.prototype.constructor.call(this)。

当super作为对象在普通方法中使用时指向父类的原型对象，在静态方法中使用时指向父类。

class Parent {
  constructor (name) {
    this.name = name
  }
  
  getName () {
    console.log(this.name)
  }
}

class Child extends Parent {
  constructor (name) {
    super(name)
    super.getName()
    // fuhangyy
    console.log(super.name)
    // undefined
  }
}

const child = new Child('fuhangyy')

由于class类的其他方法默认是添加在类的原型上面的，所以在调用super.getName()时，调用的父类原型对象上面的方法，所以可以打印出数据，但是name属性是定义在父类的实例中的，所以值为undefined。

接下来，我们看看下面这个例子：

class Parent {
  constructor () {
    this.name = 'fuhangyy'
  }
  
  getName () {
    console.log(this.name)
  }
}

class Child extends Parent {
  constructor () {
    super()
    this.name = 'RubyOnly'
  }
  
  getUserInfo () {
    super.getName()
  }
}

const child = new Child()
child.getUserInfo()
// RubyOnly
child.getName()
// RubyOnly

调用child.getName()，打印出RubyOnly很好理解，child继承了Parent中的getName方法，但是我们调用child.getUserInfo()打印出来的也是RubyOnly，super.getName()虽然调用的是Parent.prototype.getName()，但其实 Parent.prototype.getName()会绑定Child的this，所以最后打印出来的是RubyOnly，因此我们可以总结出，通过super调用父类方法时，会绑定子类的this。

既然通不过super调用父类的方法是会将this绑定到子类上，那么通过super修改父类的某个属性时，被修改的属性就变成了子类的实例属性了。

class Parent {
  constructor () {
    this.name = 'fuhangyy'
  }
}

class Child extends Parent {
  constructor () {
    super()
    super.name = 'RubyOnly'
    console.log(super.name)
    // undefined 在普通函数中super调用的是父类原型对象上面的属性和方法
    console.log(this.name)
    // RubyOnly
  }
}

const child = new Child()

但是如果super在静态方法中调用，此时super指向的是父类。

class Parent {
  static getName (name) {
    console.log(`static ${ name }`)
  }
  
  getName(name) {
    console.log(`prototype ${ name }`)
  }
}

class Child extends Parent {
  static getName (name) {
    super.getName(name)
  }
  
  getName (name) {
    super.getName(name)
  }
}

Child.getName('fuhangyy')
// static fuhangyy
const child = new Child()
child.getName('fuhangyy')
// prototype fuhangyy

我们可以看出来，super在静态方法中指向了父类，在普通函数中指向了父类的原型。

limengbo9981
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript---类及类的继承
郭静静--廊坊师范学院信息技术提高班十六期
09-27 264
系列文章目录 文章目录 ​​​​​​​ 目录 系列文章目录 文章目录 前言 一、类的创建及属性和方法设置 二、类的继承 1.子类继承父类---extends 2.继承时子类含有constructor---super 总结 前言 所谓类: 就是es6中对构造函数进行封装后的一种写法, 其本质其实也就是一个构造函数, 而其作用就是用来创建对象, 类通常是通过class来创建的; 提示：以下是本篇文章正文内容，下面案例可供参考 一、类的创建及属性和方法设置 创建类--.
js的类和继承
wjs0406的博客
05-10 171
每个对象都是属性的集合，但是他们都是独立的。想让一部分对象共有一些属性，就可以使用类去定义。js中的类是基于原型继承机制的。
JavaScript ES6类的定义与继承
最新发布
Welisit的博客
10-20 578
我们会发现，按照前面的构造函数形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解。在ES6（ECMAScript2015）新的标准中使用了class关键字来直接定义类；但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已；所以学好了前面的构造函数、原型链更有利于我们理解类的概念和继承关系；那么，如何使用class来定义一个类呢？可以使用两种方式来声明类：类声明和类表达式；// 方式一 类声明// 方式二 类表达式。
JavaScript 基础篇：类与继承
RQ桑的博客
04-02 1136
JavaScript 类与继承 本文引自 JavaScript 学习 0402 课程 类与继承JavaScript 类与继承一. JavaScript 中类的写法二. 类的继承本文到此结束，如果对你有帮助，记得留下你的点赞！ 一. JavaScript 中类的写法 1. 构造方法：初始化对象 class User1 { // 构造方法其实就是类可以传入的参数 constructor(name, email) { this.name = name; this.email = ema
javascript类与继承详解
CaelumTian的专栏
02-20 247
类的创建 在面向对象语言中，类是面向对象的基础，并且具有棉线的层次概念和继承关系。Javascript中并没有类的概念，Javascript是基于对象的弱类型语言，以对象为基础，以函数为模型，以原形为继承机制的一种模式。创建一个简单的对象，就是创建一个Object类的实例。虽然Object构造函数或对象字面量可以用来创建单个对象，但是这些对象都是基于Object这一个类。为此我们需要创建自己的类
JavaScript中的类继承
12-02
JavaScript一种没有类的，面向对象的语言，它使用原型继承来代替类继承。这个可能对受过传统的面向对象语言（如C++和Java）训练的程序员来说有点迷惑。JavaScript的原型继承比类继承有更强大的表现力，现在就让我们...
JavaScript OOP类与继承
10-29
JavaScript OOP类与继承实现代码，需要的朋友可以参考下。
JavaScript类和继承 prototype属性
12-11
我们已经在第一章中使用prototype属性模拟类和继承的实现。 prototype属性本质上还是一个JavaScript对象。 并且每个函数都有一个默认的prototype属性。 如果这个函数被用在创建自定义对象的场景中，我们称这个函数为...
javascript中类和继承（代码示例+prototype.js）
07-31
NULL 博文链接：https://liujunhg.iteye.com/blog/1069419
JavaScript的类与继承
jimjack2013的博客
03-26 997
JavaScript不像Java语言本身就具有类的概念，JavaScript作为一门基于原型(ProtoType)的语言，(推荐我之前写的我所认识的JavaScript作用域链和原型链)，时至今日，仍然有很多人不建议在JavaScript中大量使用面对对象的特性。但就目前而言，很多前端框架，例如React都有基于类的概念。首先明确一点，类存在的目的就是为了生成对象，而在JavaScript生成对象...
javascript的类与继承
suemi的Blog
11-05 360
javascript的类与继承 javascript的类与一般的面向对象语言有很大的不同，类的标识是它的构造函数，下面先定义一个类 var User=function(name){ this.name=name; }; User.getName=function(){return this.name;}; User.prototype.get_name=function(){ret
javascript中的继承----类式继承
lxk116688的博客
05-13 268
javascript主要包括类式继承、原型继承、拷贝继承这三种继承方式。 类式继承 大多数面向对象的编程都支持类与类继承的特性，但是javascript是基于原型的编程语言，他并不支持这些特性，只能通过其他方法定义并关联多个相似的对象，如new和instanceof。不过在后来的ES6中新增了一些元素，比如class关键字，但是这个并不意味着javascript中是有类的，class只不过是构造函数的语法糖而已。 类式继承的主要思路是：通过构造函数实例化对象，通过原型链将实例对象关联起来。下面将对类式继承进
javascript 类的继承
qq_50148250的博客
10-16 215
javascript类的继承 经典继承、圣杯继承
JavaScript学习总结(一)——类和继承
new_start_2018的博客
07-02 450
文章目录一、继承1、概念二、类1、JavaScript中的类型1.1、原始值2.2、类的各部分关系2.3、类的各部分关系的再深入三、类的继承1、子类和继承2、继承的实现3、广义继承关系的其他实现方法3.1、类工厂模式3.2、组合方法四、ECMAScript5中特性对类的修饰1、属性特性的方法支持2、类的拓展性的设置五、ECMAScript6中的类语法1.类的新语法2.类的继承语法3.ES6中类的继承与ES5中类继承的区别 一、继承 1、概念 f.prototype原型：函数的原型，当用函数f作为构造函数创
JavaScript类与继承
小刘的博客
07-04 371
JS类与继承前言类ES5定义类工厂模式构造函数模式原型模式组合使用构造函数模式与原型模式（最常用）动态原型模式寄生构造函数模式稳妥构造函数模式ES6定义类继承ES5的继承ES6的继承 前言 在ES6中出现了class与extends关键字，使js做类与继承容易了很多，但是在ES6之前如何实现类与继承是理解js重要的一部分。本篇文章将介绍ES6的类、继承与ES6之前的类、继承的写法，一篇文章介绍所有内容。 类 下面定义的类全部为Person类，Person类有age与name两个属性，sayName与sayA
JS中的类与类的继承
weixin_34294649的博客
10-09 1600
JS中的类与类的继承 我们知道，JS中没有类或接口的概念，即不能直接定义抽象的类，也不能直接实现继承。不过，为了编程的方便，我们可以在 JS 中模拟类和继承的行为。首先捋清楚类和对象的关系： 类：比如人类，指的是一个范围； 对象：比如某个人，指的是这个范围中具体的对象 js中的function作为构造函数时，就是一个类，通过ne...
JavaScript实现类与继承的方法（全面整理）
qq_45371853的博客
03-29 110
原文链接原文作者写的很好，我还没有学到这里，转载是为了后期学习方便
js中的类和类的继承
qq_44388775的博客
10-22 318
es5中没有类的概念，通过构造函数和原型对象间接实现类的效果。 通过构造函数实现类 function Person(name) { this.name = name; this.say = function() { console.log(`我是${ this.name }`); }; } let zs = new Person('zs'); zs.say(); // 我是zs let ls = new Person('ls'); ls.say();
js中类的继承-超详细
qq_48109675的博客
09-15 1981
继承父实例属性：写在父的constructor中，子使用super访问 继承父实例方法：写在父类体中，子实例对象.方法名 继承静态方法、静态属性：使用static声明，子构造函数.静态方法名/静态属性名
javaScript中的继承extends详解
05-11
在 JavaScript 中，继承是一个非常常见的概念。ES6 引入了 Class 语法糖，让继承更加易于理解和实现。在 Class 中，我们可以使用 extends 关键字来创建一个子类，使其继承父类的属性和方法。 下面我们来详细了解...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值