天天看點

JavaScript學習

1運算符  

算數運算符:+,-,*,%,/,++,--

指派運算符:=,+=,-=,*=,/=,%=

比較運算符:==,!=,!==,>,<,>=,<=

===(全等于) !== (不全等于): 判斷值和資料的類型

邏輯運算符:&&,||,!

條件運算符:

字元串操作: +連接配接符号,

位運算符:

2變量 

var 變量名=值

var 的類型取決于值的類型 類型一個自動類型

var 類型可以動态的變換

var a = "abc"

a = 123   這是沒問題的

3資料類型

數字類型  number

字元串類型 string 空字元也是字元類型

真假類型 boolean

空類型: null什麼都沒有

未定義類型:Undefined 表示沒有定義

符合資料類型:複雜類型,array數組,object對象

檢視資料的類型 Typeof  傳回的是

4alert 彈出一個視窗,會暫停程式的運作

5文法規則:

1區分大小寫

2所有的符号都必須是英文狀态下的

3可以不加分号結尾,但是最好加上最好.

4單行注釋 // 多行注釋 /**/

5document.write() 輸出到頁面

6傳值

指派傳值: 兩份資料,之間不會影響

引用傳值: 一份資料,任意一個改動值另一個都會收到影響

簡單資料是指派傳值 var a = 10; var b = a;

複雜資料都是引用傳值: var a = {a:"你好",b:23}; var b = a

7if(條件){語句塊}  

if(條件){語句塊} else{語句塊}

if(條件){語句塊} else if(條件){語句塊} else{語句塊}

8switch

1

2

3

4

5

6

7

8

9

10

11

12

<code>switch</code><code>(值)</code>

<code>{</code>

<code>    </code><code>case</code> <code>值:</code>

<code>    </code><code>{</code>

<code>    </code><code>}</code>

<code>    </code><code>break</code><code>;</code>

<code>    </code><code>case</code> <code>10&gt;值  前提是值是bool類型</code>

<code>    </code><code>break</code>

<code>    </code> 

<code>    </code><code>default</code><code>:預設</code>

<code>}</code>

9while(條件){執行體}

10 for(初始值;循環條件;值每次的變化){循環體}

11函數 function 函數名(){函數體}

帶參數函數 function 函數名(名字){ 使用參數直接用名字 函數體}

帶參數的不需要加var, 

<code>     </code><code>function</code> <code>jia(a,b)</code>

<code>document.write(a+b);</code>

<code>jia(10,20)</code>

參數最後一個可以有預設值

 function jia(a,b=20){}

12數組

同資料類型的變量放在一個集合裡

var arr=[23,24,25]

通路第一個取值arr[0]

長度: arr.length

for(var key in 數組名){

 key就是數組的下标

}

查找資料所在索引

arr.indexOf(10)  傳回10的下标  ,沒有就傳回 -1

删除某個元素 splice(開始索引,删除個數)

var arr = [10,20,230,40,50]

比如我要删除後面兩個

arr.splice(3,2)

排序 快速排序 自己寫一個

