Web前端開發(fā)工程師是一個(gè)很新的職業(yè)睁枕，是從事Web前端開發(fā)工作的工程師。主要進(jìn)行網(wǎng)站開發(fā)沸手，優(yōu)化外遇，完善的工作。網(wǎng)頁制作是Web 1.0時(shí)代的產(chǎn)物契吉，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的跳仿，用戶使用網(wǎng)站的行為也以瀏覽為主。
給你學(xué)習(xí)路線捐晶，html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd
前言
本篇文章比較適合3年以上的前端工作者菲语，JS三座大山分別指：原型與原型鏈，作用域及閉包惑灵，異步和單線程山上。
小編推薦一個(gè)學(xué)Web前端的學(xué)習(xí)裙【 五四七，三零二英支，三八三 】胶哲，無論你是大牛還是小白，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)潭辈！裙內(nèi)有開發(fā)工具鸯屿，很多干貨和技術(shù)資料分享！
原型與原型鏈
說到原型把敢，就不得不提一下構(gòu)造函數(shù)寄摆，首先我們看下面一個(gè)簡單的例子：
function Dog(name,age){ this.name = name; this.age = age;}let dog1 = new Dog("哈士奇",3);let dog2 = new Dog("泰迪",2);
首先創(chuàng)造空的對象，再讓this指向這個(gè)對象修赞，通過this.name進(jìn)行賦值婶恼，最終返回this，這其實(shí)也是new 一個(gè)對象的過程柏副。
其實(shí)： let obj = {} 是 let obj = new Object()的語法糖勾邦； let arr = [] 是 let arr = new Array()的語法糖； function Dog(){...} 是 let Dog = new Fucntion()的語法糖割择。
那什么是原型那眷篇？在js中，所有對象都是Object的實(shí)例荔泳，并繼承Object.prototype的屬性和方法蕉饼，但是有一些是隱性的。
我們來看一下原型的規(guī)則：
1.所有的引用類型（包括數(shù)組玛歌，對象昧港，函數(shù)）都具有對象特性；可自由擴(kuò)展屬性支子。
var obj = {};obj.attribute = "三座大山";var arr = [];arr.attribute = "三座大山";function fn1 () {}fn1.attribute = "三座大山";
2.所有的引用類型（包括數(shù)組创肥，對象，函數(shù)）都有隱性原型屬性（__proto__）,值也是一個(gè)普通的對象值朋。
console.log(obj.__proto__);
3.所有的函數(shù)叹侄，都有一個(gè)prototype屬性，值也是一個(gè)普通的對象吞歼。
console.log(obj.prototype);
4.所有的引用類型的__proto__屬性值都指向構(gòu)造函數(shù)的prototype屬性值圈膏。
console.log(obj.__proto__ === Object.prototype); // true
5.當(dāng)試圖獲取對象屬性時(shí)，如果對象本身沒有這個(gè)屬性篙骡，那就會去他的__proto__（prototype）中去尋找稽坤。
function Dog(name){ this.name = name;}Dog.prototype.callName = function (){ console.log(this.name,"wang wang");}let dog1 = new Dog("Three Mountain");dog1.printName = function (){ console.log(this.name);}dog1.callName(); // Three Mountain wang wangdog1.printName(); // Three Mountain
原型鏈：如下圖。
小編推薦一個(gè)學(xué)Web前端的學(xué)習(xí)裙【 五四七糯俗，三零二尿褪，三八三 】，無論你是大牛還是小白得湘，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)杖玲！裙內(nèi)有開發(fā)工具，很多干貨和技術(shù)資料分享淘正！
我找一個(gè)屬性摆马，首先會在f.__proto__中去找臼闻，因?yàn)閷傩灾禐橐粋€(gè)對象，那么就會去f.__proto__.__proto__去找囤采，同理如果還沒找到述呐，就會一直向上去查找，直到結(jié)果為null為止蕉毯。這個(gè)串起來的鏈即為原型鏈乓搬。
作用域及閉包
講到作用域，你會想到什么代虾？當(dāng)然是執(zhí)行上下文进肯。每個(gè)函數(shù)都有自己執(zhí)行上下文的excution context，和variable object棉磨。這些環(huán)境用于儲存上下文中的變量江掩，函數(shù)聲明，參數(shù)等含蓉。只有函數(shù)才能制造作用域频敛。
PS：for if else 不能創(chuàng)造作用域。
console.log(a) ; // undefinedvar a = 1;//可理解為var a;console.log(a); // undefineda = 1;
執(zhí)行console.log時(shí)馅扣，a只是被聲明出來斟赚，并沒有賦值；所以結(jié)果當(dāng)然是undefined差油。
this
本質(zhì)上來說拗军，在js里this是一個(gè)指向函數(shù)執(zhí)行環(huán)境的指針。this永遠(yuǎn)指向最后調(diào)用它的對象蓄喇，并且在執(zhí)行時(shí)才能獲取值发侵，定義是無法確認(rèn)他的值。
var a = { name : "A", fn : function （）{ console.log (this.name) } } a.fn() // this === aa 調(diào)用了fn() 所以此時(shí)this為aa.fn.call ({name : "B"}) // this === {name : "B"}使用call(),將this的值指定為{name:"B"}var fn1 = a.fn fn1() // this === window雖然指定fn1 = a.fn刃鳄，但是調(diào)用是有window調(diào)用，所以this 為window
this有多種使用場景钱骂，下面我會主要介紹4個(gè)使用場景：
1.作為構(gòu)造函數(shù)執(zhí)行
function Student(name,age) { this.name = name // this === sthis.age = age // this === s//return this}var s = new Student("py1988",30)
首先new 字段會創(chuàng)建一個(gè)空的對象叔锐，然后調(diào)用apply()函數(shù)，將this指向這個(gè)空對象见秽。這樣的話愉烙，函數(shù)內(nèi)部的this就會被空對象代替。
2.作為普通函數(shù)執(zhí)行
function fn () { console.log (this) // this === window}fn ()
3.作為對象屬性執(zhí)行
var obj = { name : "A", printName : function () { console.log (this.name) // this === obj }}obj.printName ()
4.call(),apply(),bind()
三個(gè)函數(shù)可以修改this的指向解取，具體請往下看：
var name = "小明" , age = "17"var obj = { name : "安妮", objAge : this.age, fun : function () { console.log ( this.name + "今年" + this.age ) }}console.log(obj.objAge) // 17 obj.fun() // 安妮今年undefined
var name = "小明" , age = "17" var obj = { name : "安妮", objAge ：this.age, fun : function (like,dislike) { console.log (this.name + "今年" + this.age 步责，"喜歡吃" + like + "不喜歡吃" + dislike) } } var a = { name : "Jay", age : 23 } obj.fun.call(a,"蘋果","香蕉") // Jay今年23 喜歡吃蘋果不喜歡吃香蕉obj.fun.apply(a,["蘋果","香蕉"]) // Jay今年23 喜歡吃蘋果不喜歡吃香蕉obj.fun.bind(a,"蘋果","香蕉")() // Jay今年23 喜歡吃蘋果不喜歡吃香蕉
首先call，apply，bind第一個(gè)參數(shù)都是this指向的對象蔓肯，call和apply如果第一個(gè)參數(shù)指向null或undefined時(shí)遂鹊，那么this會指向windows對象。
call省核，apply稿辙，bind的執(zhí)行方式如上例所示。call气忠，apply都是改變上下文中的this，并且是立即執(zhí)行的赋咽。bind方法可以讓對應(yīng)的函數(shù)想什么時(shí)候調(diào)用就什么時(shí)候調(diào)用旧噪。
閉包
閉包的概念很抽象，看下面的例子你就會理解什么叫閉包了：
function a(){ var n = 0; this.fun = function () { n++; console.log(n); };}var c = new a();c.fun(); //1c.fun(); //2
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)脓匿。在js中只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量淘钟。所以可以簡單的理解為：定義在內(nèi)部函數(shù)的函數(shù)。
用途主要有兩個(gè)：
1）前面提到的陪毡，讀取函數(shù)內(nèi)部的變量米母。
2）讓變量值始終保持在內(nèi)存中。
異步和單線程
我們先感受下異步毡琉。
console.log("start");setTimeout(function () { console.log("medium");}, 1000);console.log("end");
使用異步后铁瞒，打印的順序?yàn)?start-> end->medium。因?yàn)闆]有阻塞桅滋。
為什么會產(chǎn)生異步呢慧耍？
首先因?yàn)閖s為單線程，也就是說CPU同一時(shí)間只能處理一個(gè)事務(wù)丐谋。得按順序芍碧，一個(gè)一個(gè)處理。
如上例所示号俐，第一步：執(zhí)行第一行打印 “start”泌豆；第二步：執(zhí)行setTimeout，將其中的函數(shù)分存起來吏饿，等待時(shí)間結(jié)束后執(zhí)行踪危；第三步：執(zhí)行最后一行，打印“end”找岖；第四部：處于空閑狀態(tài)陨倡，查看暫存中铃慷，是否有可執(zhí)行的函數(shù)蝎毡；第五步：執(zhí)行分存函數(shù)便脊。
為什么js引擎是單線程晦炊？
js的主要用途是與用戶互動出革，以及操作DOM，這決定它只能是單線程冗美。例：一個(gè)線程要添加DOM節(jié)點(diǎn)兽赁，一個(gè)線程要?jiǎng)h減DOM節(jié)點(diǎn)，容易造成分歧擎勘。
為了更好使用多CPU咱揍，H5提供了web Worker 標(biāo)準(zhǔn)，允許js創(chuàng)建多線程棚饵，但是子線程受到主線程控制煤裙，而且不得操作DOM。
任務(wù)列隊(duì)
單線程就意味著噪漾，所有的任務(wù)都要排隊(duì)硼砰，前一個(gè)結(jié)束，才會執(zhí)行后面的任務(wù)欣硼。如果列隊(duì)是因?yàn)橛?jì)算量大题翰，CPU忙不過來，倒也算了诈胜。但是更多的時(shí)候豹障，CPU是閑置的，因?yàn)镮O設(shè)備處理得很慢焦匈，例如 ajax讀取網(wǎng)絡(luò)數(shù)據(jù)血公。js設(shè)計(jì)者便想到，主線程完全可以不管IO設(shè)備括授，將其掛起坞笙，然后執(zhí)行后面的任務(wù)。等后面的任務(wù)結(jié)束掉荚虚，在反過頭來處理掛起的任務(wù)薛夜。
小編推薦一個(gè)學(xué)Web前端的學(xué)習(xí)裙【 五四七，三零二版述，三八三 】梯澜，無論你是大牛還是小白，是想轉(zhuǎn)行還是想入行都可以來了解一起進(jìn)步一起學(xué)習(xí)渴析！裙內(nèi)有開發(fā)工具晚伙，很多干貨和技術(shù)資料分享！
好俭茧，我們來梳理一下：
1）所有的同步任務(wù)都在主線程上執(zhí)行咆疗，行程一個(gè)執(zhí)行棧。
2）除了主線程之外母债，還存在一個(gè)任務(wù)列隊(duì)午磁，只要一步任務(wù)有了運(yùn)行結(jié)果尝抖，就在任務(wù)列隊(duì)中植入一個(gè)時(shí)間。
3）主線程完成所有任務(wù)迅皇，就會讀取列隊(duì)任務(wù)昧辽，并將其執(zhí)行。
4）重復(fù)上面三步登颓。
只要主線程空了搅荞，就會讀取任務(wù)列隊(duì)，這就是js的運(yùn)行機(jī)制框咙，也被稱為 event loop（事件循環(huán)）咕痛。
