整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
承是面向对象编程中又一非常重要的概念，JavaScript支持实现继承，不支持接口继承，实现继承主要依靠原型链来实现的!下面就来介绍下javascript存在的继承方式！
原型链：
原型链继承基本思想就是让一个原型对象指向另一个类型的实例。
代码定义了两个类型SuperType和SubType，每个类型分别有一个属性和一个方法，SubType继承了SuperType，而继承是通过创建SuperType的实例，并将该实例赋给SubType.prototype实现的
实现的本质是重写原型对象,代之以一个新类型的实例，那么存在SuperType的实例中的所有属性和方法，现在也存在于SubType.prototype中了
我们知道，在创建一个实例的时候，实例对象中会有一个内部指针指向创建它的原型，进行关联起来，在这里代码 SubType.prototype=new SuperType() ，也会在SubType.prototype创建一个内部指针，将SubType.prototype与SuperType关联起来
所以instance指向SubType的原型，SubType的原型又指向SuperType的原型，继而在instance在调用getSuperValue()方法的时候，会顺着这条链一直往上找
添加方法:
在给SubType原型添加方法的时候，如果，父类上也有同样的名字，SubType将会覆盖这个方法，达到重新的目的。 但是这个方法依然存在于父类中
记住不能以字面量的形式添加，因为，上面说过通过实例继承本质上就是重写，再使用字面量形式，又是一次重写了，但这次重写没有跟父类有任何关联，所以就会导致原型链截断
问题：
单纯的使用原型链继承，主要问题来自包含引用类型值的原型。
在SuperType构造函数定义了一个colors属性，当SubType通过原型链继承后，这个属性就会出现SubType.prototype中，就跟专门创建了SubType.prototype.colors一样，所以会导致SubType的所有实例都会共享这个属性，所以instance1修改colors这个引用类型值，也会反映到instance2中
借用构造函数：
此方法为了解决原型中包含引用类型值所带来的问题
这种方法的思想就是在子类构造函数的内部调用父类构造函数，可以借助apply()和call()方法来改变对象的执行上下文
在新建SubType实例是调用了SuperType构造函数，这样以来，就会在新SubType对象上执行SuperType函数中定义的所有对象初始化代码
结果，SubType的每个实例就会具有自己的colors属性的副本了
传递参数：
借助构造函数还有一个优势就是可以传递参数
组合继承(原型链+构造函数)
组合继承是将原型链继承和构造函数结合起来，从而发挥二者之长的一种模式
思路就是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性
这种模式避免了原型链和构造函数继承的缺陷，融合了他们的优点，是最常用的一种继承模式
原型式继承：
借助原型可以基于已有的对象创建新对象，同时还不必因此创建自定义类型
在object函数内部，先创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例
本质上来说，object对传入其中的对象执行了一次浅复制
这种模式要去你必须有一个对象作为另一个对象的基础
在这个例子中，person作为另一个对象的基础，把person传入object中，该函数就会返回一个新的对象
这个新对象将person作为原型，所以它的原型中就包含一个基本类型和一个引用类型
所以意味着如果还有另外一个对象关联了person，anotherPerson修改数组friends的时候，也会体现在这个对象中
三部分 附录（因为暂时不支持插入超链接所以部分内容无法显示）
附录一 DIV命名规范
附录二 CSS精灵
a {
display:block;
width:200px;
height:65px;
line-height:65px; /*定义状态*/
text-indent:-2015px; /*隐藏文字*/
background-image:url(button.png); /*定义背景图片*/
background-position:0 0;
/*定义链接的普通状态，此时图像显示的是顶上的部分*/
}
a:hover {
background-position:0 -66px;
/*定义链接的滑过状态，此时显示的为中间部分，向下取负值*/
}
a:active {
background-position:0 -132px;
/*定 义链接的普通状态，此时显示的是底部的部分，向下取负值*/
}
附录三 一些tips解决方案
页面优化实践
写DIV+CSS 的一些常识
常用代码片段
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
margin:0; padding:0;
}
body {
background:#fff;
color:#555;
font-size:14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td,
th,
caption {
font-size:14px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight:normal;
font-size:100%;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
a {
color:#555;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
img {
border:none;
}
ol,ul,li {
list-style:none;
}
input,
textarea,
select,
button {
font:14px Verdana,Helvetica,Arial,sans-serif;
}
table {
border-collapse:collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height:0;
clear:both;
visibility: hidden;
}
.clearfix {
*zoom:1;
}
<meta name=”viewport” content=”width=320,target-densitydpi=dpi_value,initial-scale=1, user-scalable=no”/>
table-layout: fixed; word-break: break-all;;border-collapse: collapse
<div id=”abc” style=”display:table;text-align:center;width:100%;height:100%;”> <span style=”background:#f00; display:table-cell; vertical-align:middle;”> <input type=”button” value=”item1″ /> </span> </div>
filter:alpha(opacity=50); /*1-100*/ -moz-opacity:0.5; /*0-1.0*/ -khtml-opacity:0.5; /*0-1.0*/ opacity:0.5; /*0-1.0*/
white-space:nowrap; text-overflow:ellipsis; overflow:hidden;
.fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}
一些总结
一些概念
学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！
承（inheritance）是面向对象软件技术当中的一个概念。
如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”
继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码
在子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能
虽然JavaScript并不是真正的面向对象语言，但它天生的灵活性，使应用场景更加丰富
关于继承，我们举个形象的例子：
定义一个类（Class）叫汽车，汽车的属性包括颜色、轮胎、品牌、速度、排气量等
class Car{
constructor(color,speed){
this.color=color
this.speed=speed
// ...
}
}由汽车这个类可以派生出“轿车”和“货车”两个类，在汽车的基础属性上，为轿车添加一个后备厢、给货车添加一个大货箱
// 货车
class Truck extends Car{
constructor(color,speed){
super(color,speed)
this.Container=true // 货箱
}
}这样轿车和货车就是不一样的，但是二者都属于汽车这个类，汽车、轿车继承了汽车的属性，而不需要再次在“轿车”中定义汽车已经有的属性
在“轿车”继承“汽车”的同时，也可以重新定义汽车的某些属性，并重写或覆盖某些属性和方法，使其获得与“汽车”这个父类不同的属性和方法
class Truck extends Car{
constructor(color,speed){
super(color,speed)
this.color="black" //覆盖
this.Container=true // 货箱
}
}从这个例子中就能详细说明汽车、轿车以及卡车之间的继承关系
下面给出JavaScripy常见的继承方式：
*请认真填写需求信息，我们会在24小时内与您取得联系。
