整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          第15節(jié) Javascript引用類型-Web前端開

          第15節(jié) Javascript引用類型-Web前端開發(fā)-零點(diǎn)程序員-王唯

          用類型的值(對象)是引用類型的實(shí)例;在ECMAScript中,引用類型是一種數(shù)據(jù)結(jié)構(gòu),用于將數(shù)據(jù)和功能組織在一起,它也常被稱為類;盡管ECMAScript從技術(shù)上講是一門面向?qū)ο蟮恼Z言,但它不具備傳統(tǒng)的面向?qū)ο笳Z言所支持的類和接口等基本結(jié)構(gòu)。

          ECMAScript提供了很多原生引用類型,如Object,以便開發(fā)人員用以實(shí)現(xiàn)常見的計(jì)算任務(wù)。

          引用類型的分類:

          本地對象:獨(dú)立于宿主環(huán)境的由ECMAScript實(shí)現(xiàn)提供的對象.如:Object、Function、Array等;

          內(nèi)置對象:由 ECMAScript實(shí)現(xiàn)提供的,獨(dú)立于宿主環(huán)境的所有對象,如:Global和Math (本質(zhì)上就是靜態(tài)類,不需要?jiǎng)?chuàng)建對象,直接使用);

          宿主對象:所有非本地對象都是宿主對象,即由ECMAScript實(shí)現(xiàn)的宿主環(huán)境提供的對象,如:所有BOM和DOM對象都是宿主對象;

          對象是某個(gè)特定引用類型的實(shí)例,語法:

          var person=new Object();

          使用new操作符及一個(gè)構(gòu)造函數(shù),構(gòu)造函數(shù)本身就是一個(gè)函數(shù),只不過該函數(shù)是出于創(chuàng)建新對象的目的而定義的。

          Object類型:

          • Object類型是ECMAScript中使用最多的一個(gè)類型;
          • Object類是所有類的基類;Object對象提供了JS其他對象的基本功能;
          • Object對象本身并不具備多少功能,在應(yīng)用程序中一般用來存儲和傳輸數(shù)據(jù)而言;

          創(chuàng)建Object實(shí)例:

          方式有兩種:

          使用new和Object的構(gòu)造函數(shù): var o=new Object(); 如:

          var person=new Object();
          person.name="wangwei";
          person.age=18;

          第二種方式:使得對象字面量表示法;

          語法:var oObject={成員 : 值, 方法: function(){}},如:

          var person={
              name:"wangwei",
              age:18
          };

          說明:花括號是表示對象的字面量,因?yàn)樗霈F(xiàn)在表達(dá)式上下文(expression context)中,這個(gè)表達(dá)式最終就是一個(gè)值,并且賦給了一個(gè)變量;

          說明:字面量的屬性采用的是鍵值對的定義方法,即:屬性名:屬性值,中間使用冒號分隔;多個(gè)屬性,使用逗號分隔;

          注,最后的屬性的后面不加逗號了,但加逗號也沒有問題。

          屬性名也可以使用字符串,如:

          var person={
              "name":"wangwei",
              "my age":18,
              5:true
          };

          注:數(shù)值屬性名會自動(dòng)轉(zhuǎn)換為字符串,但使用方式不同。

          使用字面量語法時(shí),可以留空花括號,則可以定義只包含默認(rèn)屬性和方法的空對象,與使用new Object()相同;

          注:在通過字面量定義對象時(shí),實(shí)際上不會調(diào)用Object構(gòu)造函數(shù);

          并且,在實(shí)際場景中,對象字面量是向函數(shù)傳遞大量可選參數(shù)的首選方式,如:

          function displayInfo(args){
              var output="";
              if(typeof args.name=="string"){
                  output +="name:" + args.name + "\n";
              }
              if(typeof args.age=="number"){
                  output +="age:" + args.age + "\n"; 
              }
              alert(output);
          }
          displayInfo({
              name:"wangwei",
              age:18
          });
          displayInfo({
              name:"wujing"
          });

          說明:函數(shù)dispalyInfo()接受一個(gè)名為args的參數(shù);這個(gè)參數(shù)可能帶有一個(gè)名為name或age的屬性,也可能這兩個(gè)屬性都有或者都沒有;在調(diào)有這個(gè)函數(shù)時(shí),使用的是一個(gè)對象字面量來指定不同的數(shù)據(jù);

          注:這種傳遞參數(shù)的模式最適合需要向函數(shù)傳入大量可選參數(shù)的情形;一般來說,命名參數(shù)雖然容易處理,但在有多個(gè)可選參數(shù)的情況下就會顯示不夠靈活;最好的做法是對那些必須值使用命名參數(shù),而使用對象字面量來封裝多個(gè)可選參數(shù)。

          注:關(guān)于對象字面量語法,推薦只在考慮對象屬性名的可讀性時(shí)使用,因?yàn)檫@種語法要求的代碼量少,而且能夠給人封裝數(shù)據(jù)的感覺;另外,選擇字面量,還是因?yàn)樽置媪縿?chuàng)建對象強(qiáng)調(diào)該對象僅是一個(gè)可變的hash映射,而不是從對象中提取的屬性或方法。

          為對象添加方法:

          var wangwei={
              name: "wangwei",
              age: 18,
              sex: "男",
              smoke: function(smoke){
                  console.log('I like smoking,it is ' + smoke);
              },
              drink: function(){
                  console.log('I like to drink');
              }
          }

          Object對象屬性:

          Object對象的屬性是動(dòng)態(tài)的;

          兩種訪問方式,一種是使用點(diǎn)表示法,這也是很多開發(fā)語言的通用的語法;第二種是使用方括號表示法,使用這種方法時(shí),屬性應(yīng)以字符串的形式放在方括號中,如:

          alert(person.name);
          alert(person["name"]);

          說明:從功能上看,這兩種訪問屬性的方式?jīng)]有任何區(qū)別;但使用方括號語法的主要優(yōu)點(diǎn)是可以通過變量來訪問屬性,如:

          var propertyName="name";
          alert(person[propertyName]);

          注:如果屬性名中包含會導(dǎo)致語法錯(cuò)誤的字符,或者屬性名使用的是關(guān)鍵字或保留字,就可以使用方括號表示法,如:

          var person={
              "first name":"wangwei",
              8:true
          };
          alert(person["first name"]);
          alert(person["8"]);

          說明:因?yàn)閷傩悦惺遣荒馨崭窈蛿?shù)字的,所以使用此種方法來訪問。

          注:通常,除非必須使用變量來訪問屬性,否則建議使用點(diǎn)表示法。

          動(dòng)態(tài)添加屬性和方法:

          var stu={};
          stu.name="wujing";
          stu.age=38;
          stu.sex=false;
          function result() {
              console.log(stu.name + '年齡:' + stu.age);
          }
          stu.show=result
          stu.show();

          Object類及對象的屬性和方法:

          constructor屬性:對創(chuàng)建對象的構(gòu)造函數(shù)的引用; 如:

          var obj=new Object();
          console.log(obj.constructor);
          var obj1=new obj.constructor;
          console.log(obj1.constructor);
          console.log(typeof obj1);

          Object.prototype屬性:對該對象的原型的引用;

          console.log(Object.prototype);
          function Person(){}
          console.log(Person.prototype);

          obj.hasOwnProperty(property)方法:判斷該對象是否具有某個(gè)屬性;

          Object.prototype.isPrototypeOf(object)方法:判斷該對象是否為另一個(gè)對象的原型;

          obj.propertyIsEnumerable(property)方法:判斷給定的屬性是否可以用for...in...語句枚舉;

          obj.toString()方法:返回對象的原始字符串表示;

          obj.valueOf()方法:返回最適合該對象的原始值;對于許多類,該方法返回的值都與toString()的返回值相同;

          var obj=new Object();
          obj.name="wangwei";
          if(obj.hasOwnProperty("name")){
              console.log(obj.name);
          }else{
              console.log("沒有此屬性");
          }
          if(obj.propertyIsEnumerable("name")){
              console.log("可枚舉");
          }else{
              console.log("不可枚舉");
          }
          if(Object.prototype.isPrototypeOf(obj)){
              console.log("一樣的原型鏈");
          }else{
              console.log("不一樣的原型鏈");
          }
          console.log(obj.toString());
          console.log(obj.valueOf());

          其它引用類型對象:

          在 JS 中一切皆對象,除了Object這個(gè)頂級對象,有:String、Array、Date、RegExp等常規(guī)對象,還有Error錯(cuò)誤對象等,特別是ES6,增加了大量的對象,比如:Map、Set,還有一些結(jié)構(gòu)化、反射對象;同時(shí)還支持自定義對象。

          var arr=new Array(1,2,3,4,5);
          var str=new String("zeronetwork");
          var d=new Date();
          var pattern=new RegExp("/w/i");
          // 自定義對象
          function Person(name,age){
              this.name=name;
              this.age=age;
          }
          var p=new Person("wangwei",18);
          console.log(p);

          對象的廢除:

          一個(gè)對象不使用,應(yīng)該廢除,來釋放內(nèi)存,JS自帶垃圾回收程序,其會自動(dòng)判斷對象的存活,進(jìn)而釋放掉沒有活引用的對象。

          強(qiáng)制銷毀: oObject=null;對這個(gè)對象的引用就不存在了,下次運(yùn)行收集程序時(shí),該對象將被銷毀。

          必須把對象的所有引用都設(shè)為null,對象才會被清除;

          var o=new Object();
          var obj=o;
          // delete o; // 刪除不掉
          o=null;
          obj=null;
          console.log(o);
          console.log(obj);

          基本類型與引用類型的值:

          ECMAScript變量可能包含兩種不同數(shù)據(jù)類型的值:基本類型值和引用類型值;在將一個(gè)值賦給變量時(shí),解析器必須確定這個(gè)值是基本類型值還是引用類型值;

          基本類型值(原始值)是按值訪問的,因?yàn)榭梢圆僮鞅4嬖谧兞恐械膶?shí)際的值;但原始值是不可變的,任何方法都無法更改一個(gè)原始值;如:

          var str="zeronetwork";
          console.log(str.toUpperCase());
          console.log(str);  // zeronetwork 原始值字沒有改變

          原始值的比較是值的比較:只有在它們的值相等時(shí)它們才相等。

          基本類型值復(fù)制:會在變量對象上創(chuàng)建一個(gè)新值,再把該值復(fù)制給新變量,如:

          var num1=5;
          var num2=num1;

          引用類型值是保存在內(nèi)存中的對象;與其他語言不同,JavaScript不允許直接訪問內(nèi)存中的位置,也就是說不能直接操作對象的內(nèi)存空間;在操作對象時(shí),實(shí)際上是在操作對象的引用而不是實(shí)際的對象,因此,引用類型的值是按引用訪問的。

          引用類型(對象)的值是可變的,如:

          var o={name:"wangwei",age:18};
          console.log(o);
          o.name="wujing";  // 通過修改屬性值來更改對象
          o.sex=false;  // 增加一個(gè)新屬性
          console.log(o);
          
          var arr=[1,2,3,4,5];
          arr[0]=18;    // 修改數(shù)組元素
          arr[3]=20;
          console.log(arr);

          對象的比較并非值的比較,即使兩個(gè)對象包含同樣的屬性及相同的值,它們也不相等;如:

          var o={x:1}, p={x:1};
          console.log(o==p);  // false
          var a=[], b=[];
          console.log(a==b);

          對象的比較是引用的比較,當(dāng)且僅當(dāng)它們引用同一個(gè)基對象時(shí),它們才相等,如引用類型復(fù)制,其會將存儲在變量對象中的值復(fù)制一份放到為新變量分配的空間中,但不同的是,這個(gè)值實(shí)際上是一個(gè)指針,而這個(gè)指針指向存儲在內(nèi)存堆中的同個(gè)對象;復(fù)制之后,兩個(gè)變量實(shí)際上將引用同一個(gè)對象;因此,改變其中一個(gè)變量,將影響到另一個(gè)變量,如:

          var obj1=new Object();
          var obj2=obj1;
          obj1.name="wangwei";
          alert(obj2.name);  // wangwei

          引用類型的復(fù)制:

          以上所說的是引用類型的淺復(fù)制,相對的,還有一個(gè)深復(fù)制,即得到一個(gè)對象或數(shù)組的副本,則必須顯式復(fù)制對象的每個(gè)屬性或數(shù)組的每個(gè)元素,如:

          var a=["beijing","nanjing","anhui"];
          var b=[];
          for(var i=0;i<a.length;i++){
              b[i]=a[i];
          }
          console.log(b);

          如果想比較兩個(gè)單獨(dú)的對象或者數(shù)組,則必須比較它們的屬性或元素,如:

          function equalArrays(a,b) {
              if(a.length !=b.length) return false;
              for(var i=0;i<length; i++){
                  if(a[i] !==b[i]) return false;
              }
              return true;
          }
          var a=[1,2,3];
          var b=[1,2,3,4];
          console.log(equalArrays(a,b));

          Web前端開發(fā)之Javascript-零點(diǎn)程序員-王唯

          1)javascript的使用

          HTML 中的腳本必須位于 <script> 與 </script> 標(biāo)簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。

          <script> 和 </script> 會告訴 JavaScript 在何處開始和結(jié)束。

          <script> 和 </script> 之間的代碼行包含了 JavaScript。

          使用<script>的方式有兩種,一種是直接在頁面中嵌入Javascript代碼,類是上邊圖片所示,另一種是包含外部JavaScript文件。包含在<script>內(nèi)的javascript代碼將被自上而下的依次解釋。也可以把腳本保存到外部文件中。外部文件通常包含被多個(gè)網(wǎng)頁使用的代碼。外部 JavaScript 文件的文件擴(kuò)展名是 .js。如需使用外部文件,請?jiān)?<script> 標(biāo)簽的 "src" 屬性中設(shè)置該 .js 文件的路徑。原理同css的引用類似。

          (2)javascript標(biāo)簽的位置

          按照傳統(tǒng)做法,所有的<script>元素都應(yīng)放在<head>標(biāo)簽里面,這樣做的目的是把所有的外部文件(css文件和javascript文件)都放在相同的地方,便于管理。可是放在<head>中就意味著必須等所有的javascript代碼 下載、解析、執(zhí)行完之后,頁面要呈現(xiàn)的內(nèi)容才會被加載(瀏覽器在遇到<body>元素的時(shí)候才會加載呈現(xiàn)頁面內(nèi)容)。對于那些要執(zhí)行很多javascript代碼的頁面來說,這無疑會導(dǎo)致瀏覽器在呈現(xiàn)頁面時(shí)會出現(xiàn)很明顯的延時(shí),而延時(shí)期間頁面一片空白,(等待javascript加載,未執(zhí)行到<body>元素),這對于用戶體驗(yàn)來說是無法容忍的,為避免這個(gè)問題,現(xiàn)代web程序一般都把javascript用于放到<body>元素中頁面內(nèi)容的最后面,即結(jié)束標(biāo)簽</body>之前。如上個(gè)程序代碼所示。

          (3)延遲腳本defer和異步腳本async

          延遲腳本defer:這個(gè)屬性的用途是表明腳本在執(zhí)行時(shí)不會影響頁面的構(gòu)造。也就是說,腳本會被延遲到整個(gè)頁面都解析完畢后再運(yùn)行。因此,在<script>元素中設(shè)置defer 屬性,相當(dāng)于告訴瀏覽器立即下載,但延遲執(zhí)行。具體使用如下圖所示:

          異步腳本async:這個(gè)屬性與 defer 屬性類似,async 只適用于外部腳本文件,并告訴瀏覽器立即下載文件。但與 defer不同的是,標(biāo)記為 async 的腳本不必等待其他腳本,也不必阻塞文檔呈現(xiàn),并且不保證按照指定它們的先后順序執(zhí)行。具體使用如下圖所示:

          (4)<noscript>元素

          如果瀏覽器不支持 JavaScript ,或者被用戶手動(dòng)屏蔽時(shí),對這種問題的最終解決方案就是創(chuàng)造一個(gè)<noscript>元素,用以在不支持 JavaScript 的瀏覽器中顯示替代的內(nèi)容。這個(gè)元素可以包含能夠出現(xiàn)在文檔<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的內(nèi)容只有在下列情況下才會顯示出來。具體的使用如下所示:

          ?

          這個(gè)頁面會在腳本無效的情況下向用戶顯示一條消息。而在啟用了腳本的瀏覽器中,用戶永遠(yuǎn)也不會看到它——盡管它是頁面的一部分。

          每日金句:我沒有停止愛你,我只是決定不再表現(xiàn)出來。喜歡我的文章的小伙伴記得關(guān)注一下哦,每天將為你更新最新知識。

          、JavaScript數(shù)據(jù)類型

          (1)基本類型

          5種基本類型:Undefined、Null、Boolean、Number、String

          (2)引用類型

          5種引用類型:Object、Array、Date、RepExp、Function

          (3)基本類型與引用類型的異同:

          1.保存方式

          基本類型是按值訪問的。引用類型的值是按引用訪問的,引用類型的值是保存在內(nèi)存中的對象,JavaScript在操作對象時(shí),實(shí)際上是操作對象的引用而不是實(shí)際的對象。

          2.復(fù)制變量值

          復(fù)制基本類型值會在變量對象上創(chuàng)建一個(gè)新值,然后把該值復(fù)制到為新變量分配的位置上。復(fù)制引用類型值也會將存儲在變量對象的值復(fù)制一份到新變量的空間,只是值的副本是一個(gè)指針,指向存儲在堆中的一個(gè)對象。

          3.參數(shù)傳遞

          JavaScript中訪問變量有按值和引用兩種方式,而參數(shù)只能按值傳遞。

          2、Object類型

          對象是某個(gè)引用類型的實(shí)例。

          大多數(shù)引用類型值都是Object類型的實(shí)例。

          ---創(chuàng)建Object實(shí)例的方法

          (1) 使用new操作符后跟Object構(gòu)造函數(shù)。

          var person=new Object();
          person.name="Alice";
          person.age=23;
          person[5]=true;
          

          (2) 使用字面量表示法。

          var person={
           "name" : "Alice",
           age : 23,
           5 : true
          };
          

          當(dāng)屬性名是字符串時(shí),引號(單、雙引號)可用也可不用。

          對象字面量是向函數(shù)傳遞大量可選參數(shù)的首選方式。

          ---訪問對象屬性的方法

          (1) 點(diǎn)表示法

          alert(person.name);
          

          (2)方括號表示法

          alert(person["name"];
          

          方括號表示法的優(yōu)點(diǎn):可以通過變量來訪問屬性。

          var property="name";
          alert(person[property];
          

          若屬性名中包含空格等或?qū)傩悦菙?shù)值時(shí),不能用點(diǎn)表示法,只能用方括號表示法。

          alert(person[5]);
          

          對前端的技術(shù),架構(gòu)技術(shù)感興趣的同學(xué)關(guān)注我的頭條號,并在后臺私信發(fā)送關(guān)鍵字:“前端”即可獲取免費(fèi)的架構(gòu)師學(xué)習(xí)資料

          知識體系已整理好,歡迎免費(fèi)領(lǐng)取。還有面試視頻分享可以免費(fèi)獲取。關(guān)注我,可以獲得沒有的架構(gòu)經(jīng)驗(yàn)哦!!


          主站蜘蛛池模板: 狠狠色婷婷久久一区二区三区| 一区二区三区四区精品视频| 亚洲熟妇av一区二区三区 | 久久久久人妻一区二区三区vr| 国产精品无码一区二区在线观 | 亚洲av日韩综合一区久热| 精品国产福利第一区二区三区| 欧洲亚洲综合一区二区三区| 青青青国产精品一区二区| 国产综合精品一区二区三区| 秋霞电影网一区二区三区| 久久精品国内一区二区三区| 精品国产一区二区三区香蕉| 亚洲视频一区在线| 色老头在线一区二区三区 | 亚洲综合无码一区二区痴汉| 性色A码一区二区三区天美传媒 | 中文字幕在线一区| 国产韩国精品一区二区三区| 性色AV 一区二区三区| 美女视频免费看一区二区| 精品乱码一区二区三区在线| 国产一区中文字幕| 一区二区三区免费电影| 亚洲AV日韩精品一区二区三区| 国产三级一区二区三区| 日韩社区一区二区三区| av无码精品一区二区三区四区| 日本一区二区三区在线看| 日本v片免费一区二区三区 | 亚洲日韩精品无码一区二区三区| 精品视频一区二区三区| 国产精品女同一区二区久久 | 久久一区二区免费播放| 精品一区二区三区免费观看| 色婷婷AV一区二区三区浪潮 | 日韩AV无码一区二区三区不卡 | 亚洲Aⅴ无码一区二区二三区软件| 亚洲av高清在线观看一区二区| 成人日韩熟女高清视频一区| 无码乱人伦一区二区亚洲一|