arr.sort(function(s1,s2){

    if(s1&lt;s2){

        return -1;

    }

    else{

        return 1;

});

随機打亂一個數組 類似洗牌

var arnm = [1,2,3,4,5,6,7,8,9,10];

arnm.sort(function(lhs,rhs){

    if(Math.random()&lt;0.5){

    else {

13二維數組

周遊二維數組

13

14

15

16

17

18

<code>var</code> <code>arr1=[1,2,3];</code>

<code>var</code> <code>arr2=[4,5,6];</code>

<code>var</code> <code>arr3=[7,8,9];</code>

<code>var</code> <code>arr4=[arr1,arr2,arr3];</code>

<code>或者</code>

<code>var</code> <code>arr4=[</code>

<code>            </code><code>[1,2,3],</code>

<code>            </code><code>[4,5,6],</code>

<code>            </code><code>[7,8,9] </code>

<code>           </code><code>];</code>

<code>for</code><code>(</code><code>var</code> <code>i = 0;i&lt;arr4.length;i++)</code>

<code>for</code><code>(</code><code>var</code> <code>j =0;j&lt;arr4[i].length;j++)</code>

<code>document.write(arr4[i][j]+</code><code>"&lt;br/&gt;"</code><code>);</code>

14常用函數

ParseInt:取整

parseFloat: 去浮點數

NaN:not a number表示不是一個數字

isNaN: 判斷是不是數字,是傳回false  如果是字元才會傳回true

15array對象

var arr = new Array(23,2,2,4) // 建立一個array對象

對象有屬性和方法

Concat()連接配接内容或者數組,組成新的數組 傳回

Join加入某個字元n,用n來連接配接數組的每項組成的字元串 最後元素一個不會

arr567 = arr567.join(""); 使用這種方法,可将一個數組變成一個字元串

Pop删除數組最後一個元素,并傳回

Push加入新的内容到最後,傳回新的長度

Reverse 反轉數組的順序

16 string對象 var str = "abc"  var str = new string("abc")

屬性:

length  字元串長度

方法:

charAt(n) 擷取字元串裡下标為n的字元

也可以直接用[]下标号 取值

CharCodeAt(n) 找到索引位置上的字元串的編碼值 ASCLL

indexOf("m") 找m在字元串中第一次出現的位置 從0開始沒找到傳回-1

lastIndexOf("c") 字元c在字元串中最後一次出現的位置 找到傳回-1

split("n") 以字元n分割字元串為 傳回一個數組 

如果沒有這個字元 就會把所有的字元串轉為一個數組元素.

split("") 可以把字元串 每個元素切割成 數組

substr(n,m):截取字元串: 把字元串從n開始的地方截取m個字元

如果隻有一個參數n,預設就從n開始截取到最後

substring(n,m)截取字元串:把字元串從n的位置開始截取到m的位置,

注意能夠取到n但是去不到m

toLowerCase() 把字元串中的字元轉換成小寫toUpperCase轉大寫

17 Math 對象

Math.pow(n,m) 求n的m次方

Math.abs(n)求n的絕對值

Math.round(n)求n的四舍五入值

Math.floor(n) 求n的向下取整的值,不大于n的最大整數

Math.ceil(n) 求n的向上取整的值,不小于n的最小整數

Math.random()獲得一個0到1之間的随機數,注意:能取到0,但不不能取到1

Math.random()*20  求0到20之間的随機數 

Math.random()*10+10  求10到20之間的随機數 

也就是最小10最大20,同時減去10(0,10)然後總體+10

求30-60之間的随機數:

首先30-30 60-30(0,30)然後整體+30

Math.random()*30+30

50 100随機數 都減去50(0*50) 整體加50

Math.random()*50+50

Math.PI 圓周率

Math.floor 方法執行個體 數值向下取整 就是:小與或等于他的最大整數

該方法與 Math.ceil 方法正好相反。

<code>&lt;script language=</code><code>"JavaScript"</code><code>&gt;</code>

<code>document.write( Math.floor(0.35) + </code><code>"&lt;br /&gt;"</code> <code>);</code>

<code>document.write( Math.floor(10) + </code><code>"&lt;br /&gt;"</code> <code>);</code>

<code>document.write( Math.floor(-10) + </code><code>"&lt;br /&gt;"</code> <code>);</code>

<code>document.write( Math.floor(-10.1) );</code>

<code>&lt;/script&gt;</code>

運作該例子,輸出:

-10

-11

18 JS特殊字元

單引号和雙引号:隻是用字元和字元串這兩個沒有差別

如果雙引号中包括雙引号需要用\"轉義

單引号也是一樣的

如果要用反斜杠'\\'

\轉義字元  document.write("他說:\"aaa,bbb,ccc,hggg\""+"&lt;br/&gt;");

\r回車   

\r換行

19 Date 對象

構造方法:

new Date(); //建立目前時間日期對象

new Date("1999/9/9 6:6:6") 建立一個指定的時間

new Date("1999,9,9,6,6,6") 建立一個指定的時間日期對象

new Date(2343523445632)  建立一個從1970年開始的1-1-淩晨0點開始,

以毫秒為機關, 但現在的時間  機關是毫秒。

toLocalString() 以目前本地格式顯示

getFullYear()  擷取年份

getMonth()   擷取月份

getDate()    擷取日期

getHours()    擷取小時

getMinutes()    擷取分鐘數

getSeconds()    擷取秒數

getMilliSeconds() 毫秒

getDay()   擷取星期

setFullYear(n) 設定年份

setMonth()   設定月份

setDate()    設定日期

setHours()    設定小時

setMinutes()   設定分鐘數

setSeconds()   設定秒數

setMilliSeconds() 設定毫秒

20 Object對象

var obj = {name:"小明",age:24,taiji:function(){},zuofan:function(alert("做飯")){]};

裡面有屬性 有方法

使用對象

obj.name 取值

//調用方法

obk.zuofan();

HTML和JS互動 通過id擷取這個标簽

HTML:對象.HTML屬性=值

CSS: 對象.style.CSS 屬性=值

document.getElementById(标簽id) 擷取之後 Js就可以使用這個标簽的屬性和方法了

Onclick  點選

Onmouseiver  滑鼠放上

Onmouseout   滑鼠離開.

<code>function</code> <code>fn(){</code>

<code>var</code> <code>obj = document.getElementById(</code><code>"d1"</code><code>);</code>

<code>obj.style.background = </code><code>"red"</code><code>;</code>

<code>function</code> <code>fm(){</code>

<code>obj.style.background = </code><code>"blue"</code><code>;</code>

<code>&lt;body&gt;</code>

<code>&lt;div id=</code><code>"d1"</code> <code>onmouseover=</code><code>"fn()"</code> <code>onmouseout=</code><code>"fm()"</code><code>&gt;</code>

<code>這是DIV</code>

<code>&lt;div/&gt;</code>

21 事件

滑鼠事件:

Onclick:點選

OMouseover:滑鼠放上

Onmouseout:滑鼠離開

ONdblclick:輕按兩下事件

Onmousedown:滑鼠按下

Onmouseup:滑鼠擡起

Onmousemove: 滑鼠移動

表單事件:

onfocuss:獲得焦點

onblur:失去焦點

onsubmit:送出事件

onchange:當發生改變的時候

onreset: 重置事件

鍵盤事件:

onkeyup:  鍵盤擡起

onkeydowm: 鍵盤按下

onkeypress:鍵盤按下一次

視窗事件:onload事件

頁面加載完成之後立刻執行的事件。

21 DOM對象 當網頁被加載時,浏覽器會建立頁面的文檔對象模型(Document Object Model)

通過這些對象 去修改或者擷取元素對應的内容

22 DOM操作HTML

JavaScript能改變頁面中所有HTML的元素

JavaScript能夠改變頁面中所有的HTML屬性

JavaScript能夠改變頁面中所有的CSS樣式

JavaScript能夠對頁面中所有的事件作出反應

document.getElementById("id号")

//通過元素名擷取

&lt;p&gt;aaa&lt;/p&gt;

&lt;p&gt;bbb&lt;/p&gt;

他預設獲得的就是第一個元素的對象

document.getElementsByTagName("p")

23異常捕獲

try{

    放可能會發生異常的代碼

}catch(err){

   發生異常在這裡處理 err就是錯誤資訊

自定義錯誤  使用throw抛出

如 if(字元串 == "")  我們不想要空字元串

{    

    throw "字元串不能為空";

}catch(err)

{

    這時候 err輸出的就是 字元串不能為空

24 使用函數來定義對象,然後建立新的對象

<code>建立一個object對象 并且為對象的屬性指派</code>

<code>poe = </code><code>new</code> <code>Object()</code>

<code>poe.age = 10</code>

<code>poe.name = </code><code>"a"</code>

<code>還有另外一種也可以</code>

<code>poe = {age:</code><code>"10"</code><code>,name:</code><code>"hahaha"</code><code>};</code>

<code>document.write(</code><code>"age:"</code><code>+poe.age)</code>

<code>document.write(</code><code>"name:"</code><code>+poe.name)</code>

使用函數來建立  

<code>function</code> <code>peop(name,age){</code>

<code>this</code><code>._name = name;</code>

<code>this</code><code>._age = age;</code>

<code>this</code><code>._print = </code><code>function</code> <code>prints(){</code>

<code>document.write(</code><code>"age:"</code><code>+</code><code>this</code><code>._age+</code><code>"name:"</code><code>+</code><code>this</code><code>._name);</code>

<code>peopa = </code><code>new</code> <code>peop(</code><code>"zhangsan"</code><code>,</code><code>"10"</code><code>)</code>

<code>peopa._print()</code>

25事件詳解

HTML事件處理  

<code>這是一個Button标簽</code>

<code>&lt;button id=</code><code>"btn1"</code><code>&gt;按鈕&lt;/button&gt;</code>

<code>&lt;script&gt;</code>

<code>    </code><code>var</code> <code>btn = document.getElementById(</code><code>"btn1"</code><code>)</code>

<code>    </code><code>btn.onClick = </code><code>function</code><code>(){  函數體代碼  }  點選這個按鈕會執行這個</code>

<code>    </code><code>//如果是這種情況 </code>

<code>    </code><code>btn.onclick = </code><code>function</code><code>(){ alert(</code><code>"a"</code><code>)}  這個事件會被覆寫</code>

<code>   </code><code>btn.onclick = </code><code>function</code><code>(){ alert(</code><code>"b"</code><code>)}   這個事件會執行</code>

這是DOM2級事件處理

addEventListener("事件名","事件處理函數","布爾值")

true事件捕獲,false事件冒泡  這個版本暫時忽略

使用removeEventListener()移除一個事件

<code>var</code> <code>btn = document.getElementById(</code><code>"btn1"</code><code>)</code>

<code>    </code><code>btn:addEventListener(</code><code>"click"</code><code>,da1)</code>

<code>btn:addEventListener(</code><code>"click"</code><code>,da2)</code>

<code>function</code> <code>da1(){alert(</code><code>"我是事件1"</code><code>)}</code>

<code>function</code> <code>da2(){alert(</code><code>"我是事件2"</code><code>)}  這個事件會依次執行</code>

<code>删除一個事件</code>

<code>btn:removeEventListener(</code><code>"click"</code><code>,da1)</code>

<code>使用type屬性可擷取事件類型 比如  click  mouseover</code>

<code>target擷取事件目标</code>

<code>stopPropagation() 阻止事件冒泡</code>

26Window對象

innerHeight 浏覽器内部高度

innerWidth  浏覽器内部寬度

26 可以設定一個時間間隔來執行代碼 

1setlnterval()間隔 機關毫秒數,不停的執行指定的代碼

clearlnterval()用來停止setlnterval方法的函數代碼

2setTimeout()暫停指定的毫秒數後指定的代碼

clearTimeout 停止執行settimeout方法的代碼

我們每隔1秒 去調用擷取事件

<code>var mytime = setInterval(function(){</code>

<code> </code><code>gettime();</code>

<code>},1000)</code>

<code>function gettime(){</code>

<code>var d = </code><code>new</code> <code>Date();</code>

<code>var t = d.toLocaleTimeString();</code>

<code>document.getElementById(</code><code>"timew"</code><code>).innerHTML=t;</code>

26 Location 對象 window.location用來擷取目前頁面的位址(URL)

27 Screen對象

screen.avaliWidth 可用螢幕寬度

screen.availHeigth 可用螢幕高度

screen.heigth  螢幕高度

screen.width  螢幕寬度

28 面向對象

29 prototype

在JavaScript中prototype是實作面向對象的重要機制

每個函數就是一個對象(function)函數對象都有一個子對象,prototype對象,類是

以函數的形式來定義的,prototype表示改函數的圓形,也表示一個類成員的集合

30 function 來模拟類

19

20

<code>function Peo(){</code>

<code>Peo.prototype.shuo = function(){</code>

<code>alert(</code><code>"說話"</code><code>);</code>

<code>執行個體化</code>

<code>var p = </code><code>new</code> <code>Peo()</code>

<code>p.shuo()   調用類方法</code>

<code>屬性</code>

<code>Peo.prototype.age </code>

<code>這個function Peo就相當于構造函數  這樣可以給内部屬性指派</code>

<code>function Peo(age){</code>

<code>    </code><code>this</code><code>._age = age</code>

<code>var p = </code><code>new</code> <code>Peo(30)</code>

<code>alert(p._age)    這裡輸出的就是30</code>

31 類的繼承

<code>function</code> <code>Stu(){</code>

<code>繼承自 上面的Peo </code>

<code>Stu.prototype = </code><code>new</code> <code>Peo();</code>

<code>調用父類的函數</code>

<code>var</code> <code>s = </code><code>new</code> <code>Stu();</code>

<code>子類重名 覆寫父類方法</code>

<code>Peo.prototype.shuo = </code><code>function</code><code>(){</code>

<code>    </code><code>alert(</code><code>"說不出話"</code><code>);</code>

<code>如果還想調用父類的方法</code>

<code>var</code> <code>superFunc = Stu.prototype.shuo;</code>

<code>superFunc.call(</code><code>this</code><code>);</code>

父類的先構造 然後 子類再構造

成員函數可以直接使用成員屬性

<code>    </code><code>alert(</code><code>"說話"</code><code>+</code><code>this</code><code>._age);</code>

閉包是外部不能通路這個對象裡的變量

21

22

23

24

25

26

27

28

29

30

31

<code>var</code> <code>n = 10            這個變量可以在任意地方使用</code>

<code>function</code> <code>Peo(age){</code>

<code>this</code><code>._age = age</code>

<code>alert(</code><code>"父類"</code><code>+</code><code>this</code><code>._age);</code>

<code>alert(</code><code>"說話"</code><code>+</code><code>this</code><code>._age);</code>

<code>alert(n) 成功輸出</code>

<code>但是我們可以把他包起來</code>

<code>(</code><code>function</code><code>(){</code>

<code>var</code> <code>n = 10</code>

<code>    </code><code>alert(</code><code>"父類"</code><code>+</code><code>this</code><code>._age);</code>

<code>}());</code>

<code>這樣外部就不能通路他了</code>

這時候外部不能通路了,在麼辦呢? 

這裡就要面向對象的封裝了

<code>window.Peo = Peo 使用window對象來記錄這個變量</code>

<code>然後就可以直接使用Peo了</code>

另一種方法 來使用面向對象

首先還是建立一個function

<code>function</code> <code>Per(){</code>

<code>//建立一個空的對象</code>

<code>var</code> <code>_this = {}</code>

<code>_this.shuohua = </code><code>function</code><code>(){alert(</code><code>"說話"</code><code>);}</code>

<code>//傳回這個對象</code>

<code>return</code> <code>_this;</code>

繼承

<code>function</code> <code>ter(){</code>

<code>var</code> <code>_this = Per();</code>

建立對象 并調用方法

<code>var</code> <code>t = </code><code>new</code> <code>ter()</code>

<code>t.shuohua();</code>

重寫父類方法

<code>_this.shuohua = </code><code>function</code><code>(){</code>

<code>alert(</code><code>"不說話"</code><code>);</code>

如果還是要調用父類的方法

<code>var</code> <code>superFunc = _this.shuohua;</code>

有參構造和屬性

<code>function</code> <code>Per(name){</code>

<code>_this.names = name;</code>

封裝起來

<code>alert(_this.names+</code><code>"說話"</code><code>);</code>

<code>window.Per = Per;</code>

32代碼子產品

1js裡面代碼可以放在不同的檔案裡,稱為代碼子產品

2一個子產品需要引用其他子產品代碼的時候需要使用require

3require 如果是第一次調用,那麼就加載執行腳本

每個代碼子產品由  module.exports 導出的對象

每次require的時候, 都傳回module.exports

假如有一生成随機數的js檔案 裡面的代碼是

<code>var</code> <code>utils = {</code>

<code>random_int:</code><code>function</code><code>(start,end){</code>

<code>var</code> <code>num = start+(end-start)*Math.random();</code>

<code>num = Math.floor(index);</code>

<code>return</code> <code>num;</code>

<code>};</code>

<code>每個子產品都有一個module.exports </code>

<code>這時候module.exports 指向的是這個utils</code>

<code>module.exports = utils;</code>

在其他檔案裡導入使用

導入代碼 并用變量儲存傳回值

這裡會判斷是不是第一次執行,如果是第一次他會把js代碼全部加載上來

并執行者整個js檔案。然後傳回module.exports

如果不是第一次require 那麼就直接傳回module.exports

<code>var</code> <code>utls = require(</code><code>"utils"</code><code>)</code>

<code>調用子產品方法</code>

<code>var</code> <code>num = utls.vrandom_int(10,20)</code>

module.exports可以到處表,可以導出數組,還可以導出函數對象

33 this

顯示的傳遞執行個體, 但參數第一個參數就是this

<code>function</code> <code>test(name,age){</code>

<code>this</code><code>.name = name;</code>

<code>this</code><code>.age = age;</code>

<code>var</code> <code>xiaoming = {};</code>

<code>test.call(xiaoming,</code><code>"xiaoming"</code><code>,20);</code>

<code>console.log(xiaoming);</code>

上面輸出的是{name:"xiaoming",age:20}

this就是類似參數似得,可以顯示的傳遞this

上面xiaoming傳到參數裡,其實他就是那個this

通過函數對象.call(對象執行個體,參數) 這個this指向的就是那個執行個體

隐式的傳遞執行個體   其中this就是 xiaohong

他就是将xiaohong作為this 傳給了這個函數方法

<code>var</code> <code>xiaohong = {</code>

<code>name:</code><code>"xiaohong"</code><code>,</code>

<code>testfunc = </code><code>function</code><code>(){</code>

<code>console.log(</code><code>this</code><code>);</code>

<code>xiaohong.testfunc();</code>

輸出:{name:"xiaohong",testfunc:[Function:test_func]}

還有一種就是強制傳遞this

<code>var</code> <code>func = </code><code>function</code><code>(){</code>

<code>}.bind(xiaohong); </code>

<code>func();</code>

因為上面綁定了xiaohong  是以他執行的時候會強制将xiaohong作為this

bind在原來的對象基礎上,産生了一個新的函數對象

<code>func = func.bind(xiaohong)</code>

<code>func()</code>

也就是會産生一個新的函數對象,這兩個對象指向同一個代碼段,

但是他們有一個this是不同的,這個this就是他綁定的

如果即綁定了this, 又隐式的傳遞this呢

強制綁定優先級進階 隐式傳遞

<code>    </code><code>name: </code><code>"xiaohong"</code><code>,</code>

<code>    </code><code>test_func:</code><code>function</code><code>(){</code>

<code>        </code><code>console.log(</code><code>this</code><code>);</code>

<code>    </code><code>}.bind(4)</code>

<code>xiaohong.test_func()</code>

<code>這裡輸出的就是4   因為他強制綁定了是4</code>

如果用call顯示傳遞 那麼他調用的還是xiaohong 不會輸出4 因為強制綁定高于他們

<code>    </code><code>console.log(</code><code>this</code><code>);</code>

<code>}:</code>

<code>func = func.bind(xiaohong);</code>

<code>func.call(4);</code><code>//顯示傳遞</code>

我們看到 func_test2 他強制綁定了5 那你無論隐式或顯示傳遞他 都是5

<code>func_test:</code><code>function</code><code>(){</code>

<code>},</code>

<code>func_test2:</code><code>function</code><code>(){</code>

<code>}.bind(5),</code>

xiaohong.func_test2()   隐式 最後一個還是5

xiaohong.func_test2.call(20)顯式  輸出還是5

總結一下就是強制綁定this,優先級比其他的都高

顯示call傳遞this高于 

詳解面向對象

<code>函數對象</code>

<code>function</code> <code>person(name,age){</code>

<code>//類成員</code>

<code>//類方法 </code>

<code>person.prototype.test_func = </code><code>function</code><code>(){</code>

<code>console.log(</code><code>"name"</code><code>+</code><code>this</code><code>.name+</code><code>"  age"</code><code>+</code><code>this</code><code>.age);</code>

<code>//執行個體化對象</code>

<code>var</code> <code>p = </code><code>new</code> <code>person(</code><code>"小明"</code><code>,20);</code>

<code>p.test_func();</code>

prototype是什麼?

每一個函數對象都會有一個prototype變量, 指向這個對象。

var func_temp = function(){};

console.log(func_temp.prototype) 

這裡輸出的:func_temp{} 

沒錯就是一個空的對象,由于他是一個對象,有了這個那就可以來擴充這個對象key:value

func_temp.prototype.test_func= function(){}

new函數做了什麼?

var data = new func_temp();

第一步:他是把一個空的表給data  var data = {};

第二步:在data裡面加key:valye  key是__protp__  value是 prototype這個對象的指派 潛指派

第三步:把這個data作為執行個體,this傳給後面的函數

第四步:調用這個函數func_temp 并把data作為this傳遞

<code>console.log(data.__proto__)</code>

<code>console.log(person.prototype)</code>

上面兩個輸出的都是一樣的 

{test_func:[Function]}

是以這兩個func對象都是指向 同一個引用,也就是代碼是用一份,但是他們是兩個表.

__proto__是被隐藏的.

調用方法的時候做了什麼事情呢?

把data 作為this傳遞給data的__proto__ 這個對象裡面的函數.

data.test_func()

data.__proto__.test_func.call(data);  

上面兩個效果是一樣的,意思是隐式把data作為this傳遞給__proto__的方法

第二個是顯示的把data作為this傳遞給__proto__的方法

如果這個key 執行新的value 方法呢?

p.test_func = function(){

console.log("new test_func",this);

p.test_func();

這時候上面執行的就是指向的這個新的函數

他首先會在這個執行個體p的表裡面搜尋,有沒有這樣的對象,

如果沒有在到對象的__proto__裡面去搜尋。有了之後吧這個執行個體

作為this,然後傳遞給這個函數對象.

var Man = function(){}

//這種做法是不對的,因為這樣他們是指向同一個對象

Man.prototype = 父類.prototype;

如果這時候要擴充Man的方法的時候, 父類的方法跟着改了。

使用這種方法來複制 原來的 是一個潛拷貝

var super = function(){};

super.prototype =  父類.prototype;

Man.prototype = nwe Super(); //這樣子類複制的是super這個的prototype

這時候new出來的是新的執行個體,  這時候Man就可以擴充方法了。

如果這時候 Man修改key = 同名函數就是會把 父類的覆寫掉

如果沒有同名函數 就是擴充這個類。

編寫一個class方法 來定義一個雷,讓他繼承基類

//函數對象 模拟類

32

33

<code>function</code> <code>Class(param){</code>

<code>var</code> <code>new_class = </code><code>function</code><code>(){};</code>

<code>//這裡就表示有基類 就直接繼承</code>

<code>if</code><code>(param.extend){</code>

<code>var</code> <code>supers = </code><code>function</code><code>(){};</code>

<code>supers.prototype = param.extend.prototype;</code>

<code>new_class.prototype = </code><code>new</code> <code>supers();</code>

<code>//周遊參數</code>

<code>for</code><code>(</code><code>var</code> <code>key </code><code>in</code> <code>param){</code>

<code>if</code><code>(key == </code><code>"extend"</code><code>){</code>

<code>continue</code><code>;</code><code>//這個參數處理過了</code>

<code>//把所有參數的函數 加到這裡面來</code>

<code>new_class.prototype[key] = param[key];</code>

<code>return</code> <code>new_class;</code>

<code>//把這些函數 屬性作為參數傳遞進去</code>

<code>var</code> <code>Student2 = Class({</code>

<code>extend:person, </code><code>//設定基類</code>

<code>set_class: </code><code>function</code><code>(class_num){</code>

<code>this</code><code>.classs = class_num;</code>

<code>set_grade:</code><code>function</code><code>(grade){</code>

<code>this</code><code>.grade = grade;</code>

<code>});</code>

<code>//執行個體化</code>

<code>var</code> <code>s = </code><code>new</code> <code>Student2();</code>

<code>//調用</code>

<code>s.set_class(10); </code>

<code>s.set_grade(2);</code>

釋出一個作業 屬性面向對象:

1熟練的使用require與module.exports;

2熟悉了解new與構造函數

3熟悉掌握this,與bind(this),function.call(執行個體,參數.)

4熟悉掌握js繼承原理

5編寫一個person類,這個類在player.js檔案,  

然後編寫一個player類 放在player.js裡面, 繼承了person

 在外部執行個體化player對象

 在person中編寫一個函數get_name.使用player的執行個體調用

 本文轉自超級極客51CTO部落格,原文連結:http://blog.51cto.com/12158490/2063192,如需轉載請自行聯系原作者

繼續閱讀