整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
承是面向對象編程中又一非常重要的概念，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小時內與您取得聯系。
