用類型的值(對象)是引用類型的實(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類型:
創(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)程序員-王唯
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的引用類似。
按照傳統(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è)程序代碼所示。
延遲腳本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í)行。具體使用如下圖所示:
如果瀏覽器不支持 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)哦!!
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。