js的7种继承方法总结

超、凢脫俗 2022-11-09 11:22 153阅读 0赞

1.原型链方式（子类的原型指向父类的实例）；可通过两种方式来确定原型和实例之间的关系，instanceof操作符；isPrototypeOf();给子类添加方法要放在替换原型的语句之后；不能使用字面量方式添加方法，否则会重写原型链；缺点：属性共享问题

function Supper(){ 
    	this.age = 12;
    }
    Supper.prototype.getAge = function(){ 
    	return this.age;
    }
    function Sub(){ 
    	this.name = "xiaoxiao";
    }
    Sub.prototype = new Supper();//Sub的constructor指向了Supper
    Sub.prototype.sayName = fucntion(){ 
    	return this.name;
    }
    var sub = new Sub();
    console.log(sub.getAge());

2.借用构造函数(子类构造函数内部调用超类)；函数无法复用

function Suppper(age){ 
    	this.age = age;
    	this.number = [1,2,3];
    }
    function Sub(){ 
    	Supper.call(this,22);
    }
    var sub = new Sub();
    sub.number.push(4);
    console.log(sub.number);//1,2,3,4
    var sub1 = new Sub();
    console.log(sub1.number);//1,2,3

3.原型链和构造函数组合式继承

function Suppper(age){ 
    	this.age = age;
    	this.number = [1,2,3];
    }
    Supper.prototype.getAge = function(){ 
    	console.log(this.age);
    }
    function Sub(name,age){ 
    	Supper.call(this,age);
    	this.name = name;
    }
    Sub.prototype = new Supper();
    Sub.prototype.constructor = Sub;//让constructor重新指向子类
    Sub.prtotype.sayName = function(){ 
    	console.log(this.name);
    }
    var sub = new Sub("hello",22);
    sub.number.push(4);
    console.log(sub.number);//1,2,3,4
    console.log(sub.getAge());//22
    console.log(sub.sayName());//"hello"
    var sub1 = new Sub("world",18);
    console.log(sub1.number);//1,2,3

4.原型式继承(借助原型可以基于已有的对象创建新对象)

function object(o){ //对传入的对象执行浅复制
    	var F = new Function(){ }
    	F.prototypeof = o;
    	return new F();
    }
    var person = { 
    	name:"xiaomi";
    	number:[1,2,3];
    }
    var anotherPerson = object(person);//如果改变number里面的值，其他实例的number也会变化
    console.log(anotherPerson.name);//"xiaomi"
    anotherPerson.name = "xx";
    console.log(anotherPerson.name);//"xx"
    ECAMScript5中，Object.create()方法规范化了原型式继承；接收两个参数，要复制的对象，可选的一个为新对象定义额外属性的对象，传入一个参数的情况下，与Object()函数行为一致

5.寄生式继承（与原型式继承紧密相关，创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后在返回对象）

function createAnother(o){ 
    	var clone = Object.create(o);
    	clone.sayHi = function(){ 
    		console.log("hi);
    	};
    	return o;
    }
    var person = { 
    	name:"xiaomi";
    	number:[1,2,3];
    }
    var anotherPerson = createAnother(person);
    anotherPerson.sayHi();//hi

6.寄生组合式继承（组合继承无论什么情况下，都会调用两次超类构造函数：一次是在创建子类型原型的时候，一次式在子类构造函数内部）;该方式只会调用一次父类构造函数

function Suppper(age){ 
    	this.age = age;
    	this.number = [1,2,3];
    }
    Supper.prototype.getAge = function(){ 
    	console.log(this.age);
    }
    function Sub(name,age){ 
    	Supper.call(this,age);
    	this.name = name;
    }
    inheritPrototype(Supper,Sub);
    Sub.prtotype.sayName = function(){ 
    	console.log(this.name);
    }
    function inheritPrototype(Supper,Sub){ 
    	var prototype = Object.create(Supper.prototype);
    	Sub.prototype = prototype;
    	Sub.constructor = Sub;
    }
    var sub = new Sub("hello",22);
    sub.number.push(4);
    console.log(sub.number);//1,2,3,4
    console.log(sub.getAge());//22
    console.log(sub.sayName());//"hello"
    var sub1 = new Sub("world",18);
    console.log(sub1.number);//1,2,3

7.类继承

class Supper{ 
    	constructor(name,age){ 
    		this.name = name;
    		this.age = age;
    	}
    	sayName(){ 
    		console.log(name);
    	}
    }
    class Sub extends Supper{ 
    	constructor(name,age,job){ 
    		super(name,gae);
    		this.job = job;
    	}
    	sayJob(){ 
    		console.log(this.job);
    	}
    }
    var sub = new Sub("xiaowang",22,"engineer");
    sub.sayName();//"xiaowang"

发表评论取消回复

表情：

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

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

相关阅读

相关关于JS的六种继承

`持续更新中.....` 继承一共有六种方式：分别是： 1. 原型链继承 2. 借用构造函数继承 3. 组合继承 4. 原型式继承 5. 寄生式继承

约定不等于承诺〃/ 2023年06月09日 07:58/ 0 赞/ 15 阅读

相关 js中继承方法总结

js中的继承主要使用原型链实现原型链继承：利用原型让一个引用类型继承另一个引用类型的属性和方法原型链：当查找一个实例属性时，先在实例中查找，找到就直接返回，找不到在

红太狼/ 2022年12月31日 05:25/ 0 赞/ 131 阅读

相关 JS 继承的四种方式

类三大特性 JS 本身是基于面向对象开发的编程语言。类：封装、继承、多态封装：类是一个函数，把实现一个功能的代码进行封装，以此实现 “低耦合高内聚” 多态

梦里梦外;/ 2022年12月26日 09:09/ 0 赞/ 170 阅读

相关 js的7种继承方法总结

1.原型链方式（子类的原型指向父类的实例）；可通过两种方式来确定原型和实例之间的关系，instanceof操作符；isPrototypeOf();给子类添加方法要放在替换原型的

超、凢脫俗/ 2022年11月09日 11:22/ 0 赞/ 154 阅读

相关 js中继承的几种用法总结

`js`里常用的如下两种继承方式： `原型链继承（对象间的继承）` `类式继承（构造函数间的继承）` `` 类式继承 `` `类式继承`是在子类型构造函数的内部

迈不过友情╰/ 2022年07月17日 04:07/ 0 赞/ 172 阅读

相关 js 继承方法

1、call 继承法 call 只能继承函数的值，并不能继承函数的原型 function parent(){ this.a = 10;

偏执的太偏执、/ 2022年05月31日 13:27/ 0 赞/ 192 阅读

相关总结JS中的继承

ECMAScript没有明确的继承机制，而是通过模仿实现的，而且ECMAScript只支持实现继承（即继承实际的方法，还有接口继承），实现继承主要是依靠原型链来实现的。昨天

梦里梦外;/ 2022年05月14日 03:39/ 0 赞/ 190 阅读

相关 js 创建类和继承的几种方法

在面向对象编程中，类（class）是对象（object）的模板，定义了同一组对象（又称"实例"）共有的属性和方法。JavaScript语言里是没有类的概念的，但是我们通过以下方

爱被打了一巴掌/ 2022年04月10日 06:47/ 0 赞/ 281 阅读

相关 js总结(四)--JS 定义方法的三种方式

来自：[https://blog.csdn.net/u014338577/article/details/77775371][https_blog.csdn.net_u0143

深藏阁楼爱情的钟/ 2022年04月06日 06:10/ 0 赞/ 226 阅读

相关 JS 继承的多种方法

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

迷南。/ 2022年02月21日 14:40/ 0 赞/ 228 阅读