JavaScript進(jìn)階之函數(shù)和對(duì)象知識(shí)點(diǎn)詳解

第JavaScript進(jìn)階之函數(shù)和對(duì)象知識(shí)點(diǎn)詳解下面我們?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ù)體外不可以使用

functiontest1(){

varx=1;

x=x+1;

x=x+2;//UncaughtReferenceError:xisnotdefined

2.如果兩個(gè)函數(shù)使用了相同的變量名，只要在函數(shù)內(nèi)部，則不產(chǎn)生沖突

functiontest1(){

varx=1;

x=x+1;

functiontest2(){

varx=1;

x=x+2;

3.內(nèi)部函數(shù)可以使用外部函數(shù)的成員，但外部函數(shù)不能使用內(nèi)部函數(shù)的成員

functiontest3(){

varx=1;

//內(nèi)部函數(shù)使用外部函數(shù)的成員

functionindextest(){

vary=1;

x=x+1;

console.log(x);

indextest();

//外部函數(shù)不可以使用內(nèi)部函數(shù)成員

y=y+1;//UncaughtReferenceError:yisnotdefined

4.當(dāng)內(nèi)部函數(shù)變量和外部函數(shù)變量重名時(shí)，由內(nèi)向外查找，就近原則

functiontest4(){

varx=1;

functionindextest(){

varx=2;

console.log(x);

indextest();//這里結(jié)果為2

良好的變量定義格式

我們?cè)贘avaScript函數(shù)中定義變量時(shí)，常常將所有變量在頭部定義完全，然后在后面使用

functiontest5(){

//在開頭定義好所有變量

varx=3,y=2,z,name;

//在后面可以隨便使用變量

x=x+2;

z=x+y;

全局變量

全局變量常常帶有window前綴，但默認(rèn)帶有，所以不需要書寫

window屬于JavaScript下的一個(gè)對(duì)象，window之下包含我們所定義的全局變量以及各種函數(shù)方法

functiontest6(){

varx=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é)果：

functiontest7(){

for(varx=1;xx++){

console.log(x);

//我們希望x的作用域只在for中，但它仍會(huì)被帶出for

x=x+1;

JavaScript在ES6中加入了新的定義類型let用來定義局部變量

functiontest7(){

for(letx=1;xx++){

console.log(x);

//x則只在for中有作用

console.log(x);//UncaughtReferenceError:xisnotdefined

常量Const

在JavaScript的ES6之前，我們定義常量只是采用常識(shí)約束：

我們假設(shè)全大寫字母的變量為常量但實(shí)際上是可以修改的

//我們定義PI

varPI=3.14；

//但我們?nèi)耘f可以修改

PI=3.33；

但在JavaScript的ES6中，提供了const定義類型，它所定義的變量是真正的常量，是允許修改的：

//我們定義PI

constPI=3.14;

//我們無法修改，下述代碼報(bào)錯(cuò)

PI=3.33;

方法的定義和調(diào)用

方法的物理定義：

對(duì)象中只存在兩種東西：屬性和方法對(duì)象中的函數(shù)被我們稱為方法

方法示例

我們給出方法的示例：

varstudent={

//對(duì)象中包含屬性

name:"胡桃",

//對(duì)象中包含方法

sing:function(){

//this指向當(dāng)前對(duì)象的屬性

console.log(+"在唱歌")

//我們?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ì)算年齡：

functiongetAge(){

//這里采用了Date內(nèi)置對(duì)象，我們后面會(huì)講到，這里是獲得當(dāng)前年份

varnowTime=newDate().getFullYear();

returnnowTime-this.birth;

//我們創(chuàng)建一個(gè)對(duì)象(直接調(diào)用getAge，相當(dāng)于this的使用)

varhutao={

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())

//這里采用getAge的apply方法

getAge.apply(hutao,[]);

內(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ì)象

我們給出案例：

typeof123

number

typeof123

string

typeoftrue

boolean

typeof[]

object

typeofMath.abs

function

typeofundefined

undefined

Date日期對(duì)象

首先我們給出日期對(duì)象的定義方法：

varname=newDate();

我們通過日期對(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í)間到19701.100：00：00的毫秒數(shù)

我們同時(shí)提供一些Date對(duì)象輸出日期的不同寫法（這里在網(wǎng)頁示例）：

now=newDate()

ThuJul14202513:27:07GMT+0800(中國標(biāo)準(zhǔn)時(shí)間)

now.toLocaleString()

'2025/7/1413:27:07'

now.toGMTString()

'Thu,14Jul202505:27:07GMT'

JSON字符串

我們先來介紹一下JSON：

在早期，所有數(shù)據(jù)傳輸都采用XML文件，但后來開始采用JSON傳輸JSON是一種輕量級(jí)的數(shù)據(jù)交換格式簡(jiǎn)潔和清晰的層次結(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ì)象的形式

varobj={

name:"萬葉",

eyes:"風(fēng)"

//JSON雖然和對(duì)象相似，但實(shí)際上是字符串，內(nèi)部所有元素都有"""所包圍

varjson='{"name":"萬葉","eyes":"風(fēng)"}'

最后我們給出JSON和對(duì)象之間的轉(zhuǎn)換：

varobj={

name:"萬葉",

eyes:"風(fēng)"

//對(duì)象轉(zhuǎn)化為JSON字符串

varjsonUser=JSON.stringify(obj);

//JSON字符串轉(zhuǎn)化為對(duì)象

varwanye=JSON.parse('{"name":"萬葉","eyes":"風(fēng)"}')

面向?qū)ο缶幊?/p>

首先面向?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ù)）

varStudent={

name:"name",

age:18,

run:function(){

console.log(+"running!")

//我們創(chuàng)建一個(gè)對(duì)象

varxiaoming={

name:"xiaoming"

//然后我們讓小明的本源指向Student對(duì)象

xiaoming._proto_=Student;

//下面是網(wǎng)頁測(cè)試給出的結(jié)果，我們可以看到xiaoming繼承了Student的方法

//xiaoming

//{name:'xiaoming',_proto_:{…}}

//name:"xiaoming"

//_proto_:{name:'name',age:18,run:?}

//[[Prototype]]:Object

但是在ES6版本之后，JavaScript給出了class關(guān)鍵字，具體化了類這個(gè)概念：

class定義模板：

classname{

//...

下面給出class案例：

classStudent{

//class配置的constructor方法，用來創(chuàng)