簡單學習js

java小新人發表於2019-06-14

  由於是個前端小白,通過這一兩天的學習html,css,js和jquery等,基本上前端會用了,而且熟悉我部落格的人來說,沒錯,我把自己的部落格給優化了一下(一些大佬都是禁用模板的所有樣式,然後自己設計頁面佈局),我的話就稍微新增了一些小外掛;

  比如動態雪花背景,雪花隨著滑鼠彈開;背景圖片;滑鼠點選特效文字;右上角3D相簿,類似輪播圖一樣;統計訪問部落格的人的來源;小老鼠元件;個性時鐘元件;背景音樂;右下角的推薦框;左下角萌萌的看板娘,還有就是將部落格正文和程式碼的字型進行一些微調。。。。突然發現前端賊有意思,最大的感觸就是定位和佈局,這兩個非常重要,佈局可以更好模組化的開發,而定位就是將你開發出來的模組更好的展示出來,那麼對於特效呢?就我而言對前端初學者其實不是特別重要吧,因為這就要靠你的編碼能力和邏輯思維了!

  我是前端小菜鳥,對於寫特效程式碼不是特別會,我部落格的特效就是百度隨便找的,開箱即用,哈哈哈!

  但是經過自己修改整個部落格也學會了不少東西,這次就簡單說說學習過程中學的js吧。。。

 

