當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript高级特征之面向对象笔记
生活随笔
收集整理的這篇文章主要介紹了
JavaScript高级特征之面向对象笔记
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Javascript面向對象：
函數：
?? ??? ?* Arguments對象：
?? ??? ??? ?* Arguments對象是數組對象
?? ??? ??? ?* Arguments對象的length屬性可以獲取參數的個數
?? ??? ??? ?* 利用Arguments對象模擬函數的重載效果（javascript中不存在函數重載）
?? ??? ?* 變量的作用域：
?? ??? ??? ?* 全局變量與局部變量
?? ??? ??? ??? ?* 全局變量：全局域與函數域（局部域）
?? ??? ??? ??? ?* 局部變量：當前函數域
?
?? ??? ??? ?* 全局域與函數域
?? ??? ??? ?* 定義局部變量時，不使用"var"，局部變量變成全局變量
?
?? ??? ??? ?* 定義全局變量與局部變量同名時，函數域中只能訪問局部變量
?? ??? ?* 幾種特殊函數：
?? ??? ??? ?* 匿名函數：沒有名的函數
javascript可以將函數作為數據使用。作為函數本體，它像普通的數據一樣，不一定要有名字。默認名字的函數被稱之為“匿名函數”。例如：
function (a){return a;}
匿名函數的兩種用法：
可以將匿名函數作為參數傳遞給其他函數。這樣，接收方函數就能利用所傳遞的函數來完成某些事情。
可以定義某個匿名函數來執行某些一次性任務
?? ??? ??? ?* 回調函數：把一個函數作為參數傳遞給另一個函數，而作為參數的函數叫做回調函數
?? ??? ??? ?* 自調函數：定義即調用
?? ??? ??? ??? ?* 第一個小括號：封裝函數
?? ??? ??? ?? ? ?* 第二個小括號：調用函數（傳參）
?? ??? ??? ?* 內部函數：Java中的內部類，提高安全性
1 內部（私有）函數 2 function a(param){ 3 function b(input){ 4 return input * 2; 5 }; 6 return "The result is " + b(param); 7 } 8 9 alert(a(2)); //The result is 4 10 當調用全局函數a ( ) 時，本地函數b ( ) 也會在其內部被調用。由于b ( ) 是本地函數， 11 它在a ( ) 以外的地方是不可見的，所以將b 稱之為私有函數。 12 私有函數的優點： 13 有助于確保全局名字空間的純凈性（這意味著命名沖突的機會很小）。 14 私有性 —— 只將一些必要的函數暴露給“外面世界”，并保留屬于自己的函數，使它們不為該應用程序的其他部分所用。 內部函數.html
?? ??? ??? ?* 返回函數的函數
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>01_幾種特殊函數.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 /* 19 * 內部(私有)函數(Java里內部類) 20 * * 保證了私有性 —— 外部不能訪問不到(提供了安全性) 21 */ 22 // function fn(){ 23 // var a = "a"; 24 // 25 // function n(){ 26 // var b = "b"; 27 // 28 // alert(a+b); //output ab 29 // } 30 // 31 // return n(); 32 // } 33 // 34 // fn(); //output ab 35 36 /* 37 * (了解)返回函數的函數(內部函數的一種特殊用法) 38 * * 可以在全局域中,訪問到局部變量的值 39 * * 定義一個函數時,最終執行兩個邏輯代碼塊 40 */ 41 function fn(){ 42 //邏輯代碼塊 43 var a = "a"; 44 45 return function(){ 46 //邏輯代碼塊 47 return a; 48 } 49 } 50 51 alert(fn()); //output function(){return a;} 52 53 //var fun = fn(); 54 //var fun = function(){return a;} 55 56 //alert(fun()); //output a 57 58 alert(fn()()); //output a 59 60 /* 61 * javascript中的特殊函數,不是必要使用的內容 62 * * 第一次完成實現邏輯內容時,很少會用到特殊函數 63 * * 在做代碼優化的時候,會使用特殊函數 64 * 65 * 代碼實現:一次性做到代碼最優 66 * * 實現邏輯內容 67 * * 代碼優化 68 */ 69 70 </script> 71 </html> 返回函數的函數.html作用域鏈：
1 javascript不存在大括號級的作用域，但具有函數作用域。 2 在函數內定義的變量在函數外是不可見的。但如果該變量是在某個代碼塊中定義的（如在某個if或for語句中），它在代碼塊外是可見的。 3 4 var a = 1; 5 function f(){ 6 var b = 2; 7 return a; 8 } 9 10 alert(f()); //output 1 11 alert(b); //output b is undefined 12 13 變量a 是屬于全局域的，變量b 的作用域是屬于函數f ( ) 內。 14 在f ( ) 內，a 和b 都是可見的。 15 在f ( ) 外，a 是可見的，b 則是不可見的。 16 17 var a = 1; 18 function f(){ 19 var b = 2; 20 function n(){ 21 var c = 3; 22 alert(a); //output 1 23 alert(b); //output 2 24 alert(c); //output 3 25 } 26 return n(); 27 } 28 f(); 29 30 函數n ( ) 可以訪問的變量可以是自身的作用域，也可以是其“父級”的作用域。這就形成了一條作用域鏈 31 function f1(){ 32 var a = 1; 33 f2(); 34 } 35 function f2(){ 36 return a; 37 } 38 39 alert(f1()); //output a is undefined 40 41 在定義函數f1 ( ) 和f2 ( ) 時，只能訪問全局作用域和其自身的作用域。 42 在定義函數f2 ( ) 時，變量a 是不可見的。 43 44 var a = 5; 45 function f1(){ 46 var a = 1; 47 f2(); 48 } 49 function f2(){ 50 return a; 51 } 52 53 alert(f1()); //output 5 54 55 在定義函數f1 ( ) 和f2 ( ) 時，都是可以訪問全局作用域的。 56 作用域鏈.html?閉包：
定義：指的是詞法表示包括不被計算的變量的函數，也就是說，函數可以使用函數之外定義的變量。
閉包的實現：
?
在a ( ) 函數中定義了 b ( ) 函數，所以b ( ) 函數可以訪問a ( ) 函數的作用域。
將 b ( ) 函數升級到全局函數，但依然保留可以對a ( ) 函數作用域的訪問權。
按照預期，最終結果應該輸出 [0 , 1 , 2 ]，但是卻是[ 3 , 3 , 3 ]。
在函數 f ( ) 中，我們通過循環，創建了三個閉包，它們都指向了共同的局部變量 i 。
但是，閉包并不會記錄它們的值，它們所擁有的只是一個 i 的連接（即引用），因此只能返回i 的當前值。
在這里，我們不再直接創建一個返回i 的函數，而是將i 傳遞給了一個自調函數。
在該自調函數中，i 就被賦值給了局部變量x ，這樣一來，每次迭代中的x 就會擁有各自不同的值了。
上面這種，是不使用自調函數的用法。
對象：?? ?
?? ?* 定義對象：
?? ??? ??? ?* 普通對象
?? ??? ??? ??? ?* new Object()
?? ??? ??? ??? ?* var 對象名 = {
?? ??? ??? ??? ??? ?屬性名 : 屬性值,
?? ??? ??? ??? ??? ?方法名 : function(參數){}
?? ??? ??? ??? ?}
??? ???? * 函數對象
?? ??? ??? ??? ?function 對象名(參數){
?? ??? ??? ??? ??? ?this.屬性名 = 屬性值;
?? ??? ??? ??? ??? ?this.方法名 = function(參數){}
?? ??? ??? ??? ?}
?? ??? ?* 調用對象：
?? ??? ??? ?* 普通對象：
?? ??? ??? ??? ?* 調用：
?? ??? ??? ??? ??? ?* 第一種：
?? ??? ??? ??? ??? ??? ?* 對象名.屬性名;
?? ??? ??? ??? ??? ??? ?* 對象名.方法名();
?? ??? ??? ??? ??? ?* 第二種：
?? ??? ??? ??? ??? ??? ?* 對象名['屬性名'];
?? ??? ??? ??? ??? ??? ?* 對象名['方法名']();
?? ??? ??? ??? ?* 增加：
?? ??? ??? ??? ??? ?* 對象名.新的屬性名 = 新的屬性值;
?? ??? ??? ??? ??? ?* 對象名.新的方法名 = 新的function(){}
?? ??? ??? ??? ?* 修改：
?? ??? ??? ??? ??? ?* 對象名.屬性名 = 新的屬性值;
?? ??? ??? ??? ??? ?* 對象名.方法名 = 新的function(){}
?? ??? ??? ??? ?* 刪除：
?? ??? ??? ??? ??? ?* delete 對象名.屬性名;
?? ??? ??? ??? ??? ?* delete 對象名.方法名;
?? ??? ???? * 函數對象：
?? ??? ??? ??? ?* 概念性理解：
?? ??? ??? ??? ??? ?* 函數對象的概念，實際上是不存在的
?? ??? ??? ??? ??? ?* 函數對象實際上是叫做構造器
?? ??? ??? ??? ??? ?* var 對象名 = new 構造器();
?? ??? ??? ??? ?* 獲取到函數對象(構造器)的屬性和方法
?? ??? ??? ??? ??? ?* var 對象名 = new 構造器();
?? ??? ??? ??? ??? ?* 調用、修改、刪除及增加與操作普通對象一致。
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>03_調用對象的屬性和方法.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 //普通對象 19 // var hero = { 20 // name : "zhangwuji", 21 // sayMe : function(){ 22 // alert("i am zhangwuji."); 23 // } 24 // } 25 26 //調用普通對象hero的屬性和方法 27 //1 28 // alert(hero.name); 29 // hero.sayMe(); 30 31 //2 32 // alert(hero['name']); 33 // hero['sayMe'](); 34 35 //增加普通對象hero的屬性和方法 36 //hero.value = "zhouzhiruo"; 37 //alert(hero.value); 38 // hero.sayVal = function(){ 39 // alert("zhangwuji's value is zhouzhiruo."); 40 // } 41 // hero.sayVal(); 42 43 //修改普通對象hero的屬性和方法 44 //hero.name = "zhouzhiruo"; 45 //alert(hero.name); 46 // hero.sayMe = function(){ 47 // alert("i am zhouzhiruo.") 48 // } 49 // hero.sayMe(); 50 51 //刪除普通對象hero的屬性和方法 52 // delete hero.name; 53 // alert(hero.name); 54 55 // delete hero.sayMe; 56 // hero.sayMe(); 57 58 /* 59 * 函數對象:類似于Java中的類的概念 60 * * 實際上,是不存在函數對象的概念的(是我們自己起的名) 61 * * 函數對象實際上是叫做構造器 62 */ 63 function Hero(){ 64 this.name = "zhangwuji"; 65 this.sayMe = function(){ 66 alert("i am zhangwuji."); 67 } 68 } 69 70 /* 71 * 調用之前,必須要先new對象 72 * * 這里的寫法是構造函數的寫法 73 * * hero也是javascript對象,是一個普通對象 74 */ 75 var hero = new Hero(); 76 77 //調用函數對象Hero的屬性和方法 78 // alert(hero.name); 79 // alert(hero['name']); 80 81 // hero.value = "zhouzhiruo"; 82 // alert(hero.value); 83 84 // delete hero.name; 85 // alert(hero.name); 86 87 hero.name = "zhouzhiruo"; 88 alert(hero.name); 89 90 // class A(){ 91 // String name = "zhangwuji"; 92 // } 93 // 94 // A a = new A(); 95 // a.name 96 97 </script> 98 </html> 調用對象的屬性和方法1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>04_this的用法.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 /* 19 * this的用法: 20 * * 指代DOM對象(常用) 21 * * 指代JQuery對象(最不常用) 22 * * 指代javascript對象(居中) 23 * 24 * this的實際用法,不止以上三種. 25 */ 26 //1 指代DOM對象 27 // document.getElementById("ok").onclick = function(){ 28 // this.value; 29 // } 30 31 //2 指代jQuery對象:在jQuery的插件中使用 32 $.each(this,function(){ 33 alert(this.value); 34 }); 35 36 //3 指代javascript對象:只要在函數對象中,使用this的話,this永遠都指代函數對象 37 function Hero(){ 38 this.name = "zhangwuji"; 39 this.sayMe = function(){ 40 alert("hello "+this.name); 41 } 42 } 43 44 var hero = new Hero(); 45 46 hero.sayMe(); 47 48 </script> 49 </html> this的用法
內建對象：
?? ??? ??? ?* 數據封裝類對象
?? ??? ??? ??? ?* String、Array、Number等
?? ??? ??? ?* 工具類對象
?? ??? ??? ??? ?* Date、Math等
?? ??? ??? ?* 錯誤類對象
?? ??? ??? ??? ?* Error、異常對象等
?? ?* 在javascript中，只有對象（變量、方法、集合等）
?? ??? ?* javascript是更純粹的面向對象
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>05_舉例.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 //定義一個字符串 19 var str = "aaaa"; 20 //定義一個數值 21 var i = 7; 22 //定義一個數組 23 var arr = [1,2,3,4,5]; 24 25 /* 26 * 這些所謂的常用類型,可以直接使用 27 * * 這種方式類似于Java中JDK提供的常用類型 28 * * 說明在javascript的底層,提供了類似的常用類型 29 * 30 * javascript的內建對象:Java中的API提供的常用類型 31 * * javascript內建對象:幫助文檔"w3school.chm" 32 * * javascript的內容并不像java一樣,具有完整的幫助文檔.(javascript沒有完整的幫助文檔) 33 */ 34 35 </script> 36 </html> 內建對象Array：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>02_Array對象.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 //以下兩種寫法是等價的 19 var arr1 = []; 20 var arr2 = new Array(); 21 22 alert(typeof arr1); //object 23 alert(typeof arr2); //object 24 25 //Array對象的屬性 26 //1 length屬性:獲取數組長度 27 //alert(arr1.length); 28 29 //2 index和input屬性,放棄的 30 31 //3 constructor屬性:返回對創建此對象的數組函數的引用。(不研究) 32 33 //4 prototype屬性:使您有能力向對象添加屬性和方法。(現在不研究,統一放在原型的內容) 34 35 //Array對象的方法 36 //1 toString()方法:把數組轉換為字符串，并返回結果。 37 38 //2 join()方法:把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。 39 40 //3 pop()和push()方法:刪除并返回數組的最后一個元素；向數組的末尾添加一個或更多元素，并返回新的長度。 41 42 //4 reverse()方法:顛倒數組中元素的順序。 43 44 //javascript的內建對象的屬性和方法,在Java中的JDK的內容,都有類似的內容 45 46 //反轉字符串示例(面試題) 47 48 //定義一個字符串 49 var str = "abcdefg"; 50 //利用String對象的split()方法，將字符串切割成一個數組 51 var arr = str.split(""); 52 //利用Array對象的reverse()方法，將數組中元素的順序顛倒。 53 arr = arr.reverse(); 54 //測試打印 55 alert(arr.toString()); 56 57 //Java的版本至少在1.5版本以上 58 59 60 </script> 61 </html> Array對象String：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>03_String對象.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 //以下兩種寫法不是等價的(面試) 19 var str1 = "aaa"; 20 // var str2 = new String("aaa"); 21 // 22 // alert(typeof str1); //string 23 // alert(typeof str2); //object 24 25 //String對象的屬性 26 //length屬性:字符串的長度(字符的個數) 27 //alert(str1.length); //3 28 29 //String對象的方法 30 //1 substr():從起始索引號提取字符串中指定數目的字符。 31 //2 substring():提取字符串中兩個指定的索引號之間的字符。 32 33 //3 split():把字符串分割為字符串數組。 34 35 //4 replace():替換與正則表達式匹配的子串。 36 37 //判斷字符串是否包含指定字符串示例 38 39 //定義兩個要判斷的字符串 40 var str = "abcdefg"; 41 var substr = "xyz"; 42 43 function sub(str,substr){ 44 //將判斷的字符串定義成String對象 45 var string = new String(str); //不必要,更規范一些 46 //截取判斷的字符串 47 var result = string.substr(string.indexOf(substr),substr.length); 48 49 if(result==substr){ 50 return true; 51 }else{ 52 return false; 53 } 54 } 55 56 alert(sub(str,substr)); 57 58 </script> 59 </html> String對象Events對象：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>04_Events對象.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 /* 19 * Event:事件 20 * Events對象:事件對象 21 * * 在javascript中,具有事件的. 22 * onclick\ondblclick\onchange等 23 * * 事件對象與之前使用的事件內容,是否存在關系? 24 * 之前使用的事件內容,其實是javascript中事件對象的屬性. 25 */ 26 27 28 29 </script> 30 </html> Events對象Functions對象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>05_Functions對象.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 /* 19 * Functions對象:javascript全局對象 20 * * 全局屬性: 21 * * NaN:表示不是一個數值 22 * * undefined:未定義 23 * * 全局方法 24 * * decodeURI():解碼某個編碼的 URI。 25 * * encodeURI():把字符串編碼為 URI。 26 * * escape():對字符串進行編碼。 27 * * eval():計算 JavaScript 字符串，并把它作為腳本代碼來執行。 28 * * isNaN():檢查某個值是否是數字。返回值為Boolean值,true不是數字. 29 * 30 * Functions對象與Function對象:是不是一個? 31 * * Function對象實際上,瀏覽器內核中集成的javascript引擎里. 32 * * 對于Function對象,我們只需要了解new Function()定義函數即可. 33 */ 34 35 36 37 38 </script> 39 </html> Functions對象.htmlObject對象：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>01_Object對象.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 //以下兩種寫法是等價的(面試題) 19 var obj1 = new Object(); 20 var obj2 = {}; 21 22 //Object對象是所有javascript對象的父級. 23 24 //面試題(真實) 25 //判斷以下哪個描述是錯誤的?D 26 // var a = {}; //定義對象 27 // var b = []; //定義數組 28 // var c = //; //定義正則表達式 29 // var d = (); 30 31 //面試題(百度) 32 //alert():提示框,在提示框中實現換行 33 alert("xxx\nyyy"); 34 35 36 </script> 37 </html> Object對象.html?更多參考W3cSchool幫助文檔
原型(prototype)：及其重要(作用)
?? ??? ?* 定義：原型就是一個函數對象的屬性。（記住是函數對象function XXX{? name：xxx......? }）
?? ??? ?* 作用：
?? ??? ??? ?* 利用原型為函數對象增加屬性和方法
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>02_利用原型增加函數對象的屬性或方法.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is m 16 <script type="text/javascript"> 17 // function Hero(){ 18 // this.name = "zhangwuji"; 19 // this.sayMe = function(){ 20 // alert("i am zhangwuji."); 21 // } 22 // } 23 24 //普通對象 25 // var hero = new Hero(); 26 27 //hero.value = "zhouzhiruo"; 28 29 //利用原型為函數對象增加屬性或方法. 30 //函數對象.prototype.新的屬性名 = 新的屬性值; 31 //Hero.prototype.value = "zhouzhiruo"; 32 33 //alert(hero.prototype.value); //output zhouzhiruo 34 //alert(hero.value); 35 36 // Hero.prototype.sayVal = function(){ 37 // alert("i am zhouzhiruo."); 38 // } 39 // 40 // alert(hero.sayVal()); 41 42 //利用原型增加的屬性和方法與上午說的增加屬性和方法的區別?利用原型增加屬性和方法更優 43 //1 定義一個函數對象 44 function Hero(){ 45 this.name = "zhangwuji"; 46 this.sayMe = function(){ 47 alert("i am zhangwuji."); 48 } 49 } 50 51 //2 (分散形式)利用原型增加屬性和方法 52 // Hero.prototype.value = "zhouzhiruo"; 53 // Hero.prototype.sayVal = function(){ 54 // alert("i am zhouzhiruo."); 55 // } 56 57 //學習JSON時 58 // var method = { 59 // add : function(a,b){ 60 // return a+b; 61 // } 62 // } 63 64 /* 65 * (集中方式)將增加屬性和方法的內容,集中寫在一起 66 * * 格式:函數對象.prototype = 新的對象 67 * * 注意:只能先增加,再new對象 68 * (分散形式) 69 * * 先new對象和后new對象,沒有關系 70 */ 71 Hero.prototype = { 72 value : "zhouzhiruo", 73 sayVal : function(){ 74 alert("i am zhouzhiruo."); 75 } 76 } 77 78 //3 new對象 79 var hero = new Hero(); 80 81 //4 測試 82 alert(hero.value); 83 hero.sayVal(); 84 85 </script> 86 </html> 利用原型增加函數對象的屬性或方法.html?? ??? ???? * 函數對象的屬性或方法與原型的屬性或方法同名時:
?? ??? ??? ??? ?* 函數對象本身的屬性和方法的優先級要高于原型上的熟悉感和方法
?? ??? ??? ??? ?* 利用函數對象的屬性和方法重寫原型上的屬性和方法
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>04_利用原型重新定義函數對象.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 //定義一個空的函數對象 19 function Hero(){} 20 21 //函數對象的屬性和方法,都定義在原型上 22 Hero.prototype = { 23 name : "zhangwuji", 24 sayMe : function(){ 25 alert("i am zhangwuji."); 26 } 27 } 28 29 </script> 30 </html> 利用原型重新定義函數對象.html?? ??? ???? * 內建對象(應該都是函數對象)：都有prototype屬性
?? ??? ??? ??? ?* 可以擴展內建對象的屬性和方法
?
繼承：
?? ??? ?* 定義：如果兩個類都是同一個實例的類型，那么它們之間存在著某些關系，
?? ??? ???????? 我們把同一個實例的類型之間的泛化關系稱為“繼承”。
如果兩個類都是同一個實例的類型，那么它們之間存在著某些關系，我們把同一個實例的類型之間的泛化關系稱為“繼承”。
繼承關系至少包含三層含義：
子類的實例可以共享父類的方法。
子類可以覆蓋父類的方法或擴展新的方法。
子類和父類都是子類實例的“類型”。
在javascript中，并不支持“繼承”。也就是說，javascript中沒有繼承的語法。從這個意義上來說，javascript并不是直接的面向對象語言。
?? ??? ?* 問題：
?? ??? ??? ?* 在javascript中，是不存在繼承的關系的（關鍵字 extend）！
?? ??? ??? ?* 在javascript中，沒有類的概念。
?? ??? ??? ?* javascript就不是一個直接的面向對象語言。
?? ??? ?* "繼承"：
?? ??? ??? ?* javascript中函數對象與函數對象之間的繼承。
?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>01_利用原型實現繼承.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 function A(){ 19 this.a = "a"; 20 this.sayA = function(){ 21 alert("this is a."); 22 } 23 } 24 25 var a = new A(); 26 27 function B(){ 28 this.b = "b"; 29 this.sayB = function(){ 30 alert("this is b."); 31 } 32 } 33 34 B.prototype = a; 35 36 //測試:函數對象B就"繼承"了函數對象A 37 var b = new B(); 38 39 // alert(b.b); 40 // b.sayB(); 41 // 42 // alert(b.a); 43 // b.sayA(); 44 45 // b.a = "c"; 46 // b.sayA = function(){ 47 // alert("this is c.") 48 // } 49 // 50 // alert(b.a); 51 // b.sayA(); 52 53 // b.c = "c"; 54 // b.sayC = function(){ 55 // alert("this is c.") 56 // } 57 // 58 // alert(b.c); 59 // b.sayC(); 60 61 </script> 62 </html> 利用原型實現繼承.html?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>02_只繼承于原型.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 // function A(){ 19 // this.a = "a"; 20 // this.sayA = function(){ 21 // alert("this is a."); 22 // } 23 // } 24 // 25 // function B(){ 26 // this.b = "b"; 27 // this.sayB = function(){ 28 // alert("this is b."); 29 // } 30 // } 31 // 32 // B.prototype = A.prototype; 33 // 34 // //測試 35 // var b = new B(); 36 // 37 // alert(b.a); 38 // b.sayA(); 39 40 /******************************************/ 41 42 // function A(){} 43 // 44 // A.prototype = { 45 // a : "a", 46 // sayA : function(){ 47 // alert("this is a.") 48 // } 49 // } 50 // 51 // function B(){} 52 // 53 // B.prototype = { 54 // b : "b", 55 // sayB : function(){ 56 // alert("this is b.") 57 // } 58 // } 59 // 60 // B.prototype = A.prototype; 61 // 62 // var b = new B(); 63 // 64 //// alert(b.a); 65 //// b.sayA(); 66 // 67 // alert(b.b); 68 // b.sayB(); 69 70 /***************************************/ 71 72 function A(){} 73 74 A.prototype = { 75 a : "a", 76 sayA : function(){ 77 alert("this is a.") 78 } 79 } 80 81 function B(){ 82 this.b = "b"; 83 this.sayB = function(){ 84 alert("this is b."); 85 } 86 } 87 88 B.prototype = A.prototype; 89 90 var b = new B(); 91 92 alert(b.b); 93 b.sayB(); 94 95 alert(b.a); 96 b.sayA(); 97 98 </script> 99 </html> 只繼承于原型.html?
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>03_解決多函數對象之間的繼承關系.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 function A(){} 19 20 A.prototype = { 21 a : "a", 22 sayA : function(){ 23 alert("this is a.") 24 } 25 } 26 27 function B(){} 28 29 //這種方式利用原型為函數對象B增加屬性和方法(集中方式) 30 // B.prototype = { 31 // b : "b", 32 // sayB : function(){ 33 // alert("this is b.") 34 // } 35 // } 36 37 //分散形式 38 // B.prototype.b = "b"; 39 // B.prototype.sayB = function(){ 40 // alert("this is b.") 41 // } 42 43 /* 44 * 分析得出這句話出問題了 45 * * 因為B.prototype多次調用 46 * * 出現的順序有關系?誰先定義,誰被覆蓋 47 * * 原型定義屬性和方法的形式有關系?沒有關系 48 */ 49 B.prototype = A.prototype; 50 51 // B.prototype = { 52 // b : "b", 53 // sayB : function(){ 54 // alert("this is b.") 55 // } 56 // } 57 58 /* 59 * 條件: 60 * * 先實現函數對象B"繼承"函數對象A的內容 61 * * 再利用原型為函數對象B增加屬性和方法(分散形式) 62 */ 63 B.prototype.b = "b"; 64 B.prototype.sayB = function(){ 65 alert("this is b.") 66 } 67 68 var b = new B(); 69 70 alert(b.a); 71 b.sayA(); 72 73 alert(b.b); 74 b.sayB(); 75 76 77 78 79 </script> 80 </html> 解決多函數對象之間的繼承關系.html?
?
?
?
?：
原型鏈
1 原型鏈是ECMAScript標準制定的默認繼承方式。 2 function A(){ 3 this.name = "a"; 4 this.toString = function(){return this.name}; 5 } 6 function B(){ 7 this.name = "b"; 8 } 9 function C(){ 10 this.name = "c"; 11 this.age = 18; 12 this.getAge = function(){return this.age}; 13 } 14 15 B.prototype = new A(); 16 C.prototype = new B(); 17 將對象直接創建在B對象的prototype屬性中，并沒有去擴展這些對象的原有原型。 18 通過new A ( ) 另創建了一個新的實體，然后用它去覆蓋該對象的原型。 19 javascript是一種完全依靠對象的語言，其中沒有類（class）的概念。 20 因此，需要直接用new A ( ) 創建一個實體，然后才能通過該實體的屬性完成相關的繼承工作。 21 完成這樣的繼承實現之后，對 A ( ) 所進行的任何修改、重寫或刪除，都不會對 B ( ) 產生影響。 22 23 只繼承于原型： 24 function A(){} 25 A.prototype.name = "a"; 26 A.prototype.toString = function(){return this.name}; 27 28 function B(){} 29 B.prototype = A.prototype; 30 B.prototype.name = "b"; 31 32 function C(){} 33 C.prototype = B.prototype; 34 C.prototype.name = "c"; 35 C.prototype.age = 18; 36 C.prototype.getAge = function(){return this.age}; 37 38 對象之間的繼承（擴展內容，可以不會）（淺復制） 39 //該函數接受一個對象并返回它的副本 40 function extendCopy(p){ 41 var z = {}; //定義一個空的對象z 42 for(var i in p){ //var i =0 ; i < p.length ; i++ 43 z[i] = p[i]; //都當做數組處理的話，可以理解 44 } 45 //uber屬性：將p作為z的父級，將z指向p的原型 46 z.uber = p; 47 return z; 48 } 49 //定義對象a，但是對象a不是函數對象 50 var a = { 51 name : "a", 52 toStr : function(){return this.name;} 53 } 54 //定義對象b，但是對象b不是函數對象 55 var b = extendCopy(a); 56 b.name = "b"; 57 b.toStr = function(){return this.uber.toStr() + " , " + this.name;}; 58 //定義對象c，但是對象c不是函數對象 59 var c = extendCopy(b); 60 c.name = 18; 61 62 alert(c.toStr()); //output a , b , 18 原型鏈?* (了解)javascript中的普通對象之間，是否也存在"繼承"關系呢?存在
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>04_普通對象之間的繼承.html</title> 5 6 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 7 <meta http-equiv="description" content="this is my page"> 8 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 9 10 <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 11 12 </head> 13 14 <body> 15 This is my HTML page. <br> 16 </body> 17 <script type="text/javascript"> 18 //對象之間的繼承 19 20 //該函數接受一個對象并返回它的副本 21 function extendCopy(p){ 22 var z = {}; //定義一個空的對象z 23 for(var i in p){ //var i =0 ; i < p.length ; i++ 24 z[i] = p[i]; //都當做數組處理的話，可以理解 25 } 26 //uber屬性：將p作為z的父級，將z指向p的原型 27 z.uber = p; 28 return z; 29 } 30 //定義普通對象a，但是對象a不是函數對象 31 var a = { 32 name : "a" 33 } 34 //暫且將b也當作普通對象來看待 35 var b = extendCopy(a); 36 b.toStr = function(){return this.name;}; 37 38 alert(b.toStr()); //output a 39 40 </script> 41 </html> 普通對象之間的繼承.html?
?
轉載于:https://www.cnblogs.com/biaogejiushibiao/p/9428210.html
總結
以上是生活随笔為你收集整理的JavaScript高级特征之面向对象笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python的看门狗实现自动化实时对服务
- 下一篇： JavaScript日期格式化处理