js中继承方法总结

红太狼 2022-12-31 05:25 131阅读 0赞

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

1.  原型链继承：缺点，子类的constructor也指向父类；共享（原来的原型实例属性会变成现在的原型属性），比如引用实例，所有一个实例对它进行操作时，其他实例也会相应变化；创建子类实例时，不能向超类的构造函数中传递参数

function superType(){
    this.it= true;
    }
    superType.prototype.getSuperValue = function(){
    	return this.it
    }
    function subType(){
    	this.subIt = false;
    }
    subType.prototype = new superType();//sub继承super，子类的原型指向父类的实例，实现的本质是重写原型对象
    subType.prototype.getSubValue = function(){
    	return this.subIt;
    }
    var ins = new SubType();
    alert(ins.getSuperValue);//true;调用了父类方法

确定原型与实例的关系可以使用instanceof操作符和isPrototypeOf();方法，子类需要重写父类中的某个方法或者需要添加父类中某个不存在的方法，给原型添加代码的方法一定要放在替换原型的语句之后。在通过原型链实现继承时，不能使用对象字面量创建原型方法，因为这样会重写原型链

1.  借用构造函数(伪造对象/经典继承)：在子类的内部调用超类的构造方法

function SuperType(name){
    	this.name = name;
    	this.colors = ["red","blue"];
    }
    function SubType(){
    	SuperType.call(this,"xiaoxiao");//通过call或apply来在新创建的对象上执行构造函数
    	this.age = 29;
    }
    var instance1 = new SubType();
    instance1.colors.push("black");
    console.log(instance1.colors);//"red,blue,black"
    
    var instance2 = new SubType();
    console.log(instance2.colors);//"red,blue"

缺点：方法在构造函数中定义，函数无法复用

1.  组合继承（伪经典继承），将原型链和借用构造函数的技术组合到一起，使用原型链实现对原型属性和方法的继承，通过调用构造函数来实现对实例属性的继承

function SuperType(name){
    	this.name = name;
    	this.colors = ["red","blue"];
    }
    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;//让子类的constructor重新指向子类
    SubType.prototype.sayAge = function(){
    	alert(this.age);
    }
    var one  = new SubType("xiaoxiao",29);
    one.colors.push("black");
    alert(one.colors);//"red","blue","black"
    one.sayName();//"xiaoxiao"
    one.sayAge();//29
    
    var two = new SubType("zhan",27);
    alert(one.colors);//"red","blue"
    one.sayName();//"zhan",
    one.sayAge();//27

instanceof和isPrototypeOf()能够用于识别基于组合继承创建的对象

1.  原型式继承：借助原型基于已有的对象创建新对象

function object(o){
    	Function F(){
    	F.prototype = o;
    	return new F();
    }
    }
    
    var obj = {
    	name: "xs",
    	friends:["x","y"]
    }
    var p = object(obj);//obj的friends属性会被实例共享
    var p2 = object(obj);
    p2.name = "cd";
    p2.fridens.push("u");
    ES5新增了Object.create()方法规范原型式继承，接受两个参数，参1：用作新对象原型的对象和（可选的）一个为新对象额外定义额外的属性对象，在传入一个参数的情况下，与上面object()方法行为相同，第二个参数与Object.defineProperties()方法的格式相同
    var per = {
    	name:"mkh";
    };
    var anp = Object.create(per,{
    	name:{
    	value:"Grey";
    }
    });

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

function createAnthor(orgin){
    	var clone = object(orgin);
    	clone.sayHi = function(){
    	alert("hi");
    };
    return clone;
    }
    
    var obj = {
    	name:"ey";
    }
    var anthor = createAnthor(obj);
    anthor.sayHi();

1.  寄生组合式继承：借用构造函数来继承属性，通过原型链的混成形式来继承方法  
    组合继承最大的问题是无论在什么情况下，都会调用两次超类的构造函数，一次是在创建子类型原型的时候，一次是在子类型构造函数内部

function inheritPrototype(sub,super){
    	var p = object(super.prototype);//创建对象
    	p.constructor = sub;//增强对象
    	sub.prototype = p;//指定对象
    }
    
    function SuperType(name){
    	this.name = name;
    	this.colors = ["red","blue"];
    }
    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;//让子类的constructor重新指向子类
    */
    inheritPrototype(SubType,SuperType);//替换上两个语句
    SubType.prototype.sayAge = function(){
    	alert(this.age);
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 js中继承方法总结

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

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

相关 js中数组方法总结

数组创建方法：一：构造函数 1. var arr = new Array();//空数组 2. var arr = new Array(10);//固定长度的数组

你的名字/ 2022年12月29日 14:14/ 0 赞/ 142 阅读

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

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

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

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

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

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

相关搞懂js继承方法

js实现继承，都是些老生常谈的问题了，网上文章很多，但不动手敲一敲，还是没有那种深入的理解，所以写篇日记记一下自己对继承的理解，如果顺便能帮到大家理解如何继承那是再好不过的了。

ゝ一纸荒年。/ 2022年06月17日 09:41/ 0 赞/ 178 阅读

相关 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中继承方式总结

说在前面：为了使代码更为简洁方便理解，本文中的代码均将“非核心实现”部分的代码移出。 -------------------- 一、原型链方式关于原型链，可点

╰+攻爆jí腚メ/ 2022年04月10日 04:57/ 0 赞/ 197 阅读

相关 js继承与实现（总结）

> 之前说要将js继承写完全，好像时间和能力不太允许，所以，将笔记分享给大家，与大家一同学习，一起进步！【转】 [幻天芒][Link 1] ：[https://www.c

秒速五厘米/ 2022年03月16日 08:52/ 0 赞/ 191 阅读

相关 js中字符串方法总结

1：charAt 查找返回指定位置的字符 let str = "js常用字符串方法总结" let str1 = str.charAt(3)

傷城~/ 2021年09月01日 05:56/ 0 赞/ 595 阅读