一、執(zhí)行上下文

也稱(chēng)為可執(zhí)行代碼和執(zhí)行上下文 執(zhí)行代碼:1.全局代碼 2.函數(shù)代碼 3.eval代碼 eval("var a = 200;console.log(a)") 執(zhí)行上下文 - Context 所處的一個(gè)環(huán)境，環(huán)境不同含義也隨著改變了 當(dāng)可執(zhí)行代碼執(zhí)行的過(guò)程中，都會(huì)產(chǎn)生一個(gè)可執(zhí)行環(huán)境 在執(zhí)行完之后，執(zhí)行上下文的環(huán)境也隨著銷(xiāo)毀 執(zhí)行上下文中變量存在于： 變量對(duì)象：VO - var 聲明的一個(gè)屬性值 - 全局 活動(dòng)對(duì)象：AO - 相對(duì)于函數(shù)創(chuàng)建的對(duì)象中的一個(gè)聲明 - 局部 - 隨執(zhí)行完后銷(xiāo)毀 不管變量在什么地方聲明，都會(huì)在函數(shù)一運(yùn)行就聲明一個(gè)函數(shù)中的變量 變量提升：指一個(gè)函數(shù)上下文創(chuàng)建時(shí)，函數(shù)中的所有變量都會(huì)隨函數(shù)的創(chuàng)建提升var x = 100;var outFunc = function(){x++;console.log(x);//NaNvar x = 200;}outFunc();console.log(x);//100 函數(shù)中 x 聲明提前，但是賦值并沒(méi)有提前，所有此時(shí)的x為undefined，undefined進(jìn)行運(yùn)算結(jié)果就為NaNvar outFunc = function(){var a = 100;var innerHtml = function(){var b = 200;a = b;//a替換了outFunc()中a var a = 100的值 此時(shí)a = 200； // c = a;}innerHtml();console.log(["inner:",a]);//200 } outFunc();//該函數(shù)在運(yùn)行完后函數(shù)中的變量隨之銷(xiāo)毀 console.log("outer:",a);//not defined

二、作用域 作用域鏈

作用域：即為代碼的作用范圍 作用域鏈：函數(shù)的變量不使用var聲明的情況下，聲明變量會(huì)一直往上查找該變量的值，直到全局變量還沒(méi)有就創(chuàng)建一個(gè)全局變量 Scope對(duì)象 - 存放上一層中的對(duì)象引用 - 屬于某一個(gè)函數(shù)的屬性，當(dāng)函數(shù)一創(chuàng)建就已經(jīng)有該函數(shù)的scope對(duì)象引用了 每個(gè)函數(shù)都包含自己本身的VO、Scope對(duì)象、作用域鏈對(duì)象 var food = "包子"; var eat = function(){console.log(food);//包子 } (function(){var food = "油條";eat() })var foo = 1; function bar(){if(!foo){var foo = 10;//foo會(huì)變量提升到bar函數(shù)中，但值不會(huì)提升此時(shí)提升的foo為undefined ！foo 剛好滿(mǎn)足條件}console.log(foo); } bar();var a = 1; function b(){a = 10 ;//a = a()return;function a(){}//會(huì)變量提升到函數(shù)的前面 } b(); console.log(a);var f = true; if(f === true){var a = 10; } function fn(){var b = 20;c = 30; } fn(); console.log(a);//10 console.log(b);//not definnd console.log(c);//30if('a' in window){var a = 10;//變量提升至if判斷外，但值不會(huì)提升；沒(méi)有var 不會(huì)先變量提升會(huì)先判斷是否進(jìn)入判斷 } console.log(a);//10var a = b =3; (function(){var a = b = 5;//var a = 3; b = 5 })(); console.log(a);//3 console.log(b);//5var foo = 'A'; console.log(foo); //A var foo = function(){console.log('B'); } console.log(foo); //function(){console.log('B');} foo(); //B function foo(){ //函數(shù)是在最開(kāi)始的時(shí)候就存在了，但在var foo 聲明后被覆蓋了，已經(jīng)被提升;會(huì)影響代碼的上下順序console.log('C'); } console.log(foo); //function(){console.log('B');} - foo(); //Bvar a = 1; function b(){console.log(a);//undefineda = 2;console.log(a);//2var a = 3;console.log(a);//3 } console.log(a);//1 b(); console.log(a);//1//閉包相關(guān)的函數(shù)值 var x = 100; var y = 200; function funcA(x){var y = 201;function funcB(){console.log(x);//101console.log(y);//201}return funcB; } var f = funcA(101); f();

三、this關(guān)鍵字

this 也稱(chēng)為當(dāng)前對(duì)象，是用于對(duì)象當(dāng)中，屬于第一人稱(chēng)，所處的環(huán)境不一樣指代的含義也不同 如果在對(duì)象的方法中只要在嵌套的函數(shù)中的this就不會(huì)再指向當(dāng)前對(duì)象中的this了 比如： var name = "張三"; var func = function(){console.log(this.name);//此時(shí)的this指向的是全局變量 } func(); fnnc.apply(); func.call() var obj = {name:"王五",func:function(){console.log(this.name);//此時(shí)的this 指向的是對(duì)象中的name(function(){console.log(this.name);//此時(shí)的this指向的不是對(duì)象的name,而是全局變量})()} } obj.func();改變this指向的方法： 1.call 2.apply 兩者的作用是相同的，可以幫助完成方法的調(diào)用，默認(rèn)this指向?yàn)槿?#xff0c;要想訪問(wèn)嵌套對(duì)象，就將其賦值給一個(gè)變量 call() Or apply()可以改變this的對(duì)象，第一個(gè)參數(shù)是不能省的 區(qū)別： var sum = function(a,b){console.log(a+b)} sum.call(null,100,200) - 采用的是參數(shù)列表 sum.apply(null,[100,200]) - 采用的是數(shù)組***練習(xí)*** var myObject = {foo:"bar",func:function(){var self = this;console.log(this.foo);//barconsole.log(self.foo);//bar(function(){console.log(this.foo);//undefinedconsole.log(self.foo);//bar})()} } myObject.func();var user = {count:1,getcount:function(){return this.count;} } console.log(user.getcount());//1 var func = user.getcount;//func就代表user.getcount這個(gè)函數(shù) console.log(func());//undefined - func()已經(jīng)成為全局，全局中沒(méi)有count這個(gè)變量,所以值為undefined

四、閉包 - closure

閉包：是指能夠訪問(wèn)函數(shù)內(nèi)部變量的函數(shù)，定義在函數(shù)內(nèi)部的函數(shù)。 一個(gè)函數(shù)引用了外部的自由變量，那么這個(gè)函數(shù)就叫閉包，被引用的函數(shù)和引用的函數(shù)是一同存在的。 自由變量 - 跨作用域的變量或父級(jí)的變量 函數(shù)必須引用外部變量，函數(shù)還必須被引用才能成為閉包 優(yōu)點(diǎn)：可以把一個(gè)局部變量存在的時(shí)間延長(zhǎng)，進(jìn)行持續(xù)保存 缺點(diǎn)：如果大量的使用閉包，持續(xù)保存的變量會(huì)一直占有內(nèi)存，造成內(nèi)存的浪費(fèi) 常用：事件處理常常會(huì)使用到閉包var lis = document.getElementsByTagName("li"); for(var i = 0;i<lis.length;i++){//方法實(shí)現(xiàn)一(function(index){//阻止閉包lis[index].onclick = function(){console.log("這是選中的地"+(index+1)+"項(xiàng)");}})(i)//方法實(shí)現(xiàn)二var func = function(index){lis[index].onclick = function(){console.log("這是選中的地"+(index+1)+"項(xiàng)");}}func(i); }//閉包練習(xí) function Foo(){var i = 0;return function(){console.log(i++);//i++先賦值再運(yùn)算} } var f1 = Foo(); var f2 = Foo(); f1();//0 f2();//0 f2();//1

五、面向?qū)ο?- OO - Object Oriented

語(yǔ)言分類(lèi)大致分為兩大類(lèi) - 范式 1.命令式 - 通過(guò)語(yǔ)言告訴計(jì)算機(jī)應(yīng)該如何做事情 比如：java、C語(yǔ)言(為程序語(yǔ)言的發(fā)展做出貢獻(xiàn)) 命令式的兩種思想：1.1.面向過(guò)程 - 將過(guò)程逐一分解為一個(gè)一個(gè)的步驟執(zhí)行 - 計(jì)算機(jī)的思維方式為主體缺點(diǎn)：人的思維有限，如果程序?qū)崿F(xiàn)的過(guò)程很復(fù)雜，人會(huì)不能完全考慮 1.2.面向?qū)ο?- 本身就是人的思考方式，人的思維為主體，從自身角度出發(fā) - 特征、行為 - 萬(wàn)物皆對(duì)象，對(duì)象因關(guān)注而產(chǎn)生2.聲明式 - 告訴計(jì)算機(jī)我想要什么，然后計(jì)算機(jī)進(jìn)行相關(guān)的動(dòng)作，然后計(jì)算機(jī)自己進(jìn)行運(yùn)算得到我想要的結(jié)果 比如:Css 聲明式的三大類(lèi)：2.1.領(lǐng)域特定語(yǔ)言 - DSL - 在特定范圍的語(yǔ)言 - HTML、Css、SQL、正則表達(dá)式2.2.函數(shù)式編程 - 類(lèi)似公式，計(jì)算機(jī)就會(huì)按照這個(gè)公式進(jìn)行計(jì)算并返回結(jié)果 與命令式編寫(xiě)相比，函數(shù)式編程更為精簡(jiǎn)，能夠完善命令式編程的一些缺陷 - lisp、Haskell2.3.邏輯編程 - prolog - 記日志比較好的方法構(gòu)建對(duì)象的兩種方式： 1.基于類(lèi)的面向?qū)ο?- 擁有相同屬性的劃分為一類(lèi)，類(lèi)是對(duì)象的抽象，對(duì)象是類(lèi)的實(shí)例 2.基于原型的面向?qū)ο?- JavaScript原型就有一個(gè)Object對(duì)象，通過(guò)一個(gè)原型克隆一個(gè)對(duì)象 好處：足夠靈活 缺點(diǎn)：隨意性太強(qiáng)，對(duì)于初學(xué)者容易出錯(cuò) 面向?qū)ο笕筇卣?#xff1a; 1.封裝 - 需重點(diǎn)了解 - 指實(shí)現(xiàn)細(xì)節(jié)隱藏起來(lái)的過(guò)程就是封裝 優(yōu)點(diǎn)： - 但還需要考慮參數(shù)的問(wèn)題1.1.隱藏實(shí)現(xiàn)的細(xì)節(jié)1.2.重用 - 不變的整合在一起，變化的作為參數(shù)JavaScript中屬性都應(yīng)為私有，方法可以為公共 - 由我們自己控制pulic - 公共，其他方法可以訪問(wèn)private - 私有，只能自己能夠訪問(wèn)set/get - 訪問(wèn)器/修改器var Student = function(name,age,gender){this.name = name;var _age = age;//添加 _ 可將變量變?yōu)樗接凶兞?#xff0c;外部不能隨意訪問(wèn)var _gender = gender;if(!Student._init){Student.prototype.getAge = function(){return _age;}Student.prototype.setAge = function(age){if(age > 20 && age < 30){_age = age;console.log(_age);}else{console.log("年齡修改不能在 20 - 30 之外");}}Student.prototype.getGender = function(){return _gender;}Student.prototype.setGender = function(gender){_gender = gender;console.log(_gender);}}Student._init = true;}var stu = new Student("張飛",20,"男");stu.name = "關(guān)羽";stu.setAge(31);console.log(stu.getAge());console.log(stu.getGender());stu.setGender("無(wú)");2.繼承 - 存在于有父與子的關(guān)系中 - 出現(xiàn)率較高 - 指采用一個(gè)對(duì)象的功能并且能夠添加新的功能優(yōu)點(diǎn)：2.1.復(fù)用2.2.擴(kuò)展缺點(diǎn)：如果繼承設(shè)計(jì)的不夠完善，會(huì)致使變得復(fù)雜，難以操控繼承的3種方法：1.對(duì)象冒充法 - instanceof - 判斷是否為繼承2.原型鏈 - 將自己的原型改變?yōu)楦讣?jí)的對(duì)象3.混合方式 - // 1.對(duì)象冒充法/*var People = function(name){this.name = name;}People.prototype.intro = function(){console.log("HI,我是"+this.name);}var ChinesePeople = function(name){this.inhert = People;this.inhert(name)delete this.inhert;}var info = new ChinesePeople("張三");console.log(info.name);console.log(info instanceof ChinesePeople);*/// 2.原型鏈 /* var People = function(name){this.name = name;}People.prototype.intro = function(){console.log("HI,我是"+this.name);}var ChinesePeople = function(name){}ChinesePeople.prototype = new People("張三");ChinesePeople.prototype.area = function(){console.log("我是中國(guó)人");}var info = new ChinesePeople("張三");console.log(info.name);console.log(info instanceof ChinesePeople);info.intro();info.area();*/// 3.混合/*var People = function(name){this.name = name;}People.prototype.intro = function(){console.log("HI,我是"+this.name);}var ChinesePeople = function(name){People.call(this.name);}ChinesePeople.prototype = new People("張三");ChinesePeople.prototype.area = function(){console.log("我是中國(guó)人");}var info = new ChinesePeople("張三");console.log(info.name);console.log(info instanceof ChinesePeople);info.intro();info.area();*/ 3.多態(tài) - JavaScript本身就是一個(gè)多態(tài)的行為var Student = {"name":"張飛","age":20,"learn":function(){console.log(this.name+"學(xué)習(xí)JavaScript")} } Student.gander;//訪問(wèn)的屬性不存在 值為 undefined Student.learn(); Student.name; Student["name"]; Student["lea"+"rn"];//動(dòng)態(tài)的屬性值使用中括號(hào)或者字符串拼接//構(gòu)造函數(shù) var Student = function(name,age){this.name = name;this.age = age;this.learn = function(){console.log(this.name+" - "+this.age);var that = this;(function(){console.log(that);}())} } var stu1 = new Student("張飛",20);//stu1 為一個(gè)對(duì)象 var stu2 = new Student("劉備",21); Student.prototype.gander = "男";//在原型中添加一個(gè)性別的屬性 Student.prototype.play = function(){//在原型中創(chuàng)建一個(gè)play 的方法console.log(this.name+" - "+this.age+" - "+"喜歡玩游戲"); } stu1.learn(); console.log(stu1.gander); stu1.play(); stu2.learn(); Studetn.prototype;//可以改變一個(gè)對(duì)象真正的原型，但是不能多次調(diào)用 stu1.__proto__; //只是更改了stu1的引用原型，而不是本身的原型，只是對(duì)象的一個(gè)屬性，可以通過(guò)屬性一層一層的訪問(wèn)到對(duì)象的原型對(duì)象 → 自定義對(duì)象原型 → Object對(duì)象 → Object原型 → Nullif(!Student._int){//首先判斷Student._int是否為假，Student._int事先不存在即為假，進(jìn)入判斷，Student._int變?yōu)檎?#xff0c;不在進(jìn)入判斷，該判斷這樣就只能判斷一次Student.prototype.learn = function(){console.log(this.name+" - "+this.age);}Student.prototype.play = function(){//在原型中創(chuàng)建一個(gè)play 的方法console.log(this.name+" - "+this.age+" - "+"喜歡玩游戲");}Student._int = true; }兩個(gè)運(yùn)算符：new - 創(chuàng)建對(duì)象; delete - 刪除屬性 - delete.stu1.name；//stu1中的name屬性就被刪除了，只能刪除原型創(chuàng)建的而不能刪不是原型創(chuàng)建的屬性 兩個(gè)語(yǔ)句：with - 性能有一定的問(wèn)題，盡量不使用; for..in - 不拿來(lái)循環(huán)數(shù)組；var stu1 = new Student("張飛",20);//stu1 為一個(gè)對(duì)象 var stu2 = new Student("劉備",21); for(var key in stu1){console.log([key,stu1[key]]); }

轉(zhuǎn)載于:https://www.cnblogs.com/1039595699TY/p/5642080.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript高级部分概念用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。