js对面向对象的支持很弱,所以在ES6之前实现继承会绕比较多的弯(类似于对面向对象支持弱,然后强行拼凑面向对象的特性)
es5中实现继承的几种方式,父类定义为Super
    function Super(name){
this.name=name;
this.age=;
this.array=[,,];
this.obj={a:'prop'};
this.say=function(){
console.log(this.name);
}
}
Super.prototype.testInherit=function(){
console.log('I am method of super prototype')
}
 1.构造函数继承
简单的在子类构造函数调用父类构造函数,类似就是直接把父类构造函数执行一遍,属性拷贝一份过来此种继承方式导致原型链断了,无法实现真正意义上的继承,
child1.testInherit();
这个调用会报错,因为child1并没有在Super的原型链上,导致无法调用其原型的方法;同时因为是拷贝的一份父类的属性方法,所以子类改动引用类型的属性并不会影响其他子类的属性
    function Child1(name){
Super.apply(this,arguments);
this.name=name;
this.sayName=function(){
console.log(this.name);
}
}
var parent=new Super('lucy');
var child1=new Child1('jack');
var child1=new Child1('jack2');
console.log(parent,child1);
console.log(child1.__proto__===Child1.prototype,child1 instanceof Super);//true flase
child1.array.push();
console.log(child1.array,child2.array,s1.array,);
child1.testInherit();
2.使用原型链继承
最基本的思想,把子类的原型设置为父类的实例
   function Child2(name){
this.name=name;
this.sayName=function(){
console.log(this.name);
}
}
var parent=new Super('lucy');
Child2.prototype=parent;
var child1=new Child2('jack');
var child2=new Child2('jack2');
child1.array.push();
child1.obj.b="prop2";
console.log(child1.array,child2.array,child1.obj,child2.obj);
console.log(child1.constructor);
修改一个实例继承的引用属性,可以看到其他所有实例所继承的属性都被修改了(他们引用的都是同一个地址),并且子类实例的构造函数被修改了
前面1和2是继承的两种基本模式,也是其他继承实现的基础
 
3.使用组合继承方式
保证实例继承属性私有化并且保证原型链不断
   function Child3(name){
Super.apply(this,arguments);
this.name=name;
}
var parent=new Super('lucy');
Child3.prototype=parent;
var child1=new Child3('jack');
var child2=new Child3('jack2');
child1.array.push();
console.log(child1.array,child2.array);
console.log(child1.constructor);
 此种方式可以实现继承可以保证原型回溯,同时实例继承的引用类型的属性互不影响;不过父类的构造函数调用了两次,子类的实例的构造函数变成了Super,可以做进一步优化
 
4. 针对上面的组合继承父类的构造函数调用了2次的改进,可以将子类的原型直接设置为父类的原型,如下所示
    function Child4(name){
Super.apply(this,arguments);
this.test=;
}
Child4.prototype=Super.prototype;//改进父类构造函数调用两次问题
Child4.prototype.constructor=Child4;
var child1=new Child4('bob');
var child2=new Child4('bob2');
console.log(child1.__proto__===Child4.prototype);
console.log(child1.__proto__.constructor,'\n',Child4.prototype.constructor,'\n',Super.prototype.constructor); console.log(Super.prototype.constructor); //这种方法改变了父类的构造函数
for(var itm in Child4.prototype){
console.log(itm);
}
    // 或者使用Object.create()创建一个过渡对象--这样子类重新定义构造函数,就能使父类和子类各有自己的构造函数
function Child5(name){
Super.apply(this,arguments);
this.test=;
} Child5.prototype=Object.create(Super.prototype);
Child5.prototype.constructor=Child5;
Object.defineProperty(Child5.prototype,'constructor',{//Child5的原型是一个实例对象,所以显示的定义constructor会改变其不可枚举的特性,这里修正一下
enumerable:false
});
var child=new Child5('end');
console.log(Child5.prototype.constructor,Super.prototype.constructor);
console.log(child instanceof Child5,child instanceof Super);
console.log(child.constructor,Child5.prototype.isPrototypeOf(child),Super.prototype.isPrototypeOf(child));
for(var itm in Child5.prototype){
console.log(itm);
}
5.组合寄生继承模式(js高程中推荐的实现)
其实这种模式跟上面的第4-2的实现没有大的区别,不过上边的中间对象是Object.create()创建的,这里是自己创建
    function inheritProperty(sup,child){
function F(){};
F.prototype=sup.prototype;
var inner=new F();
inner.constructor=child;
child.prototype=inner;
Object.defineProperty(child.prototype,'constructor',{
enumerable:false
});
}
function Child6(name){
this.age=;
this.name=name;
}
inheritProperty(Super,Child6);
Child6.prototype.sayAge=function(){
return this.age;
}
var child=new Child6('end');
console.log(child.constructor);
console.log(Child6.prototype.constructor);
console.log(child.sayAge());

