JavaScript继承几种方式学习笔记

谁践踏了优雅 2024-03-17 17:44 89阅读 0赞

文章简单介绍了JavaScript继承模式，包括组合继承、原型继承、寄生继承、寄生组合继承。

#### 文章目录 ####

*  1、组合继承
 *  2、原型式继承
 *  3、寄生式继承
 *  4、寄生组合式继承

## 1、组合继承 ##

组合继承也叫做经典继承，指的是原型链和借用构造函数的技术组合到一块，从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承

function SuperType(name){
        
    	this.name = name;
    	this.colors = ["red"];
    }
    SuperType.prototype.sayName = function(){
        
    	alert(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(){
        
    	alert(this.age);
    }
    var instance1 = new SubType("Nicholas",29);
    instance1.colors.push("black");
    alert(instance1.colors);
    instance1.sayName();
    instance1.sayAge();

## 2、原型式继承 ##

借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型。它会在object创建临时构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。

function object(o){
        
    	function F(){
        }
    	F.prototype = o;
    	return new F();
    }
    var person = {
        
    	name:"Nicholas",
    	friends:["Shelly"];
    }
    var anotherPerson = object(person);
    anotherPerson.name = "Greg";
    anotherPerson.friends.push("Rob");
    
    alert(person.friends);

## 3、寄生式继承 ##

在其中会创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再像真地是它做了所有工作一样返回对象

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

## 4、寄生组合式继承 ##

借用构造函数来继承属性，通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数

function SuperType(name) {
        
    	this.name = name;
    	this.colors = ['red']
    }
    
    SuperType.prototype.sayName = function(){
        
    	alert(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(){
        
    	alert(this.age);
    }
    
    function inheritPrototype(subType,superType){
        
    	var prototype = object(superType.prototype);
    	prototype.constructor = subType;
    	subType.prototype = prototype;
    }
    
    function SuperType(name){
        
    	this.name = name;
    	this.colors = ["red"];
    }
    
    SuperType.prototype.sayName = function(){
        
    	alert(this.name);
    }
    function SubType(name,age){
        
    	SuperType.call(this,name);
    	this.age = age;
    }
    inheritPrototype(SubType,SuperType);
    SubType.prototype.sayAge =function(){
        
    	alert(this.age);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，89人围观）

还没有评论，来说两句吧...

相关阅读

相关 Javascript中的几种继承？如何实现继承？

在 JavaScript 内, 继承是面向对象变成中一个重要的开发思想, 核心就是让 A 对象使用 B 对象的属性和方法. 说白了, 就是为了资源整合, 让我们的代码复用性更高

末蓝、/ 2024年03月25日 06:08/ 0 赞/ 60 阅读

相关 JavaScript继承几种方式学习笔记

文章简单介绍了JavaScript继承模式，包括组合继承、原型继承、寄生继承、寄生组合继承。文章目录 1、组合继承 2、原型式继承 3、寄生式

谁践踏了优雅/ 2024年03月17日 17:44/ 0 赞/ 90 阅读

相关 javascript 继承的几种方式

//js继承有5种实现方式： /1、继承第一种方式：对象冒充/ function Parent(username) { this.usern

港控/mmm°/ 2024年02月17日 15:15/ 0 赞/ 85 阅读

相关 JS继承的几种方式

1.原型继承核心：将父类的实例作为子类的原型(并不是把父类中的属性和方法克隆一份一模一样的给子类，而是让子类父类之间增加了原型链接) 特点：父类中私有的和公有的都继

叁歲伎倆/ 2023年06月16日 10:52/ 0 赞/ 22 阅读

相关 JavaScript继承的几种方法

文章目录继承 1. 什么是继承例子: 面向对象的特性:封装,继承,多态 2. JavaScr

小咪咪/ 2023年01月13日 13:59/ 0 赞/ 152 阅读

相关 JavaScript继承的几种方式解析

(一).对象冒充概念:新的类冒充旧的类(旧的类必须采用构造函数的方式) 示例代码: //父类 function people(name,age)\{ this.n

短命女/ 2022年09月17日 12:23/ 0 赞/ 178 阅读

相关 Javascript中的几种继承方式比较

开篇 > 从’严格’意义上说，javascript并不是一门真正的面向对象语言。这种说法原因一般都是觉得javascript作为一门弱类型语言与类似java或c\之类的强

太过爱你忘了你带给我的痛/ 2022年07月31日 16:16/ 0 赞/ 187 阅读

相关 JavaScript中的几种继承方式

JavaScript中的几种继承方式: 一:原型链让原型对象等于另一个类型的实例.此时,原型对象包含一个指向另一个原型的指针,相应地,另一个原型中也包含着指

痛定思痛。/ 2022年07月10日 04:22/ 0 赞/ 201 阅读

相关【JavaScript】三种方式实现JavaScript继承

1，组合继承 function Parent(value) { this.val = value } Parent.prototype

一时失言乱红尘/ 2022年03月10日 08:46/ 0 赞/ 263 阅读

相关 js中的几种继承方式

定义父类： // 定义一个动物类 function Animal (name) { // 属性 this.name = name ||

素颜马尾好姑娘i/ 2021年09月18日 02:48/ 0 赞/ 416 阅读