首页 web前端 前端问答 javascript是如何实现继承

javascript是如何实现继承

Oct 13, 2021 pm 12:12 PM
javascript 继承

方法:1、利用原型让一个引用类型继承另外一个引用类型的属性和方法;2、借用构造函数,在子类构造函数的内部调用超类构造函数,通过用call()和apply()可在新创建的对象上执行构造函数;3、将原型链和借用构造函数的技术组合在一块实现继承。

javascript是如何实现继承

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

前言:大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠 原型链 来实现。

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高级教程

以上是javascript是如何实现继承的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

C++ 函数继承详解:如何在继承中使用'基类指针”和'派生类指针”? C++ 函数继承详解:如何在继承中使用'基类指针”和'派生类指针”? May 01, 2024 pm 10:27 PM

在函数继承中,使用“基类指针”和“派生类指针”来理解继承机制:基类指针指向派生类对象时,执行向上转型,只访问基类成员。派生类指针指向基类对象时,执行向下转型(不安全),必须谨慎使用。

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

C++ 函数继承详解:如何调试继承中出现的错误? C++ 函数继承详解:如何调试继承中出现的错误? May 02, 2024 am 09:54 AM

继承错误调试技巧:确保正确的继承关系。使用调试器逐步执行代码,检查变量值。确保正确使用virtual修饰符。检查隐藏的继承带来的菱形继承问题。检查抽象类中未实现的纯虚函数。

C++ 函数继承详解:如何理解继承中的'is-a”和'has-a”关系? C++ 函数继承详解:如何理解继承中的'is-a”和'has-a”关系? May 02, 2024 am 08:18 AM

C++函数继承详解:掌握“is-a”和“has-a”关系什么是函数继承?函数继承是C++中一种将派生类中定义的方法与基类中定义的方法关联起来的技术。它允许派生类访问和重写基类的方法,从而扩展了基类的功能。“is-a”和“has-a”关系在函数继承中,“is-a”关系指派生类是基类的子类型,也就是说,派生类“继承”了基类的特性和行为。“has-a”关系指派生类包含对基类对象的引用或指针,也就是说,派生类“拥有”了基类对象。语法以下是如何实现函数继承的语法:classDerivedClass:pu

C++ 中继承和多态性如何影响类的耦合度? C++ 中继承和多态性如何影响类的耦合度? Jun 05, 2024 pm 02:33 PM

继承和多态性会影响类的耦合度:继承会增加耦合度,因为派生类依赖于基类。多态性可以降低耦合度,因为对象可以通过虚函数和基类指针以一致的方式响应消息。最佳实践包括谨慎使用继承、定义公共接口、避免向基类添加数据成员,以及通过依赖注入解耦类。实战案例展示了如何使用多态性和依赖注入降低银行账户应用程序中的耦合度。

如何在JavaScript中获取HTTP状态码的简单方法 如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介:在进行前端开发中,我们常常需要处理与后端接口的交互,而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法,并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时,服务

'PHP面向对象编程入门:从概念到实践” 'PHP面向对象编程入门:从概念到实践” Feb 25, 2024 pm 09:04 PM

什么是面向对象编程?面向对象编程(OOP)是一种编程范式,它将现实世界中的实体抽象为类,并使用对象来表示这些实体。类定义了对象的属性和行为,而对象则实例化了类。OOP的主要优点在于它可以使代码更易于理解、维护和重用。OOP的基本概念OOP的主要概念包括类、对象、属性和方法。类是对象的蓝图,它定义了对象的属性和行为。对象是类的实例,它具有类的所有属性和行为。属性是对象的特征,它可以存储数据。方法是对象的函数,它可以对对象的数据进行操作。OOP的优点OOP的主要优点包括:可重用性:OOP可以使代码更

Java 接口与抽象类:通往编程天堂之路 Java 接口与抽象类:通往编程天堂之路 Mar 04, 2024 am 09:13 AM

接口:无实现的契约接口在Java中定义了一组方法签名,但不提供任何具体实现。它充当一种契约,强制实现该接口的类实现其指定的方法。接口中的方法是抽象方法,没有方法体。代码示例:publicinterfaceAnimal{voideat();voidsleep();}抽象类:部分实现的蓝图抽象类是一种父类,它提供了一个部分实现,可以被它的子类继承。与接口不同,抽象类可以包含具体的实现和抽象方法。抽象方法是用abstract关键字声明的,并且必须被子类覆盖。代码示例:publicabstractcla

See all articles