以上继承都是以1,2为基础的,具体说实现继承的方式就这两种,其他只是对这两种的组合改造优化

 

js继承的实现(es5)的更多相关文章

  1. js继承精益求精之寄生式组合继承

    一.混合/组合继承的不足 上一篇JS继承终于混合继承,认真思考一下,发现其还是有不足之处的: 空间上的冗余:在使用原型链的方法继承父类的原型属性(Animal.prototype)的同时,也在子类的原 ...

  2. JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)

    一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...

  3. JS继承的一些见解

    JS继承的一些见解 js在es6之前的继承是五花八门的.而且要在项目中灵活运用面向对象写法也是有点别扭,更多的时候还是觉得面向过程的写法更为简单,效率也高.久而久之对js的继承每隔一段时间就会理解出现 ...

  4. js继承(自备水,这非常干货)

    讲js继承之前,想一想什么是继承? 生活中有很多例子,比方说继承财产,继承女朋友的前男友的前女友 ヽ(ー_ー)ノ ,这些和js继承差不多,但是有一个不一样的地方,就是继承过后,原先的人就没有了,js继 ...

  5. 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends

    说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...

  6. js继承的方式及其优缺点

    js继承方法 前因:ECMAScript不支持接口继承,只支持实现继承 一.原型链 概念:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针,让 ...

  7. 让我们纯手写一个js继承吧

    继承在前端逻辑操作中是比较常见的,今天我们就从零开始写一个js的继承方式 在es5中继承实质上是先创建子类的实例对象,然后再将父类的方法添加到this上Parent.call(this),在es6中则 ...

  8. 简单易懂的JS继承图解

    JS继承的实现方式一共有八种.下面我们来一个一个瞅一下.注意️:文章依据个人理解,难免有问题,还望各位及时指出!!!!! 原型链继承 借用构造函数继承 组合继承 原型式继承 寄生继承 寄生组合式继承 ...

  9. js继承

    js继承有5种实现方式: 继承第一种方式:对象冒充 function Parent(username){ this.username = username; this.hello = function ...

  10. js继承之call,apply和prototype随谈

    在js中,call,apply和prototype都可以实现对象的继承,下面我们看一个例子: function FatherObj1() { this.sayhello = "I am jo ...

随机推荐

  1. HDU1879 继续畅通工程 2017-04-12 19:12 50人阅读 评论(0) 收藏

    继续畅通工程 Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Submis ...

  2. polymer技巧

    1.添加一个div元素 我们完全可以自己造一个这样的东西出来,比如下面例子我们给 div 元素添加一个 is="demo-test" <script> var Poly ...

  3. VR与AR的发展趋势分析

    概要 你是否想象过与神秘的深海生物近距离接触?你是否梦想过穿戴钢铁侠那样的超先进科技装备成为超级英雄?你又是否幻想过与梦中的女神面对面的交流?这些可能在以前都只能是存在于脑海中的幻想,可是在如今有一项 ...

  4. SQL多行字符串按条件合并

    USE [ARTEA.MES]GO /****** Object: UserDefinedFunction [dbo].[UnionPart] Script Date: 11/18/2015 15:3 ...

  5. django系列8.1--django的中间件01 自定义中间件的5个方法

    一.Django中的中间件 Django中间件定义: Middleware is a framework of hooks into Django's request/response process ...

  6. 正则表达式的Wed验证应用(40)

    电子邮件地址的校验 <?php /* 校验邮件地址*/ function checkMail($email) { //用户名,由“\w”格式字符.“-”或“.”组成 $email_name= & ...

  7. JAVA日期——java.util.date类的操作

    package com.hxzy.time; import java.text.SimpleDateFormat;import java.util.Date; public class DateDem ...

  8. Python FLask Web 学习笔记:jinjia2的使用方法1

    # coding:utf-8 from jinja2 import Template x = """ <p>大爷的孙子</p> <ul> ...

  9. K:java中的安全模型(沙箱机制)

    本博文整合自:Java安全--理解Java沙箱.Java 安全模型介绍.Java的沙箱机制原理入门 相关介绍:  我们都知道,程序员编写一个Java程序,默认的情况下可以访问该机器的任意资源,比如读取 ...

  10. java爬虫中jsoup的使用

    jsoup可以用来解析HTML的内容,其功能非常强大,它可以向javascript那样直接从网页中提取有用的信息 例如1: 从html字符串中解析数据 //直接从字符串中获取 public stati ...