JavaScript進階之函數(shù)和對象知識點詳解

第JavaScript進階之函數(shù)和對象知識點詳解下面我們在網(wǎng)頁中進行調(diào)試：

name(1,2,3,胡桃,true)

1

names(胡桃,18,護膜,魔女)

胡桃

18

護膜

魔女

變量的作用域

對于任何含有變量的語言，作用域是必定存在的

對于JavaScript，var所定義的變量實際上也是存在作用域的

函數(shù)體內(nèi)變量作用域解釋

1.假如在函數(shù)體中聲明，則在函數(shù)體外不可以使用

functiontest1(){

varx=1;

x=x+1;

x=x+2;//UncaughtReferenceError:xisnotdefined

2.如果兩個函數(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.當內(nèi)部函數(shù)變量和外部函數(shù)變量重名時，由內(nèi)向外查找，就近原則

functiontest4(){

varx=1;

functionindextest(){

varx=2;

console.log(x);

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

良好的變量定義格式

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

functiontest5(){

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

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

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

x=x+2;

z=x+y;

全局變量

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

window屬于JavaScript下的一個對象，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不會產(chǎn)生輸出作用

window.alert=function(){

alert("Hello");

注意：

JavaScript實際上只有一個全局作用域，任何變量（包括函數(shù)），假如沒有在函數(shù)作用域內(nèi)找到，就會向外查找，若在全局作用域內(nèi)均未查找到，則報錯RefrenceError

局部變量

在JavaScript的ES5中會出現(xiàn)變量作用域過大導(dǎo)致代碼沖突的結(jié)果：

functiontest7(){

for(varx=1;xx++){

console.log(x);

//我們希望x的作用域只在for中，但它仍會被帶出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è)全大寫字母的變量為常量但實際上是可以修改的

//我們定義PI

varPI=3.14；

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

PI=3.33；

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

//我們定義PI

constPI=3.14;

//我們無法修改，下述代碼報錯

PI=3.33;

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

方法的物理定義：

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

方法示例

我們給出方法的示例：

varstudent={

//對象中包含屬性

name:"胡桃",

//對象中包含方法

sing:function(){

//this指向當前對象的屬性

console.log(+"在唱歌")

//我們在調(diào)用方法時，需要帶上對象并且加上（）

student.sing();

This和Apply的區(qū)別

我們稍微講解一下對象方法中的This和Apply：

This：無法指向，只能在對象的方法中出現(xiàn)，并且固定指向自身對象的屬性Apply：可以控制this指向，在調(diào)用含有this的函數(shù)時調(diào)用，第一個參數(shù)是對象，后面是所需參數(shù)

我們給出案例進行講解：

//首先我們給出一個外部函數(shù)來計算年齡：

functiongetAge(){

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

varnowTime=newDate().getFullYear();

returnnowTime-this.birth;

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

varhutao={

name:"胡桃",

birth:2002,

age:getAge

//我們直接對getAge采用apply方法，使其this指向hutao

//第一個參數(shù)是對象，后面均為參數(shù)所需值

getAge.apply(hutao,[]);

我們給出網(wǎng)頁端的操作:

//我們需要調(diào)用age時，是采用的age（）方法

console.log(hutao.age())

//這里采用getAge的apply方法

getAge.apply(hutao,[]);

內(nèi)部對象

JavaScript的內(nèi)部對象類似于我們Java中的常見類

它們同樣都是由他人創(chuàng)造并存在于JavaScript中，我們可以直接調(diào)用幫助我們編程

標準類型

我們先來介紹一些標準類型便于內(nèi)部對象的講解

我們先給出一個新的方法，用于分析其類型：

typeof類型對象

我們給出案例：

typeof123

number

typeof123

string

typeoftrue

boolean

typeof[]

object

typeofMath.abs

function

typeofundefined

undefined

Date日期對象

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

varname=newDate();

我們通過日期對象來進行一些方法操作：

方法名說明name.getFullYear()返回當前年份name.getMonth()返回當前月份name.getDate()返回當前日期name.getDay()返回當前星期name.gatHours()返回當前小時name.getMinutes()返回當前分鐘name.getSeconds()返回當前秒數(shù)name.getTime()返回當前時間到19701.100：00：00的毫秒數(shù)

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

now=newDate()

ThuJul14202513:27:07GMT+0800(中國標準時間)

now.toLocaleString()

'2025/7/1413:27:07'

now.toGMTString()

'Thu,14Jul202505:27:07GMT'

JSON字符串

我們先來介紹一下JSON：

在早期，所有數(shù)據(jù)傳輸都采用XML文件，但后來開始采用JSON傳輸JSON是一種輕量級的數(shù)據(jù)交換格式簡潔和清晰的層次結(jié)構(gòu)使得JSON成為理想的數(shù)據(jù)交換語言益于人的閱讀和書寫，也易于機器解析和生成，有效地提升了網(wǎng)絡(luò)傳輸效率

在JavaScript中一切皆為對象，任何JS所支持的類型都是對象

格式：

對象都采用{}數(shù)組都采用[]鍵值對都采用key:value

我先在這里講解一下JSON的格式，并且給出對象進行對比：

//對象具有對象的形式

varobj={

name:"萬葉",

eyes:"風"

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

varjson='{"name":"萬葉","eyes":"風"}'

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

varobj={

name:"萬葉",

eyes:"風"

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

varjsonUser=JSON.stringify(obj);

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

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

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

首先面向?qū)ο缶幊淌鞘裁茨兀?/p>

面向?qū)ο蠖季哂幸粋€模板類我們根據(jù)模板類來產(chǎn)生對象并對其進行操作

JavaScript的類和對象

JavaScript的面向?qū)ο笈c其他面向?qū)ο笥幸稽c區(qū)別：

//我們先給出一個整體對象（類似于類，但類需要寫有數(shù)據(jù)）

varStudent={

name:"name",

age:18,

run:function(){

console.log(+"running!")

//我們創(chuàng)建一個對象

varxiaoming={

name:"xiaoming"

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

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)鍵字，具體化了類這個概念：

class定義模板：

classname{

//...

下面給出class案例：

classStudent{

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