1.js建構函式基本概念

  說實話我是對用函式去例項化物件用起來有點不對勁,其實這裡的建構函式就相當於一個類(面嚮物件語言都有類,比如C++,java,C#,python等),這個類就是起到一個模板的作用;比如我們去生產零件,建構函式(或者說是類)就相當於零件的圖紙,而實際生產出來的零件就是例項!顯而易這種方式很好,利於擴充套件和減少無謂工作量,因為你只需要對圖紙進行一些改進,零件也會跟著改進;(對應到程式碼中就是用到繼承,繼承中最重要的知識點就是原型,後面會說到的);

  我們簡單看看js是怎麼例項化物件的,隨便寫幾種方式:

<script>
    function Person(name,age){
this.name = name
this.age = function(){xxxxxx}
};
</script> //第一種,字面量的形式,也就是直接用 var obj = {name:“小王”,age:function(){xxxxxx}} //第二種,用new關鍵字,也就是要用到建構函式 var obj = new Person(xx,xx); //第三種,先用new關鍵字建立一個Object空物件,然後往物件中新增新的屬性 var obj = new object(); obj.name = "小王"; obj.age = function(){xxxxxx};

   看上面的程式碼我們應該關注第二行 function Person(name,age){xxxxxxx},這個函式是個什麼鬼呢?和一般我們自己隨便寫的函式有沒有什麼區別呢?

  第一眼看過去就是我們自己寫的函式名字都是小寫啊,而這裡的函式首字母大寫了;用法嘛,一樣用,我們這個函式可以直接像我們自己定義的函式那樣使用,例如var per = Person(xx,xx);而首字母大寫了的函式(下面統稱為建構函式)還能建立物件,所以我們可以大概知道建構函式和普通函式應該是處於同一地位但是用法更多更靈活,那麼問題來了,建構函式和普通函式是誰創造的呢?

  就好像你可以根據零件圖紙製造零件,但是零件圖紙又是怎麼來的呢?肯定有一個機器生產出來的;這裡就有一個很有意思的現象,如果只看機器和圖紙,那麼機器應該是建構函式,圖紙是例項;如果只看圖紙和零件,那麼圖紙是建構函式,零件是例項;站在不同角度看到的就不一樣,而這裡的機器指的就是js中的Function,一切的函式(不管是普通的函式,建構函式還是一些內建函式)都是由這個Function生產出來的。。。。

  看看一些基本的東西(就當記一下筆記,哈哈):

    js中五大基本資料型別:number,string,boolean,undefined,null;一個混個資料型別:object;

    引用型別:Array,Object,Function

    js中內建函式有,Date,Math,Number,Boolean,String,,Array,RegExp,Object,Function

  到這裡大家看一個大概的輪廓,可以看到Function生產出所有的函式,其中怎麼生產出來建構函式的?在js內部做了封裝,看不到,但是我們可以通過intstanceof這個方法驗證:

 

  測試如下,可以知道無論是什麼函式本質上都是Function的例項,就好像我們國家有56個民族,但是本質上都是中國人啊。。。

//測試內建函式和自定義函式、自定義建構函式是不是Function例項
var person=new Function("name","age","return name+':'+ age");
控制檯:person instanceof Function   //true

控制檯:Array instanceof Function     //true,自己試試其他的內建函式

var man = function(){};
控制檯:man instanceof Function    //true

function Person(name,age){this.name=name;this.age=age};
控制檯:Person instanceof Function   //true

控制檯:Function instanceof Function   //true,可見Function是自己本身的一個例項,因為Function是最高層了,沒有上一層了,只能是自己的例項了

 

  這裡我們重點看建構函式,普通函式就不討論了,對於一個自定義建構函式來說,有爸爸,也有兒子,爸爸是Function,兒子是例項(注意,爸爸只能由一個,兒子可以有多個呀@_@),而且每一個身上都會有一個屬性constructor,可以指向自己的建構函式,於是上面的圖可以進行一些改進:

 

 

 2.原型

  為什麼要有原型呢?上面已經說的比較清楚了,是為了能夠重複的使用程式碼而不用每次都寫一些重複的程式碼,那麼原型放在哪裡呢?它的本質又是什麼呢?

  很簡單,原型是放在建構函式中,而且本質上就是當前建構函式的一個例項,換句話的意思就是Function和內建函式以及所有自定義建構函式都有原型!對應在程式碼中就是prototype屬性;注意:建構函式例項沒有原型的哦~~

  說起來很抽象,對上面的圖進行改進:

 

   那麼問題來了,沒有沒辦法使得下一層可以直接指向上一層的原型呢?答案是有的,不管是Function、建構函式還是例項,預設都有一個自帶的屬性_proto_,這個屬性就是可以指向上一層的原型,於是上圖又可以進行一些變化:

 

  現在我們就要看看原型的內部是什麼樣子了?其實上面已經說了,原型是當前建構函式的一個例項,上面圖中原型2中的結構,應該就和Person的例項結構一樣,裡面有屬性constructor和_proto_,其中constructor屬性應該不多說了吧,就是指向自己的建構函式;_proto_屬性指向上一層的原型,注意:這裡有點不同,原型的祖先是Object,例如上圖原型1和原型2都是指向Object的原型

   說起來跟日了狗一樣,我們繼續畫一個圖,為了整潔,就不看原型外面的那些屬性了:

   是不是看著很煩,瑪德,加了原型之後整個結構都不一樣了,還會涉及到Object(其實js中Object是一個建構函式,也是由Function生產的,但是Object中的原型卻又是最頂層的,emmm.....青出於藍而勝於藍麼?),基本上涉及到了原型之後整個結構看起來就複雜了很多,但是也因為由此,用起來也就更靈活了,靈活的有的時候都不知道該怎麼用,哈哈!

 

3.原型的簡單用法

  弄清楚了上面這些的結構之後我們再來使用原型就很簡單了!舉個很簡單的例子;

  一個普通的建構函式:

function Person(name, age) {
 this.name = name;
 this.age = age;
 this.sayName = function() { alert(this.name+this.age) } 
}

var person = new Person("java小新人","12");
person.sayName();

 

 

  假如在不修改原始碼的情況下,我要這個person物件新增一個helloWorld方法,你覺得怎麼用比較好?有人說,很簡單啊,我直接把這個建構函式一複製,馬上貼上,然後在裡面新增一個helloWorld方法就可以了,emmmm....也不是說這種方式不行啊,這種方式很好啊,起碼能夠完成功能啊,還是很不錯的!那有沒有辦法優化一下呢?畢竟我們知道重複的程式碼太多是我們不想看到的。

  這個時候就是原型的出場時間了:

function Person(name, age) {
 this.name = name;
 this.age = age;
 this.sayName = function() { alert(this.name+this.age) } 
}
//運用原型,在原型中新增一個helloWorld屬性
Person.prototype.helloWorld = function(){alert(this.name+":世界,我來了!")}
var person = new Person("java小新人","12");
person.helloWorld();

 

 

   上述程式碼在不修改原始碼的前提下只新增了一行程式碼就完成了目標,是不是比複製貼上好了不少,嘿嘿!

  

 4.總結

  我是搞java的,js這種前端的語言不是很熟悉(都是最近修改部落格,複製別人程式碼的時候發現js程式碼看不懂,於是才有心思靜下來學一下前端的東西(●´∀`●)),也就只能根絕我查的一些資料和自己的理解,以及多敲程式碼測試一下寫出來的文章,可能還有很多方面沒說到的或者有錯誤的,請提示一下我去修改,哈哈哈!話說感覺學js要把整個的函式體系弄清楚學一下還是很輕鬆愉快的!

  後面應該會說說原型鏈和閉包相關的東西吧!

 

 

 

  

相關文章