JavaScript基礎(chǔ)之對(duì)象
1.對(duì)象
1.1什么是對(duì)象?
在JavaScript中,對(duì)象是一組無(wú)序的相關(guān)屬性和方法的集合,所有的事物都是對(duì)象,例如字符串、數(shù)值、數(shù)組、函數(shù)等。
對(duì)象是由屬性和方法組成的
- 屬性:事物的特征,在對(duì)象中用屬性來(lái)表示
- 方法:事物的行為,在對(duì)象中用方法來(lái)表示
1.2為什么需要對(duì)象
保存一個(gè)值時(shí),可以使用變量,保存(一組值)時(shí),可以使用數(shù)組。如果要保存一個(gè)人的完整信息呢?
例如,將張三的個(gè)人信息保存在數(shù)組中的方式為:
var arr = ['張三','男',123,156];
用對(duì)象的方式將張三的個(gè)人信息保存下來(lái),更為清晰一點(diǎn)。
2.創(chuàng)建對(duì)象的三種方式
2.1利用對(duì)象字面量創(chuàng)建對(duì)象{}
對(duì)象字面量:就是{ }里面包含了表達(dá)這個(gè)具體事物的(對(duì)象)的屬性和方法。
<script> //利用對(duì)象字面量創(chuàng)建對(duì)象{} var obj = {};//創(chuàng)建了一個(gè)空的對(duì)象 var obj = { uname: '張三', age: 18, sex: '男', sayhi: function () { console.log('hi'); } }; //(1)里面的屬性或方法我們采取鍵值對(duì)的形式 鍵 屬性名: 值 屬性值 //(2)多個(gè)屬性或方法中間用逗號(hào)隔開(kāi) //(3)方法后面跟的是一個(gè)匿名函數(shù) //2.使用對(duì)象 //(1) 調(diào)用對(duì)象的屬性 我們采取 對(duì)象.屬性名的方式 console.log(obj.uname); //(2)調(diào)用對(duì)象的屬性 對(duì)象名['屬性名'] console.log(obj['age']); //(3)調(diào)用對(duì)象的方法 對(duì)象名.方法名 obj.sayhi(); </script>
2.2利用new Object創(chuàng)建對(duì)象
// //利用new Object創(chuàng)建對(duì)象 var obj = new Object();//創(chuàng)建了一個(gè)空的對(duì)象 obj.uname = '張三'; obj.age = 18; obj.sex = '男'; obj.sayhi = function () { console.log('hi~'); } console.log(obj['uname']); console.log(obj.sex); obj.sayhi(); //(1) 我們是利用 等號(hào)=賦值的方法 添加對(duì)象的屬性和方法 //(2) 每個(gè)屬性和方法之間用 ; 結(jié)束 //案例 var Object = new Object(); Object.uname = '鳴人'; Object.sex = '男'; Object.age = 19; Object.skill = function () { console.log('影分身術(shù)'); } console.log(Object.uname); Object.skill();
2.3 利用構(gòu)造函數(shù)創(chuàng)建對(duì)象
//我們?yōu)槭裁葱枰褂脴?gòu)造函數(shù) //就是因?yàn)槲覀兦皟煞N創(chuàng)建對(duì)象的方式一次只能創(chuàng)建一個(gè)對(duì)象 //因?yàn)槲覀円淮蝿?chuàng)建一個(gè)對(duì)象,里面很多的屬性和方法是大量相同的 利用函數(shù)來(lái)實(shí)現(xiàn)代碼的復(fù)用 這個(gè)函數(shù)就稱為 構(gòu)造函數(shù) // 構(gòu)造函數(shù)里封裝的是 對(duì)象 //構(gòu)造函數(shù) 就是把我們對(duì)象里面一些相同的屬性和方法抽象出來(lái)封裝到函數(shù)里面
構(gòu)造函數(shù):是一種特殊的函數(shù),主要用來(lái)初始化對(duì)象,即為對(duì)象成員變量賦初始值,它總是與new運(yùn)算符一起使用。我們可以把對(duì)象中一些公共的屬性和方法抽象出來(lái),然后封裝到這個(gè)函數(shù)中。
<script> //利用構(gòu)造函數(shù)創(chuàng)建對(duì)象 //構(gòu)造函數(shù)的語(yǔ)法格式 // function 構(gòu)造函數(shù)名() { // this.屬性 = 值; // this.方法 = function() {} // } // new 構(gòu)造函數(shù)名(); function Star(uname, age, sex) { this.name = uname; this.age = age; this.sex = sex; this.sing = function (song) { console.log(song); } } var ldh = new Star('劉德華', 18, '男');//調(diào)用函數(shù)返回的是一個(gè)對(duì)象 console.log(typeof ldh); console.log(ldh.name); console.log(ldh['sex']); ldh.sing('冰雨'); var zxy = new Star('張學(xué)友', 36, '男'); console.log(zxy.name); console.log(zxy['sex']); zxy.sing('李香蘭'); //1.構(gòu)造函數(shù)名字首字母要大寫 //2.我們構(gòu)造函數(shù)不需要return 就可以返回結(jié)果 //3.我們調(diào)用構(gòu)造函數(shù) 必須使用 new //4.我們只要new Srart() 調(diào)用函數(shù)就創(chuàng)建了一個(gè)對(duì)象 //5.我們的屬性和方法前面必須加this </script>
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
js中top/parent/frame概述及案例應(yīng)用
top:永遠(yuǎn)指分割窗口最高層次的瀏覽器窗口;parent:包含當(dāng)前分割窗口的父窗口,本文將圍繞js中top、parent、frame進(jìn)行講述及他們的應(yīng)用案例2013-02-02簡(jiǎn)單談?wù)刯avascript中this的隱式綁定
在JavaScript中,this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?,this 還是隨處可用的。這篇文章介紹了this的隱式綁定,希望大家能夠喜歡。2016-02-02JavaScript基本概念初級(jí)講解論壇貼的學(xué)習(xí)記錄
JavaScript基本概念 論壇貼建議大家看下,都是一些js的高級(jí)的技巧知識(shí)小結(jié)。2009-02-02簡(jiǎn)述JavaScript對(duì)傳統(tǒng)文檔對(duì)象模型的支持
這篇文章主要介紹了簡(jiǎn)述JavaScript對(duì)傳統(tǒng)文檔對(duì)象模型的支持,是JS學(xué)習(xí)進(jìn)階中的重要知識(shí),需要的朋友可以參考下2015-06-06淺析javascript中function 的 length 屬性
length 屬性可返回字符串中的字符數(shù)目。而function中l(wèi)ength獲取為一個(gè)函數(shù)定義的參數(shù)數(shù)目。2014-05-05淺談js內(nèi)置對(duì)象Math的屬性和方法(推薦)
下面小編就為大家?guī)?lái)一篇淺談js內(nèi)置對(duì)象Math的屬性和方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記13 ECMAScript5新特性
通常而言,JavaScript由ECMAScript核心、BOM和DOM三部分構(gòu)成,前面的文章將ECMAScript核心部分粗略的過(guò)了一篇2012-10-10