返回顶部
首页 > 资讯 > 前端开发 > VUE >javascript有继承吗
  • 511
分享到

javascript有继承吗

2024-04-02 19:04:59 511人浏览 独家记忆
摘要

本文小编为大家详细介绍“javascript有继承吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript有继承吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

本文小编为大家详细介绍“javascript有继承吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript有继承吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

JavaScript有继承。JavaScript继承是一种允许我们在已有类的基础上创建新类的机制,继承能够为子类提供灵活性,可以重用父类的方法和变量,可以利用原型链、构造函数来实现继承。

教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

javascript有没有继承

JavaScript有继承。

JavaScript继承是一种允许我们在已有类的基础上创建新类的机制;它为子类提供了灵活性,可以重用父类的方法和变量。继承的过程,就是从一般到特殊的过程。

JavaScript如何实现继承?

1、原型链

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

原型链实现继承例子:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true

2、借用构造函数

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

例子:

function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

3.组合继承

基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。

例子:

function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
console.log(this.name);
}
function SubType(name, age) {
SuperType.call(this,name);//继承属性
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
Subtype.prototype.constructor = Subtype;
Subtype.prototype.sayAge = function() {
console.log(this.age);
}
var instance1 = new SubType("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20

4.原型式继承

基本想法:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

原型式继承的思想可用以下函数来说明:

function object(o) {
function F(){}
F.prototype = o;
return new F();
}

例子:

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

ECMAScript5通过新增Object.create()方法规范化了原型式继承,这个方法接收两个参数:一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

5.寄生式继承

基本思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象。

例子:

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"

6.寄生组合式继承

基本思想:通过借用函数来继承属性,通过原型链的混成形式来继承方法

其基本模型如下所示:

function inheritProperty(subType, superType) {
var prototype = object(superType.prototype);//创建对象
prototype.constructor = subType;//增强对象
subType.prototype = prototype;//指定对象
}

例:

function SuperType(name){
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function (){
alert(this.name);
};
function SubType(name,age){
SuperType.call(this,name);
this.age = age;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}

读到这里,这篇“javascript有继承吗”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网VUE频道。

--结束END--

本文标题: javascript有继承吗

本文链接: https://lsjlt.com/news/97255.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • javascript有继承吗
    本文小编为大家详细介绍“javascript有继承吗”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript有继承吗”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 ...
    99+
    2024-04-02
  • javascript继承方法有什么
    本篇内容介绍了“javascript继承方法有什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!javascript继承方法有:1、使用ca...
    99+
    2023-06-14
  • JavaScript继承与多继承实例讲解
    这篇文章主要介绍“JavaScript继承与多继承实例讲解”,在日常操作中,相信很多人在JavaScript继承与多继承实例讲解问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”...
    99+
    2024-04-02
  • JavaScript中有哪些继承方式
    这期内容当中小编将会给大家带来有关JavaScript中有哪些继承方式,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。原型链首先得要明白什么是原型链,在一篇文章看懂prot...
    99+
    2024-04-02
  • javascript的继承方式有哪些
    这篇文章主要讲解了“javascript的继承方式有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript的继承方式有哪些”吧! ...
    99+
    2024-04-02
  • javascript中有哪些继承形式
    本篇文章为大家展示了javascript中有哪些继承形式,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Js的继承大体上就是两种:对象冒充、原型方式。这两种方式各有优点和缺陷,这里我先列举出来,再从底...
    99+
    2023-06-14
  • javascript继承的方法有哪些
    这篇文章将为大家详细讲解有关javascript继承的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。javascript继承的6种方法:1、原型链继承,其重点是让新实例的原型等于父类的实例;2、...
    99+
    2023-06-14
  • Javascript中类式继承和原型式继承有什么区别
    这篇文章主要介绍了Javascript中类式继承和原型式继承有什么区别,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在所有面向对象的编程中,...
    99+
    2024-04-02
  • JavaScript中的继承模式有哪些
    JavaScript中的继承模式有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。一. 原型链继承所谓原型链继承,就是让父类的一个实例作为子...
    99+
    2024-04-02
  • JavaScript中的继承方式有哪些
    这篇文章将为大家详细讲解有关JavaScript中的继承方式有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。类式继承(构造函数)JS中其实是没有类的概念的,所谓的类也...
    99+
    2024-04-02
  • JavaScript中有哪些继承的方法
    这篇文章将为大家详细讲解有关JavaScript中有哪些继承的方法,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. 什么是继承继承: 首先继承是一种关系,类(class)与类之间的关系,J...
    99+
    2023-06-15
  • javascript实现继承的方法有哪些
    本篇内容介绍了“javascript实现继承的方法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!ja...
    99+
    2024-04-02
  • JavaScript中继承的优缺点有哪些
    这篇文章给大家分享的是有关JavaScript中继承的优缺点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。本文讲解JavaScript各种继承方式和优缺点。但是注意:这篇文...
    99+
    2024-04-02
  • javascript继承实现的方式有哪些
    本文小编为大家详细介绍“javascript继承实现的方式有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“javascript继承实现的方式有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。什么是继承用官...
    99+
    2023-07-05
  • 如何理解JavaScript继承
    这篇文章将为大家详细讲解有关如何理解JavaScript继承,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。背景继承给我们提供了一种优雅可复用的编码方式,继承...
    99+
    2024-04-02
  • Javascript怎么实现继承
    这篇文章主要介绍“Javascript怎么实现继承”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Javascript怎么实现继承”文章能帮助大家解决问题。1、构造函...
    99+
    2024-04-02
  • JavaScript继承方式介绍
    本篇内容介绍了“JavaScript继承方式介绍”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、构造函数...
    99+
    2024-04-02
  • JavaScript怎样实现继承
    这篇文章给大家分享的是有关JavaScript怎样实现继承的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。继承是面向对象编程中又一非常重要的概念,JavaScript支持实现继承,...
    99+
    2024-04-02
  • JavaScript继承怎么实现
    小编给大家分享一下JavaScript继承怎么实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!ES6之前,JavaScript...
    99+
    2024-04-02
  • JavaScript组合继承详解
    目录1、前言2、原型链继承3、构造函数继承4、组合继承1、前言 首先学习继承之前,要对原型链有一定程度的了解。 不了解可以去先阅读我另一篇文章,里面对原型链有一个较为详细的说明:Ja...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作