JavaScript進(jìn)階之函數(shù)和對(duì)象知識(shí)點(diǎn)詳解
我們?cè)谏掀趦?nèi)容中學(xué)習(xí)了JavaScript的基本知識(shí)點(diǎn),今天讓我們更加深入地了解JavaScript
JavaScript函數(shù)
JavaScript函數(shù)和Java函數(shù)是有一部分相似的,所以學(xué)習(xí)起來也會(huì)相對(duì)簡單
基本構(gòu)造
1.直接構(gòu)造
//function代表函數(shù)標(biāo)志,name為函數(shù)名稱,參數(shù)可有可無 function name( 參數(shù) ) { //... return; }
2.賦值構(gòu)造
//相當(dāng)于function為匿名函數(shù),然后匿名函數(shù)所得出的值返回給name,因而name可以調(diào)用function函數(shù) var name = function( 參數(shù) ){ //... }
注意:
- 在JavaScript中,return是可有可無的
- 當(dāng)存在return時(shí),運(yùn)行到return,結(jié)束函數(shù),并返回該值
- 當(dāng)不存在return時(shí),全部運(yùn)行完畢,結(jié)束函數(shù),返回underfined值
調(diào)用函數(shù)方法
當(dāng)調(diào)用函數(shù)時(shí),直接書寫函數(shù)名稱并加上相對(duì)應(yīng)的參數(shù)即可
name(參數(shù));
注意:
- JavaScript可以傳入與之不對(duì)應(yīng)的參數(shù)
- 當(dāng)參數(shù)傳入較多,參數(shù)進(jìn)入函數(shù)但不代表函數(shù)內(nèi)任意參數(shù),只是單純傳入?yún)?shù)
- 當(dāng)參數(shù)傳入較少,參數(shù)進(jìn)入函數(shù),后面未傳入的參數(shù)在函數(shù)內(nèi)部以u(píng)nderfined的形式存在
函數(shù)參數(shù)argument和rest
argument代表函數(shù)中傳入進(jìn)來的所有參數(shù),是一個(gè)數(shù)組
我們可以在函數(shù)中使用:
function name( ) { //... console.log(arguments[0]), console.log(arguments[1]), //... }
rest代表函數(shù)中傳入進(jìn)來的未定義的參數(shù),需要提前在函數(shù)中定義
我們同樣可以在函數(shù)中使用:
var names = function(name,age,...rest){ //... console.log(name); console.log(age); for(var value of rest){ console.log(value) } }
代碼調(diào)試
我們針對(duì)上面所有知識(shí)點(diǎn)給出相應(yīng)代碼示例:
//我們演示argument function name( ) { //... console.log(arguments[0]) } //我們演示rest var names = function(name,age,...rest){ //... console.log(name); console.log(age); for(var value of rest){ console.log(value) } }
下面我們?cè)诰W(wǎng)頁中進(jìn)行調(diào)試:
name(1,2,3,"胡桃",true)
1
names("胡桃",18,"護(hù)膜","魔女")
胡桃
18
護(hù)膜
魔女
變量的作用域
對(duì)于任何含有變量的語言,作用域是必定存在的
對(duì)于JavaScript,var所定義的變量實(shí)際上也是存在作用域的
函數(shù)體內(nèi)變量作用域解釋
1.假如在函數(shù)體中聲明,則在函數(shù)體外不可以使用
function test1() { var x=1; x=x+1; } x=x+2;//Uncaught ReferenceError: x is not defined
2.如果兩個(gè)函數(shù)使用了相同的變量名,只要在函數(shù)內(nèi)部,則不產(chǎn)生沖突
function test1() { var x=1; x=x+1; } function test2(){ var x=1; x=x+2; }
3.內(nèi)部函數(shù)可以使用外部函數(shù)的成員,但外部函數(shù)不能使用內(nèi)部函數(shù)的成員
function test3(){ var x=1; //內(nèi)部函數(shù)使用外部函數(shù)的成員 function indextest(){ var y=1; x = x+1; console.log(x); } indextest(); //外部函數(shù)不可以使用內(nèi)部函數(shù)成員 y=y+1;//Uncaught ReferenceError: y is not defined }
4.當(dāng)內(nèi)部函數(shù)變量和外部函數(shù)變量重名時(shí),由內(nèi)向外查找,就近原則
function test4(){ var x=1; function indextest() { var x=2; console.log(x); } indextest();//這里結(jié)果為2 }
良好的變量定義格式
我們?cè)贘avaScript函數(shù)中定義變量時(shí),常常將所有變量在頭部定義完全,然后在后面使用
function test5(){ //在開頭定義好所有變量 var x=3,y=2,z,name; //在后面可以隨便使用變量 x=x+2; z=x+y; }
全局變量
全局變量常常帶有window前綴,但默認(rèn)帶有,所以不需要書寫
window屬于JavaScript下的一個(gè)對(duì)象,window之下包含我們所定義的全局變量以及各種函數(shù)方法
function test6(){ var x = 1; //下面所輸出的x均為上方所定義的全局變量x console.log(x); console.log(window.x); //下面所使用的alert和window.alert具有相同代碼相同作用 alert(x); window.alert(x); }
我們也可以通過重新定義window下的函數(shù)方法來更改該函數(shù)原有的操作
//在下述操作之后,alert不會(huì)產(chǎn)生輸出作用 window.alert = function() { } alert("Hello");
注意:
JavaScript實(shí)際上只有一個(gè)全局作用域,任何變量(包括函數(shù)),假如沒有在函數(shù)作用域內(nèi)找到,就會(huì)向外查找,若在全局作用域內(nèi)均未查找到,則報(bào)錯(cuò)RefrenceError
局部變量
在JavaScript的ES5中會(huì)出現(xiàn)變量作用域過大導(dǎo)致代碼沖突的結(jié)果:
function test7(){ for(var x=1;x<10;x++){ console.log(x); } // 我們希望x的作用域只在for中,但它仍會(huì)被帶出for x=x+1; }
JavaScript在ES6中加入了新的定義類型let用來定義局部變量
function test7(){ for(let x=1;x<10;x++){ console.log(x); } //x則只在for中有作用 console.log(x);//Uncaught ReferenceError: x is not defined }
常量Const
在JavaScript的ES6之前,我們定義常量只是采用常識(shí)約束:
- 我們假設(shè)全大寫字母的變量為常量
- 但實(shí)際上是可以修改的
//我們定義PI var PI = 3.14; //但我們?nèi)耘f可以修改 PI = 3.33;
但在JavaScript的ES6中,提供了const定義類型,它所定義的變量是真正的常量,是允許修改的:
//我們定義PI const PI = 3.14; //我們無法修改,下述代碼報(bào)錯(cuò) PI = 3.33;
方法的定義和調(diào)用
方法的物理定義:
- 對(duì)象中只存在兩種東西:屬性和方法
- 對(duì)象中的函數(shù)被我們稱為方法
方法示例
我們給出方法的示例:
var student = { //對(duì)象中包含屬性 name:"胡桃", //對(duì)象中包含方法 sing:function(){ //this指向當(dāng)前對(duì)象的屬性 console.log(this.name + "在唱歌") } } //我們?cè)谡{(diào)用方法時(shí),需要帶上對(duì)象并且加上() student.sing();
This和Apply的區(qū)別
我們稍微講解一下對(duì)象方法中的This和Apply:
- This:無法指向,只能在對(duì)象的方法中出現(xiàn),并且固定指向自身對(duì)象的屬性
- Apply:可以控制this指向,在調(diào)用含有this的函數(shù)時(shí)調(diào)用,第一個(gè)參數(shù)是對(duì)象,后面是所需參數(shù)
我們給出案例進(jìn)行講解:
//首先我們給出一個(gè)外部函數(shù)來計(jì)算年齡: function getAge(){ //這里采用了Date內(nèi)置對(duì)象,我們后面會(huì)講到,這里是獲得當(dāng)前年份 var nowTime = new Date().getFullYear(); return nowTime - this.birth; } //我們創(chuàng)建一個(gè)對(duì)象(直接調(diào)用getAge,相當(dāng)于this的使用) var hutao = { name:"胡桃", birth:2002, age: getAge } //我們直接對(duì)getAge采用apply方法,使其this指向hutao //第一個(gè)參數(shù)是對(duì)象,后面均為參數(shù)所需值 getAge.apply(hutao,[]);
我們給出網(wǎng)頁端的操作:
//我們需要調(diào)用age時(shí),是采用的age()方法 console.log(hutao.age()) 20 //這里采用getAge的apply方法 getAge.apply(hutao,[]); 20
內(nèi)部對(duì)象
JavaScript的內(nèi)部對(duì)象類似于我們Java中的常見類
它們同樣都是由他人創(chuàng)造并存在于JavaScript中,我們可以直接調(diào)用幫助我們編程
標(biāo)準(zhǔn)類型
我們先來介紹一些標(biāo)準(zhǔn)類型便于內(nèi)部對(duì)象的講解
我們先給出一個(gè)新的方法,用于分析其類型:
typeof 類型對(duì)象
我們給出案例:
typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof []
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'
Date日期對(duì)象
首先我們給出日期對(duì)象的定義方法:
var name = new Date();
我們通過日期對(duì)象來進(jìn)行一些方法操作:
方法名 | 說明 |
---|---|
name.getFullYear() | 返回當(dāng)前年份 |
name.getMonth() | 返回當(dāng)前月份 |
name.getDate() | 返回當(dāng)前日期 |
name.getDay() | 返回當(dāng)前星期 |
name.gatHours() | 返回當(dāng)前小時(shí) |
name.getMinutes() | 返回當(dāng)前分鐘 |
name.getSeconds() | 返回當(dāng)前秒數(shù) |
name.getTime() | 返回當(dāng)前時(shí)間到1970 1.1 00:00:00 的毫秒數(shù) |
我們同時(shí)提供一些Date對(duì)象輸出日期的不同寫法(這里在網(wǎng)頁示例):
now = new Date() Thu Jul 14 2022 13:27:07 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間) now.toLocaleString() '2022/7/14 13:27:07' now.toGMTString() 'Thu, 14 Jul 2022 05:27:07 GMT'
JSON字符串
我們先來介紹一下JSON:
- 在早期,所有數(shù)據(jù)傳輸都采用XML文件,但后來開始采用JSON傳輸
- JSON是一種輕量級(jí)的數(shù)據(jù)交換格式
- 簡潔和清晰的層次結(jié)構(gòu)使得JSON成為理想的數(shù)據(jù)交換語言
- 益于人的閱讀和書寫,也易于機(jī)器解析和生成,有效地提升了網(wǎng)絡(luò)傳輸效率
在JavaScript中一切皆為對(duì)象,任何JS所支持的類型都是對(duì)象
格式:
- 對(duì)象都采用{}
- 數(shù)組都采用[]
- 鍵值對(duì)都采用 key:value
我先在這里講解一下JSON的格式,并且給出對(duì)象進(jìn)行對(duì)比:
//對(duì)象具有對(duì)象的形式 var obj = { name:"萬葉", eyes:"風(fēng)" } //JSON雖然和對(duì)象相似,但實(shí)際上是字符串,內(nèi)部所有元素都有"""所包圍 var json = '{"name":"萬葉","eyes":"風(fēng)"}'
最后我們給出JSON和對(duì)象之間的轉(zhuǎn)換:
var obj = { name:"萬葉", eyes:"風(fēng)" } //對(duì)象轉(zhuǎn)化為JSON字符串 var jsonUser = JSON.stringify(obj); //JSON字符串轉(zhuǎn)化為對(duì)象 var wanye = JSON.parse('{"name":"萬葉","eyes":"風(fēng)"}')
面向?qū)ο缶幊?/h2>
首先面向?qū)ο缶幊淌鞘裁茨兀?/p>
- 面向?qū)ο蠖季哂幸粋€(gè)模板類
- 我們根據(jù)模板類來產(chǎn)生對(duì)象并對(duì)其進(jìn)行操作
JavaScript的類和對(duì)象
JavaScript的面向?qū)ο笈c其他面向?qū)ο笥幸稽c(diǎn)區(qū)別:
//我們先給出一個(gè)整體對(duì)象(類似于類,但類需要寫有數(shù)據(jù)) var Student = { name:"name", age:18, run:function() { console.log(this.name + "running!") } }; //我們創(chuàng)建一個(gè)對(duì)象 var xiaoming = { name:"xiaoming" } //然后我們讓小明的本源指向Student對(duì)象 xiaoming._proto_ = Student; //下面是網(wǎng)頁測試給出的結(jié)果,我們可以看到xiaoming繼承了Student的方法 // xiaoming // {name: 'xiaoming', _proto_: {…}} // name: "xiaoming" // _proto_: {name: 'name', age: 18, run: ?} // [[Prototype]]: Object
但是在ES6版本之后,JavaScript給出了class關(guān)鍵字,具體化了類這個(gè)概念:
class定義模板:
class name{ //... }
下面給出class案例:
class Student{ //class配置的constructor方法,用來創(chuàng)造對(duì)象的屬性 constructor(name){ this.name = name; } //方法直接在下面書寫即可 run(){ console.log(this.name + "running"); } } //創(chuàng)建新對(duì)象的方法(需要把所需參數(shù)寫入) var yebao = new Student("yebao");
我們給出網(wǎng)頁調(diào)試結(jié)果:
yebao
Student {name: 'yebao'}
yebao.name
'yebao'
yebao.run()
4.html:19 yebaorunning
到此這篇關(guān)于JavaScript進(jìn)階之函數(shù)和對(duì)象知識(shí)點(diǎn)詳解的文章就介紹到這了,更多相關(guān)JavaScript函數(shù) 對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)的柱狀統(tǒng)計(jì)圖表
下面是完成后的預(yù)覽圖,可以看到,繪制一個(gè)表格,耗時(shí)0.005毫秒,也就是200分之一秒。效率我還是比較滿意的!2010-07-07Taro?小程序持續(xù)集成實(shí)現(xiàn)及原理
這篇文章主要為大家介紹了Taro?小程序持續(xù)集成實(shí)現(xiàn)及原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04在mpvue框架中使用Vant WeappUI組件庫的注意事項(xiàng)【推進(jìn)】
這篇文章主要介紹了在mpvue框架中使用Vant WeappUI組件庫的注意事項(xiàng),本文給大家提到了引入組件庫的兩種方法,需要的朋友可以參考下2019-06-06基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)當(dāng)鼠標(biāo)懸停表格上顯示這一格的全部內(nèi)容 的相關(guān)資料,需要的朋友可以參考下2016-06-06如何讓一個(gè)層關(guān)閉之后,就算刷新頁面了也不顯示。除非關(guān)閉頁面再次打開
這個(gè)功能,一般可用于廣告的顯示,當(dāng)關(guān)閉后,就不顯示,除非重新關(guān)閉打開,增加用戶體驗(yàn)2008-09-09JavaScript實(shí)現(xiàn)簡易計(jì)算器小功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易計(jì)算器小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-10-10