Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
用類型的值(對象)是引用類型的實例;在ECMAScript中,引用類型是一種數據結構,用于將數據和功能組織在一起,它也常被稱為類;盡管ECMAScript從技術上講是一門面向對象的語言,但它不具備傳統的面向對象語言所支持的類和接口等基本結構。
ECMAScript提供了很多原生引用類型,如Object,以便開發人員用以實現常見的計算任務。
引用類型的分類:
本地對象:獨立于宿主環境的由ECMAScript實現提供的對象.如:Object、Function、Array等;
內置對象:由 ECMAScript實現提供的,獨立于宿主環境的所有對象,如:Global和Math (本質上就是靜態類,不需要創建對象,直接使用);
宿主對象:所有非本地對象都是宿主對象,即由ECMAScript實現的宿主環境提供的對象,如:所有BOM和DOM對象都是宿主對象;
對象是某個特定引用類型的實例,語法:
var person=new Object();
使用new操作符及一個構造函數,構造函數本身就是一個函數,只不過該函數是出于創建新對象的目的而定義的。
Object類型:
創建Object實例:
方式有兩種:
使用new和Object的構造函數: var o=new Object(); 如:
var person=new Object();
person.name="wangwei";
person.age=18;
第二種方式:使得對象字面量表示法;
語法:var oObject={成員 : 值, 方法: function(){}},如:
var person={
name:"wangwei",
age:18
};
說明:花括號是表示對象的字面量,因為它出現在表達式上下文(expression context)中,這個表達式最終就是一個值,并且賦給了一個變量;
說明:字面量的屬性采用的是鍵值對的定義方法,即:屬性名:屬性值,中間使用冒號分隔;多個屬性,使用逗號分隔;
注,最后的屬性的后面不加逗號了,但加逗號也沒有問題。
屬性名也可以使用字符串,如:
var person={
"name":"wangwei",
"my age":18,
5:true
};
注:數值屬性名會自動轉換為字符串,但使用方式不同。
使用字面量語法時,可以留空花括號,則可以定義只包含默認屬性和方法的空對象,與使用new Object()相同;
注:在通過字面量定義對象時,實際上不會調用Object構造函數;
并且,在實際場景中,對象字面量是向函數傳遞大量可選參數的首選方式,如:
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"
});
說明:函數dispalyInfo()接受一個名為args的參數;這個參數可能帶有一個名為name或age的屬性,也可能這兩個屬性都有或者都沒有;在調有這個函數時,使用的是一個對象字面量來指定不同的數據;
注:這種傳遞參數的模式最適合需要向函數傳入大量可選參數的情形;一般來說,命名參數雖然容易處理,但在有多個可選參數的情況下就會顯示不夠靈活;最好的做法是對那些必須值使用命名參數,而使用對象字面量來封裝多個可選參數。
注:關于對象字面量語法,推薦只在考慮對象屬性名的可讀性時使用,因為這種語法要求的代碼量少,而且能夠給人封裝數據的感覺;另外,選擇字面量,還是因為字面量創建對象強調該對象僅是一個可變的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對象的屬性是動態的;
兩種訪問方式,一種是使用點表示法,這也是很多開發語言的通用的語法;第二種是使用方括號表示法,使用這種方法時,屬性應以字符串的形式放在方括號中,如:
alert(person.name);
alert(person["name"]);
說明:從功能上看,這兩種訪問屬性的方式沒有任何區別;但使用方括號語法的主要優點是可以通過變量來訪問屬性,如:
var propertyName="name";
alert(person[propertyName]);
注:如果屬性名中包含會導致語法錯誤的字符,或者屬性名使用的是關鍵字或保留字,就可以使用方括號表示法,如:
var person={
"first name":"wangwei",
8:true
};
alert(person["first name"]);
alert(person["8"]);
說明:因為屬性名中是不能包含空格和數字的,所以使用此種方法來訪問。
注:通常,除非必須使用變量來訪問屬性,否則建議使用點表示法。
動態添加屬性和方法:
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屬性:對創建對象的構造函數的引用; 如:
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)方法:判斷該對象是否具有某個屬性;
Object.prototype.isPrototypeOf(object)方法:判斷該對象是否為另一個對象的原型;
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這個頂級對象,有:String、Array、Date、RegExp等常規對象,還有Error錯誤對象等,特別是ES6,增加了大量的對象,比如:Map、Set,還有一些結構化、反射對象;同時還支持自定義對象。
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);
對象的廢除:
一個對象不使用,應該廢除,來釋放內存,JS自帶垃圾回收程序,其會自動判斷對象的存活,進而釋放掉沒有活引用的對象。
強制銷毀: oObject=null;對這個對象的引用就不存在了,下次運行收集程序時,該對象將被銷毀。
必須把對象的所有引用都設為null,對象才會被清除;
var o=new Object();
var obj=o;
// delete o; // 刪除不掉
o=null;
obj=null;
console.log(o);
console.log(obj);
基本類型與引用類型的值:
ECMAScript變量可能包含兩種不同數據類型的值:基本類型值和引用類型值;在將一個值賦給變量時,解析器必須確定這個值是基本類型值還是引用類型值;
基本類型值(原始值)是按值訪問的,因為可以操作保存在變量中的實際的值;但原始值是不可變的,任何方法都無法更改一個原始值;如:
var str="zeronetwork";
console.log(str.toUpperCase());
console.log(str); // zeronetwork 原始值字沒有改變
原始值的比較是值的比較:只有在它們的值相等時它們才相等。
基本類型值復制:會在變量對象上創建一個新值,再把該值復制給新變量,如:
var num1=5;
var num2=num1;
引用類型值是保存在內存中的對象;與其他語言不同,JavaScript不允許直接訪問內存中的位置,也就是說不能直接操作對象的內存空間;在操作對象時,實際上是在操作對象的引用而不是實際的對象,因此,引用類型的值是按引用訪問的。
引用類型(對象)的值是可變的,如:
var o={name:"wangwei",age:18};
console.log(o);
o.name="wujing"; // 通過修改屬性值來更改對象
o.sex=false; // 增加一個新屬性
console.log(o);
var arr=[1,2,3,4,5];
arr[0]=18; // 修改數組元素
arr[3]=20;
console.log(arr);
對象的比較并非值的比較,即使兩個對象包含同樣的屬性及相同的值,它們也不相等;如:
var o={x:1}, p={x:1};
console.log(o==p); // false
var a=[], b=[];
console.log(a==b);
對象的比較是引用的比較,當且僅當它們引用同一個基對象時,它們才相等,如引用類型復制,其會將存儲在變量對象中的值復制一份放到為新變量分配的空間中,但不同的是,這個值實際上是一個指針,而這個指針指向存儲在內存堆中的同個對象;復制之后,兩個變量實際上將引用同一個對象;因此,改變其中一個變量,將影響到另一個變量,如:
var obj1=new Object();
var obj2=obj1;
obj1.name="wangwei";
alert(obj2.name); // wangwei
引用類型的復制:
以上所說的是引用類型的淺復制,相對的,還有一個深復制,即得到一個對象或數組的副本,則必須顯式復制對象的每個屬性或數組的每個元素,如:
var a=["beijing","nanjing","anhui"];
var b=[];
for(var i=0;i<a.length;i++){
b[i]=a[i];
}
console.log(b);
如果想比較兩個單獨的對象或者數組,則必須比較它們的屬性或元素,如:
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前端開發之Javascript-零點程序員-王唯
HTML 中的腳本必須位于 <script> 與 </script> 標簽之間。腳本可被放置在 HTML 頁面的 <body> 和 <head> 部分中。
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束。
<script> 和 </script> 之間的代碼行包含了 JavaScript。
使用<script>的方式有兩種,一種是直接在頁面中嵌入Javascript代碼,類是上邊圖片所示,另一種是包含外部JavaScript文件。包含在<script>內的javascript代碼將被自上而下的依次解釋。也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。外部 JavaScript 文件的文件擴展名是 .js。如需使用外部文件,請在 <script> 標簽的 "src" 屬性中設置該 .js 文件的路徑。原理同css的引用類似。
按照傳統做法,所有的<script>元素都應放在<head>標簽里面,這樣做的目的是把所有的外部文件(css文件和javascript文件)都放在相同的地方,便于管理。可是放在<head>中就意味著必須等所有的javascript代碼 下載、解析、執行完之后,頁面要呈現的內容才會被加載(瀏覽器在遇到<body>元素的時候才會加載呈現頁面內容)。對于那些要執行很多javascript代碼的頁面來說,這無疑會導致瀏覽器在呈現頁面時會出現很明顯的延時,而延時期間頁面一片空白,(等待javascript加載,未執行到<body>元素),這對于用戶體驗來說是無法容忍的,為避免這個問題,現代web程序一般都把javascript用于放到<body>元素中頁面內容的最后面,即結束標簽</body>之前。如上個程序代碼所示。
延遲腳本defer:這個屬性的用途是表明腳本在執行時不會影響頁面的構造。也就是說,腳本會被延遲到整個頁面都解析完畢后再運行。因此,在<script>元素中設置defer 屬性,相當于告訴瀏覽器立即下載,但延遲執行。具體使用如下圖所示:
異步腳本async:這個屬性與 defer 屬性類似,async 只適用于外部腳本文件,并告訴瀏覽器立即下載文件。但與 defer不同的是,標記為 async 的腳本不必等待其他腳本,也不必阻塞文檔呈現,并且不保證按照指定它們的先后順序執行。具體使用如下圖所示:
如果瀏覽器不支持 JavaScript ,或者被用戶手動屏蔽時,對這種問題的最終解決方案就是創造一個<noscript>元素,用以在不支持 JavaScript 的瀏覽器中顯示替代的內容。這個元素可以包含能夠出現在文檔<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的內容只有在下列情況下才會顯示出來。具體的使用如下所示:
?
這個頁面會在腳本無效的情況下向用戶顯示一條消息。而在啟用了腳本的瀏覽器中,用戶永遠也不會看到它——盡管它是頁面的一部分。
每日金句:我沒有停止愛你,我只是決定不再表現出來。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。
、JavaScript數據類型
(1)基本類型
5種基本類型:Undefined、Null、Boolean、Number、String
(2)引用類型
5種引用類型:Object、Array、Date、RepExp、Function
(3)基本類型與引用類型的異同:
1.保存方式
基本類型是按值訪問的。引用類型的值是按引用訪問的,引用類型的值是保存在內存中的對象,JavaScript在操作對象時,實際上是操作對象的引用而不是實際的對象。
2.復制變量值
復制基本類型值會在變量對象上創建一個新值,然后把該值復制到為新變量分配的位置上。復制引用類型值也會將存儲在變量對象的值復制一份到新變量的空間,只是值的副本是一個指針,指向存儲在堆中的一個對象。
3.參數傳遞
JavaScript中訪問變量有按值和引用兩種方式,而參數只能按值傳遞。
2、Object類型
對象是某個引用類型的實例。
大多數引用類型值都是Object類型的實例。
---創建Object實例的方法
(1) 使用new操作符后跟Object構造函數。
var person=new Object(); person.name="Alice"; person.age=23; person[5]=true;
(2) 使用字面量表示法。
var person={ "name" : "Alice", age : 23, 5 : true };
當屬性名是字符串時,引號(單、雙引號)可用也可不用。
對象字面量是向函數傳遞大量可選參數的首選方式。
---訪問對象屬性的方法
(1) 點表示法
alert(person.name);
(2)方括號表示法
alert(person["name"];
方括號表示法的優點:可以通過變量來訪問屬性。
var property="name"; alert(person[property];
若屬性名中包含空格等或屬性名是數值時,不能用點表示法,只能用方括號表示法。
alert(person[5]);
對前端的技術,架構技術感興趣的同學關注我的頭條號,并在后臺私信發送關鍵字:“前端”即可獲取免費的架構師學習資料
知識體系已整理好,歡迎免費領取。還有面試視頻分享可以免費獲取。關注我,可以獲得沒有的架構經驗哦!!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。