JavaScript中的继承

pekonchan 发布于2019-08-20 16:17 / 1549人阅读

JavaScript中的继承

以下讨论中，我们以Animal作为父类，Cat作为子类，使Cat继承Animal。

//父类Animal
function Animal(){
    this.species="动物";
}

//子类Cat
function Cat(name, color){
    this.name=name;
    this.color=color;
}

一、构造函数继承

使用call、apply方法，将父对象的构造函数绑定在子对象上.

代码如下：

function Cat(name, color){
    Animal.call(this, arguments);
    this.name=name;
    this.color=color;
}

二、prototype模式

如果Cat.prototype对象指向一个Animal实例，那么所有的Cat的实例就能继承Animal了.

代码如下：

/**
*每个构造函数都有一个原型对象(prototype)，这个原型对象是这个函数所有实例的原型（proto）.
*每个原型对象都有一个constructor属性，指向它的构造函数.
*每个实例也有一个constructor属性，默认调用prototype的constructor属性.
*/

//将Cat的原型对象设置为Animal的实例
Cat.prototype=new Animal();

//手动纠正Cat.prototype.constructor , 如果不纠正将指向Animal
Cat.prototype.constructor=Cat;

三、直接继承prototype

由于Animal对象中，不变的属性都可以直接写入Animal.prototype中，所以我们可以让Cat跳过Animal，直接继承Animal.prototype.

代码如下：

//改写Animal
function Animal(){}
Animal.prototype.species="动物";

//将Cat.prototype指向Animal.prototype，就完成了继承
Cat.prototype=Animal.prototype;

//手动纠正constructor指向
Cat.prototype.constructor=Cat;

四、利用空对象作为中介

空对象几乎不占用空间，且这时修改Cat的prototype对象，不会影响Animal的prototype对象.

代码如下：

var F=function(){};
F.prototype=Animal.prototype;

//将原型执行一个空对象
Cat.prototype=new F();

//还是手动修改constructor的指向
Cat.prototype.constructor=Cat;

可以将上面的方法封装成一个函数

function extend(child, parent){
    var F=function(){};
    F.prototype=parent.prototype;
    child.prototype=new F();
    child.prototype.constructor=child;
}

总结：继承的方法有多种，核心思想是控制prototype指向，切记纠正constructor的指向。

服务器托管 GPU服务器 java中的继承 javascript继承 javascript继承方法 Javascript实现继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82840.html

彻底搞懂JavaScript中的继承

摘要：这正是我们想要的太棒了毫不意外的，这种继承的方式被称为构造函数继承，在中是一种关键的实现的继承方法，相信你已经很好的掌握了。你应该知道，JavaScript是一门基于原型链的语言，而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说，所谓的原型链就是一条继承链。有些困惑了吗？接着看下去吧。一、构造函数，原型属性与实例对象要搞清楚如何在JavaScript中实现继承，...

_ivan 2019-08-21 17:48 评论0 收藏0
Javascript 设计模式读书笔记(三)——继承

摘要：的继承方式属于原型式继承，非常灵活。当使用关键字执行类的构造函数时，系统首先创建一个新对象，这个对象会继承自构造函数的原型对象新对象的原型就是构造函数的属性。也就是说，构造函数用来对生成的新对象进行一些处理，使这个新对象具有某些特定的属性。继承这个东西在Javascript中尤其复杂，我掌握得也不好，找工作面试的时候在这个问题上栽过跟头。Javascript的继承方式属于原型式继承，...

cangck_X 2019-08-21 12:16 评论0 收藏0
javascript的继承你了解多少？

摘要：和构造函数前面提到，是个内置隐藏属性，虽然在可以通过访问，但是其设计本意是不可被读取和修改的，那么我们如何利用原型链来建立继承关系提供了关键字。到这儿，思路就清晰了，怎么让对象和对象的相连实现继承只需把的构造函数的连接到就行了。什么是继承? 大多数人使用继承不外乎是为了获得这两点好处，代码的抽象和代码的复用。代码的抽象就不用说了，交通工具和汽车这类的例子数不胜数，在传统的OO语言中(...

baishancloud 2019-08-23 14:08 评论0 收藏0
白话解释 Javascript 原型继承(prototype inheritance)

摘要：我们有了构造函数之后，第二步开始使用它构造一个函数。来个例子这种方式很简单也很直接，你在构造函数的原型上定义方法，那么用该构造函数实例化出来的对象都可以通过原型继承链访问到定义在构造函数原型上的方法。来源: 个人博客白话解释 Javascript 原型继承(prototype inheritance) 什么是继承? 学过面向对象的同学们是否还记得，老师整天挂在嘴边的面向对象三大特...

kid143 2019-08-21 15:09 评论0 收藏0
JavaScript中的继承

摘要：前言作为中最重要的内容之一，继承问题一直是我们关注的重点。如果一个类别继承自另一个类别，就把这个称为的子类，而把称为的父类别也可以称是的超类。前言作为 JavaScript 中最重要的内容之一，继承问题一直是我们关注的重点。那么你是否清晰地知道它的原理以及各种实现方式呢阅读这篇文章，你将知道：什么是继承实现继承有哪几种方式它们各有什么特点这里默认你已经清楚的知道构造函...

guyan0319 2019-08-23 17:02 评论0 收藏0
[译] 为什么原型继承很重要

摘要：使用构造函数的原型继承相比使用原型的原型继承更加复杂，我们先看看使用原型的原型继承上面的代码很容易理解。相反的，使用构造函数的原型继承像下面这样当然，构造函数的方式更简单。五天之前我写了一个关于ES6标准中Class的文章。在里面我介绍了如何用现有的Javascript来模拟类并且介绍了ES6中类的用法，其实它只是一个语法糖。感谢Om Shakar以及Javascript Room中...

xiao7cn 2019-08-21 10:27 评论0 收藏0