今天小編要跟大家分享的文章是關(guān)于Javascript繼承的常用4種方法。相信很多學(xué)習(xí)web前端開發(fā)技術(shù)的小伙伴在學(xué)習(xí)前端開發(fā)的javascript部分的時候，在面向?qū)ο蟮牟糠志秃茈y走下去了，主要的原因還是邏輯更加復(fù)雜了，需要理解的內(nèi)容比直觀的開發(fā)布局難一點。
成都創(chuàng)新互聯(lián)專注于網(wǎng)站建設(shè)，為客戶提供成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計開發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗，各類網(wǎng)站都可以開發(fā)，品牌網(wǎng)站設(shè)計，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計，建網(wǎng)站費用，建網(wǎng)站多少錢，價格優(yōu)惠，收費合理。
在面向?qū)ο缶幊汤?，封裝和繼承是比較重要的，這中間，繼承是相對而言比較難理解的，因為javascript的繼承方式比較多，也有不同的優(yōu)缺點。今天小編為大家?guī)磉@篇文章就是來和大家一起說一說Javascript繼承的常用4種方法，希望能夠?qū)δ阌兴鶐椭?/p>
1、原型鏈繼承
核心：將父類的實例作為子類的原型
缺點：父類新增原型方法/原型屬性，子類都能訪問到，父類一變其它的都變了
2、構(gòu)造繼承
基本思想
借用構(gòu)造函數(shù)的基本思想就是利用call或者apply把父類中通過this指定的屬性和方法復(fù)制(借用)到子類創(chuàng)建的實例中。
因為this對象是在運行時基于函數(shù)的執(zhí)行環(huán)境綁定的。也就是說，在全局中，this等于window，而當(dāng)函數(shù)被作為某個對象的方法調(diào)用時，this等于那個對象。
call、apply方法可將一個函數(shù)的對象上下文從初始的上下文改變?yōu)橛蓆hisObj指定的新對象。
所以，這個借用構(gòu)造函數(shù)就是，new對象的時候(new創(chuàng)建的時候，this指向創(chuàng)建的這個實例)，創(chuàng)建了一個新的實例對象，并且執(zhí)行Parent里面的代碼，而Parent里面用call調(diào)用了Person，也就是說把this指向改成了指向新的實例，所以就會把Person里面的this相關(guān)屬性和方法賦值到新的實例上，而不是賦值到Person上面,所以所有實例中就擁有了父類定義的這些this的屬性和方法。
因為屬性是綁定到this上面的，所以調(diào)用的時候才賦到相應(yīng)的實例中，各個實例的值就不會互相影響了。
核心：使用父類的構(gòu)造函數(shù)來增強子類實例，等于是復(fù)制父類的實例屬性給子類(沒用到原型)
缺點：方法都在構(gòu)造函數(shù)中定義，
只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法，無法實現(xiàn)函數(shù)復(fù)用，每個子類都有父類實例函數(shù)的副本，影響性能
3、組合繼承
組合繼承(所有的實例都能擁有自己的屬性，并且可以使用相同的方法，組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷，結(jié)合了兩個的優(yōu)點，是最常用的繼承方式)
核心：通過調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點，然后再通過將父類實例作為子類原型，實現(xiàn)函數(shù)復(fù)用
缺點：調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實例(子類實例將子類原型上的那份屏蔽了)
4、寄生組合繼承
核心：通過寄生方式，砍掉父類的實例屬性，這樣，在調(diào)用兩次父類的構(gòu)造的時候，就不會初始化兩次實例方法/屬性，避免的組合繼承的缺點
缺點：堪稱完美，但實現(xiàn)較為復(fù)雜
以上就是小編今天為大家分享的關(guān)于web前端學(xué)習(xí)之Javascript繼承的常用4種方法的文章，希望本篇文章能夠?qū)φ趯W(xué)習(xí)web前端技術(shù)的小伙伴們有所幫助。想要了解更多web前端知識記得關(guān)注北大青鳥web培訓(xùn)官網(wǎng)。
文章轉(zhuǎn)載自公眾號：前端研究所
今天小編要跟大家分享的文章是關(guān)于學(xué)習(xí)web前端要知道的JavaScript基礎(chǔ)語法規(guī)則。俗話說，“無規(guī)矩不成方圓”。用在計算機語言上也同樣使用。每種計算機語言都有自己的語法規(guī)則，只有遵循語法規(guī)則才能寫出符合要求的代碼。JavaScript也不例外，在使用JavaScript語言時，需要遵循某些語法規(guī)則，如執(zhí)行順序、大寫和注釋規(guī)范。下面我們就以來介紹下，JavaScript基礎(chǔ)語法規(guī)則。
1.按從上到下的順序執(zhí)行
JavaScript程序按照在HTML文檔中的排列順序逐行執(zhí)行。如果代碼(例如函數(shù)、全局變量等)需要在整個HTML文件中使用，最好將這些代碼放在HTML文件的標記中。
2.區(qū)分大小寫字母
JavaScript嚴格區(qū)分字母大小寫。也就是說，在輸入關(guān)鍵字、函數(shù)名、變量以及其他標識符時，都必須采用正確的大小寫形式。例如，變量username與變量UserName是兩個不同的變量。
3.每行結(jié)尾的分號可有可無
JavaScript語言并不要求必須以分號“;”"作為語句的結(jié)束標記。如果語句的結(jié)束處沒有分，JavaScript會自動將該行代碼的結(jié)尾作為整個語句的結(jié)束。例如，下面兩行示例代碼，雖然第一行代碼結(jié)尾沒有寫分號，但也是正確的。(注意：書寫JavaScript代碼時，為了保證代碼的嚴謹性、準確性，最好在每行代碼的結(jié)尾加上分號。)
alert
alert
4、注釋規(guī)范
使用JavaScript時，為了使代碼易于閱讀，需要為
JavaScript代碼加一些注釋。JavaScript代碼注釋和CSS代碼注釋方式相同，也分為單行注釋和多行注釋，示例代碼如下：
//我是單行注釋
/*
我是多行注釋1
我是多行注釋2
我是多行注釋3
*/
以上就是小編今天為大家分享的關(guān)于學(xué)習(xí)web前端要知道的JavaScript基礎(chǔ)語法規(guī)則的文章，希望本篇文章能夠?qū)φ趶氖聲嬒嚓P(guān)工作的小伙伴們有所幫助。想要了解更多會計相關(guān)知識記得關(guān)注北大青鳥web培訓(xùn)官網(wǎng)。最后祝愿小伙伴們工作順利成為一名優(yōu)秀的web前端工程師！
今天小編要跟大家分享的文章是關(guān)于Web前端工程師應(yīng)該知道的JavaScript使用小技巧。任何一門技術(shù)在實際中都會有一些屬于自己的小技巧。同樣的，在使用JavaScript時也有一些自己的小技巧，只不過很多時候有可能容易被大家忽略。而在互聯(lián)網(wǎng)上，時不時的有很多同行朋友會總結(jié)(或收集)一些這方面的小技巧。
今天在這篇文章中，小編會整理一些大家熟悉或不熟悉的有關(guān)于JavaScript的小技巧，希望能夠?qū)Υ蠹业膶W(xué)習(xí)和工作有所幫助。
一、數(shù)組
先來看使用數(shù)組中常用的一些小技巧。
01、數(shù)組去重
ES6提供了幾種簡潔的數(shù)組去重的方法，但該方法并不適合處理非基本類型的數(shù)組。對于基本類型的數(shù)組去重，可以使用...new
Set()來過濾掉數(shù)組中重復(fù)的值，創(chuàng)建一個只有唯一值的新數(shù)組。
constarray=[1,1,2,3,5,5,1]
constuniqueArray=[...newSet(array)];
console.log(uniqueArray);
Result:(4)[1,2,3,5]
這是ES6中的新特性，在ES6之前，要實現(xiàn)同樣的效果，我們需要使用更多的代碼。該技巧適用于包含基本類型的數(shù)組：undefined、null、boolean、string和number。如果數(shù)組中包含了一個object,function或其他數(shù)組，那就需要使用另一種方法。
除了上面的方法之外，還可以使用Array.from(newSet())來實現(xiàn)：
constarray=[1,1,2,3,5,5,1]
Array.from(newSet(array))
Result:(4)[1,2,3,5]
另外，還可以使用Array的.filter及indexOf()來實現(xiàn)：
constarray=[1,1,2,3,5,5,1]
array.filter((arr,index)=array.indexOf(arr)===index)
Result:(4)[1,2,3,5]
注意，indexOf()方法將返回數(shù)組中第一個出現(xiàn)的數(shù)組項。這就是為什么我們可以在每次迭代中將indexOf()方法返回的索引與當(dāng)索索引進行比較，以確定當(dāng)前項是否重復(fù)。
02、確保數(shù)組的長度
在處理網(wǎng)格結(jié)構(gòu)時，如果原始數(shù)據(jù)每行的長度不相等，就需要重新創(chuàng)建該數(shù)據(jù)。為了確保每行的數(shù)據(jù)長度相等，可以使用Array.fill來處理：
letarray=Array(5).fill('');
console.log(array);
Result:(5)["","","","",""]
03、數(shù)組映射
不使用Array.map來映射數(shù)組值的方法。
constarray=[
{
ame:'大漠',
email:'w3cplus@#'
},
{
ame:'Airen',
email:'airen@#'
}
]
constname=Array.from(array,({name})=name)
Result:(2)["大漠","Airen"]
04、數(shù)組截斷
如果你想從數(shù)組末尾刪除值(刪除數(shù)組中的最后一項)，有比使用splice()更快的替代方法。
例如，你知道原始數(shù)組的大小，可以重新定義數(shù)組的length屬性的值，就可以實現(xiàn)從數(shù)組末尾刪除值：
letarray=[0,1,2,3,4,5,6,7,8,9]
console.log(array.length)
Result:10
array.length=4
console.log(array)
Result:(4)[0,1,2,3]
這是一個特別簡潔的解決方案。但是，slice()方法運行更快，性能更好：
letarray=[0,1,2,3,4,5,6,7,8,9];
array=array.slice(0,4);
console.log(array);
Result:[0,1,2,3]
05、過濾掉數(shù)組中的falsy值
如果你想過濾數(shù)組中的falsy值，比如0、undefined、null、false，那么可以通過map和filter方法實現(xiàn)：
constarray=[0,1,'0','1','大漠','#',undefined,true,false,null,'undefined','null',NaN,'NaN','1'+0]
array.map(item={
returnitem
}).filter(Boolean)
Result:(10)[1,"0","1","大漠","#",true,"undefined","null","NaN","10"]
06、獲取數(shù)組的最后一項
數(shù)組的slice()取值為正值時，從數(shù)組的開始處截取數(shù)組的項，如果取值為負整數(shù)時，可以從數(shù)組末屬開始獲取數(shù)組項。
letarray=[1,2,3,4,5,6,7]
constfirstArrayVal=array.slice(0,1)
Result:[1]
constlastArrayVal=array.slice(-1)
Result:[7]
console.log(array.slice(1))
Result:(6)[2,3,4,5,6,7]
console.log(array.slice(array.length))
Result:[]
正如上面示例所示，使用array.slice(-1)獲取數(shù)組的最后一項，除此之外還可以使用下面的方式來獲取數(shù)組的最后一項：
console.log(array.slice(array.length-1))
Result:[7]
07、過濾并排序字符串列表
你可能有一個很多名字組成的列表，需要過濾掉重復(fù)的名字并按字母表將其排序。
在我們的例子里準備用不同版本語言的JavaScript
保留字的列表，但是你能發(fā)現(xiàn)，有很多重復(fù)的關(guān)鍵字而且它們并沒有按字母表順序排列。所以這是一個完美的字符串列表(數(shù)組)來測試我們的JavaScript小知識。
varkeywords=['do','if','in','for','new','try','var','case','else','enum','null','this','true','void','with','break','catch','class','const','false','super','throw','while','delete','export','import','return','switch','typeof','default','extends','finally','continue','debugger','function','do','if','in','for','int','new','try','var','byte','case','char','else','enum','goto','long','null','this','true','void','with','break','catch','class','const','false','final','float','short','super','throw','while','delete','double','export','import','native','public','return','static','switch','throws','typeof','boolean','default','extends','finally','package','private','abstract','continue','debugger','function','volatile','interface','protected','transient','implements','instanceof','synchronized','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof','do','if','in','for','let','new','try','var','case','else','enum','eval','null','this','true','void','with','await','break','catch','class','const','false','super','throw','while','yield','delete','export','import','public','return','static','switch','typeof','default','extends','finally','package','private','continue','debugger','function','arguments','interface','protected','implements','instanceof'];
因為我們不想改變我們的原始列表，所以我們準備用高階函數(shù)叫做filter，它將基于我們傳遞的回調(diào)方法返回一個新的過濾后的數(shù)組?；卣{(diào)方法將比較當(dāng)前關(guān)鍵字在原始列表里的索引和新列表中的索引，僅當(dāng)索引匹配時將當(dāng)前關(guān)鍵字push到新數(shù)組。
最后我們準備使用sort方法排序過濾后的列表，sort只接受一個比較方法作為參數(shù)，并返回按字母表排序后的列表。
在ES6下使用箭頭函數(shù)看起來更簡單:
constfilteredAndSortedKeywords=keywords
.filter((keyword,index)=keywords.lastIndexOf(keyword)===index)
.sort((a,b)=a
這是最后過濾和排序后的JavaScript保留字列表：
console.log(filteredAndSortedKeywords);
Result:['abstract','arguments','await','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete','do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import','in','instanceof','int','interface','let','long','native','new','null','package','private','protected','public','return','short','static','super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield']
08、清空數(shù)組
如果你定義了一個數(shù)組，然后你想清空它。通常，你會這樣做：
letarray=[1,2,3,4];
functionemptyArray(){
array=[];
}
emptyArray();
但是，這有一個效率更高的方法來清空數(shù)組。你可以這樣寫:
letarray=[1,2,3,4];
functionemptyArray(){
array.length=0;
}
emptyArray();
09、拍平多維數(shù)組
使用...運算符，將多維數(shù)組拍平：
10、從數(shù)組中獲取最大值和最小值
可以使用Math.max和Math.min取出數(shù)組中的最大小值和最小值：
constnumbers=[15,80,-9,90,-99]
constmaxInNumbers=Math.max.apply(Math,numbers)
constminInNumbers=Math.min.apply(Math,numbers)
console.log(maxInNumbers)
Result:90
console.log(minInNumbers)
Result:-99
另外還可以使用ES6的...運算符來完成：
constnumbers=[1,2,3,4];
Math.max(...numbers)
Result:4
Math.min(...numbers)
Result:1
二、對象
在操作對象時也有一些小技巧。
01、使用...運算符合并對象或數(shù)組中的對象
同樣使用ES的...運算符可以替代人工操作，合并對象或者合并數(shù)組中的對象。
//合并對象
constobj1={
ame:'大漠',
url:'#'
}
constobj2={
ame:'airen',
age:30
}
constmergingObj={...obj1,...obj2}
Result:{name:"airen",url:"#",age:30}
//合并數(shù)組中的對象
constarray=[
{
ame:'大漠',
email:'w3cplus@#'
},
{
ame:'Airen',
email:'airen@#'
}
]
constresult=array.reduce((accumulator,item)={
return{
...accumulator,
[item.name]:item.email
}
},{})
Result:{大漠:"w3cplus@#",Airen:"airen@#"}
02、有條件的添加對象屬性
不再需要根據(jù)一個條件創(chuàng)建兩個不同的對象，以使它具有特定的屬性。為此，使用...操作符是最簡單的。
constgetUser=(emailIncluded)={
return{
ame:'大漠',
blog:'w3cplus',
...emailIncluded{email:'w3cplus@#'}
}
}
constuser=getUser(true)
console.log(user)
Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}
constuserWithoutEmail=getUser(false)
console.log(userWithoutEmail)
Result:{name:"大漠",blog:"w3cplus"}
03、解構(gòu)原始數(shù)據(jù)
你可以在使用數(shù)據(jù)的時候，把所有數(shù)據(jù)都放在一個對象中。同時想在這個數(shù)據(jù)對象中獲取自己想要的數(shù)據(jù)。
在這里可以使用ES6的Destructuring特性來實現(xiàn)。比如你想把下面這個obj中的數(shù)據(jù)分成兩個部分：
constobj={
ame:'大漠',
blog:'w3cplus',
email:'w3cplus@#',
joined:'2019-06-19',
followers:45
}
letuser={},userDetails={}
({name:user.name,email:user.email,...userDetails}=obj)
{name:"大漠",blog:"w3cplus",email:"w3cplus@#",joined:"2019-06-19",followers:45}
console.log(user)
Result:{name:"大漠",email:"w3cplus@#"}
console.log(userDetails)
Result:{blog:"w3cplus",joined:"2019-06-19",followers:45}
04、動態(tài)更改對象的key
在過去，我們首先必須聲明一個對象，然后在需要動態(tài)屬性名的情況下分配一個屬性。在以前，這是不可能以聲明的方式實現(xiàn)的。不過在ES6中，我們可以實現(xiàn)：
constdynamicKey='email'
letobj={
ame:'大漠',
blog:'w3cplus',
[dynamicKey]:'w3cplus@#'
}
console.log(obj)
Result:{name:"大漠",blog:"w3cplus",email:"w3cplus@#"}
05、判斷對象的數(shù)據(jù)類型
使用Object.prototype.toString配合閉包來實現(xiàn)對象數(shù)據(jù)類型的判斷：
constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)
constisArray=isType('Array')([1,2,3])
console.log(isArray)
Result:true
上面的代碼相當(dāng)于：
functionisType(type){
returnfunction(target){
return`[object${type}]`===Object.prototype.toString.call(target)
}
}
isType('Array')([1,2,3])
Result:true
或者：
constisType=type=target=`[object${type}]`===Object.prototype.toString.call(target)
constisString=isType('String')
constres=isString(('1'))
console.log(res)
Result:true
06、檢查某對象是否有某屬性
當(dāng)你需要檢查某屬性是否存在于一個對象，你可能會這樣做：
varobj={
ame:'大漠'
}
if(obj.name){
console.l
今天小編要跟大家分享的文章是關(guān)于Web前端新手應(yīng)該知道的JavaScript開發(fā)技巧有哪些?熟悉Web前端的小伙伴都知道，Javascript
的很多擴展的特性是的它變得更加的犀利，同時也給予程序員機會創(chuàng)建更漂亮并且更讓用戶喜歡的網(wǎng)站。
盡管很多的開發(fā)人員都樂于頌揚javascript，但是仍舊有人看到它的陰暗面。
使用很多javascript代碼的Web頁面會加載很慢，過多的使用javascript使得網(wǎng)頁丑陋和拖沓。很快如何有效地使用
javascript成為一個非?；馃岬脑掝}。
今天小編就為Web前端新手準備了這篇JavaScript開發(fā)技巧，希望能夠?qū)δ阌兴鶐椭?，下面我們一起來看一看?
1、盡可能的保持代碼簡潔
可能大家都聽到過了N遍這個代碼簡潔問題了。作為一個開發(fā)人員你可能在你的代碼開發(fā)過程中使用了很多次，但千萬不要在js開發(fā)中忘記這點。
§盡量在開發(fā)模式中添加注釋和空格，這樣保持代碼的可讀性
§在發(fā)布到產(chǎn)品環(huán)境前請將空格和注釋都刪除，并且盡量縮寫變量和方法名
§使用第三方工具幫助你實現(xiàn)壓縮javascript。
2、思考后再修改prototypes
添加新的屬性到對象prototype中是導(dǎo)致腳本出錯的常見原因。
yourObject.prototype.anotherFunction='Hello';
yourObject.prototype.anotherMethod=function(){...}
在上面代碼中，所有的變量都會被影響，因為他們都繼承于yourObject。這樣的使用會導(dǎo)致意想不到的行為。所以建議在使用完后刪除類似的修改。
yourObject.prototype.anotherFunction='Hello';
yourObject.prototype.anotherMethod=function(){};
test.anotherMethod();
deleteyourObject.prototype.anotherFunction='Hello';
deleteyourObject.prototype.anotherMethod=function(){};
3、DebugJavascript代碼
即使最好的開發(fā)人員都會犯錯。為了最大化的減少類似錯誤，請在你的debugger中運行你的代碼，確認你沒有遇到任何細微的錯誤。
4、避免Eval
你的JS在沒有eval方法的時候也可以很好的工作。eval允許訪問javascript編譯器。如果一個字符串作為參數(shù)傳遞到
eval，那么它的結(jié)果可以被執(zhí)行。
這會很大的降低代碼的性能。盡量避免在產(chǎn)品環(huán)境中使用eval。
5、最小化DOM訪問
DOM是最復(fù)雜的API，會使得代碼執(zhí)行過程變慢。有時候Web頁面可能沒有加載或者加載不完整。最好避免DOM。
6、在使用javascript類庫之前先學(xué)習(xí)javascript
互聯(lián)網(wǎng)充斥著很多的javascript類庫，很多程序員都往往使用js類庫而不理解負面影響。強烈建議你在使用第三方類庫之前學(xué)習(xí)基本的JS
代碼，否則，你就準備著倒霉吧。
7、不要用“SetTimeOut”和“Setinterval”方法來作為“Eval”的備選
setTimeOut("document.getID('value')",3000);
在以上代碼中document.getID(‘value’)在setTimeOut方法中被作為字符串來處理。這類似于eval
方法，在每個代碼執(zhí)行中來執(zhí)行一個字符串，因此會降低性能，因此，建議在這些方法中傳遞一個方法。
setTimeOut(yourFunction,3000);
8、[]比newArray();更好
一個常犯的錯誤在于使用當(dāng)需要數(shù)組的時候使用一個對象或者該使用對象的時候使用一個數(shù)組。但是使用原則很簡單：
“當(dāng)屬性名稱是小的連續(xù)整數(shù)，你應(yīng)該使用數(shù)組。否則，使用一個對象”_DouglasCrockford,JavaScript:Good
Parts的作者.
建議：
vara=['1A','2B'];
避免：
vara=newArray();
a[0]="1A";
a[1]="2B";
9、盡量不要多次使用var
在初始每一個變量的時候，程序員都習(xí)慣使用var關(guān)鍵字。相反，建議你使用逗號來避免多余的關(guān)鍵字，并且減少代碼體積。如下：
varvariableOne='string1',
variableTwo='string2',
variableThree='string3';
10、不要忽略分號“;”
這往往是大家花費數(shù)個小時進行debug的原因之一。
我很確信你肯定也在其它的文章中閱讀過以上相關(guān)的內(nèi)容，但是大家可能往往都忽略了很多基本的規(guī)則。你是不是也曾經(jīng)忽略過分號。是不是也遇到過eval
關(guān)鍵字問題導(dǎo)致性能問題?
以上就是小編今天為大家分享的關(guān)于Web前端新手應(yīng)該知道的JavaScript
開發(fā)技巧有哪些?的文章，希望本篇文章能夠?qū)倓偨佑|Web前端行業(yè)的新手們有所幫助。想要了解更多Web前端知識記得關(guān)注北大青鳥Web前端培訓(xùn)官網(wǎng)!
*聲明：內(nèi)容與圖片均來源于網(wǎng)絡(luò)(部分內(nèi)容有修改)，版權(quán)歸原作者所有，如來源信息有誤或侵犯權(quán)益，請聯(lián)系我們刪除或授權(quán)事宜。
重慶分公司
重慶分公司
