JavaScript進階知識點——函式和物件詳解

秋落雨微涼 發表於 2022-07-14
JavaScript

JavaScript進階知識點——函式和物件詳解

我們在上期內容中學習了JavaScript的基本知識點,今天讓我們更加深入地瞭解JavaScript

JavaScript函式

JavaScript函式和Java函式是有一部分相似的,所以學習起來也會相對簡單

基本構造

1.直接構造

//function代表函式標誌,name為函式名稱,引數可有可無
function name( 引數 ) {
            //...
    		return;
        }

2.賦值構造

//相當於function為匿名函式,然後匿名函式所得出的值返回給name,因而name可以呼叫function函式
var name = function( 引數 ){
            //...
        }

注意:

  • 在JavaScript中,return是可有可無的
  • 當存在return時,執行到return,結束函式,並返回該值
  • 當不存在return時,全部執行完畢,結束函式,返回underfined值

呼叫函式方法

當呼叫函式時,直接書寫函式名稱並加上相對應的引數即可

name(引數);

注意:

  • JavaScript可以傳入與之不對應的引數
  • 當引數傳入較多,引數進入函式但不代表函式內任意引數,只是單純傳入引數
  • 當引數傳入較少,引數進入函式,後面未傳入的引數在函式內部以underfined的形式存在

函式引數argument和rest

argument代表函式中傳入進來的所有引數,是一個陣列

我們可以在函式中使用:

function name( ) {
            //...
            console.log(arguments[0]),
    		console.log(arguments[1]),
            //...
        }

rest代表函式中傳入進來的未定義的引數,需要提前在函式中定義

我們同樣可以在函式中使用:

var names = function(name,age,...rest){
            //...
            console.log(name);
            console.log(age);
            for(var value of rest){
                console.log(value)
            }
        }

程式碼除錯

我們針對上面所有知識點給出相應程式碼示例:

//我們演示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)
    }
}

下面我們在網頁中進行除錯:

name(1,2,3,"胡桃",true)
1
names("胡桃",18,"護膜","魔女")
胡桃
18
護膜
魔女

變數的作用域

對於任何含有變數的語言,作用域是必定存在的

對於JavaScript,var所定義的變數實際上也是存在作用域的

函式體內變數作用域解釋

  1. 假如在函式體中宣告,則在函式體外不可以使用
function test1() {
            var x=1;
            x=x+1;
        }

x=x+2;//Uncaught ReferenceError: x is not defined
  1. 如果兩個函式使用了相同的變數名,只要在函式內部,則不產生衝突
function test1() {
            var x=1;
            x=x+1;
        }

function test2(){
    var x=1;
    x=x+2;
}
  1. 內部函式可以使用外部函式的成員,但外部函式不能使用內部函式的成員
function test3(){
            var x=1;

    		//內部函式使用外部函式的成員
            function indextest(){
                var y=1;
                x = x+1;
                console.log(x);
            }

            indextest();
    
    		//外部函式不可以使用內部函式成員
    		y=y+1;//Uncaught ReferenceError: y is not defined
        }
  1. 當內部函式變數和外部函式變數重名時,由內向外查詢,就近原則
function test4(){
            var x=1;

            function indextest() {
                var x=2;
                console.log(x);
            }

            indextest();//這裡結果為2
        }

良好的變數定義格式

我們在JavaScript函式中定義變數時,常常將所有變數在頭部定義完全,然後在後面使用

function test5(){
            //在開頭定義好所有變數
            var x=3,y=2,z,name;

            //在後面可以隨便使用變數
    		x=x+2;
    		z=x+y;
        }

全域性變數

全域性變數常常帶有window字首,但預設帶有,所以不需要書寫

window屬於JavaScript下的一個物件,window之下包含我們所定義的全域性變數以及各種函式方法

function test6(){
            var x = 1;

            //下面所輸出的x均為上方所定義的全域性變數x
            console.log(x);
            console.log(window.x);

            //下面所使用的alert和window.alert具有相同程式碼相同作用
            alert(x);
            window.alert(x);
        }

我們也可以通過重新定義window下的函式方法來更改該函式原有的操作

//在下述操作之後,alert不會產生輸出作用
window.alert = function() {

        }

alert("Hello");

注意:

  • JavaScript實際上只有一個全域性作用域,任何變數(包括函式),假如沒有在函式作用域內找到,就會向外查詢,若在全域性作用域內均未查詢到,則報錯RefrenceError

區域性變數

在JavaScript的ES5中會出現變數作用域過大導致程式碼衝突的結果:

function test7(){
            for(var x=1;x<10;x++){
                console.log(x);
            }

            // 我們希望x的作用域只在for中,但它仍會被帶出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之前,我們定義常量只是採用常識約束:

  • 我們假設全大寫字母的變數為常量
  • 但實際上是可以修改的
//我們定義PI
var PI = 3.14;
//但我們仍舊可以修改
PI = 3.33;

但在JavaScript的ES6中,提供了const定義型別,它所定義的變數是真正的常量,是允許修改的:

//我們定義PI
const PI = 3.14;
//我們無法修改,下述程式碼報錯
PI = 3.33;

方法的定義和呼叫

方法的物理定義:

  • 物件中只存在兩種東西:屬性和方法
  • 物件中的函式被我們稱為方法

方法示例

我們給出方法的示例:

var student = {
            //物件中包含屬性
            name:"胡桃",
    
            //物件中包含方法
            sing:function(){
                //this指向當前物件的屬性
                console.log(this.name + "在唱歌")
            }
        }

//我們在呼叫方法時,需要帶上物件並且加上()
student.sing();

This和Apply的區別

我們稍微講解一下物件方法中的This和Apply:

  • This:無法指向,只能在物件的方法中出現,並且固定指向自身物件的屬性
  • Apply:可以控制this指向,在呼叫含有this的函式時呼叫,第一個引數是物件,後面是所需引數

我們給出案例進行講解:

//首先我們給出一個外部函式來計算年齡:
function getAge(){
    //這裡採用了Date內建物件,我們後面會講到,這裡是獲得當前年份
    var nowTime = new Date().getFullYear();
    return nowTime - this.birth;
}

//我們建立一個物件(直接呼叫getAge,相當於this的使用)
var hutao = {
    name:"胡桃",
    birth:2002,
    age: getAge
}

//我們直接對getAge採用apply方法,使其this指向hutao
//第一個引數是物件,後面均為引數所需值
getAge.apply(hutao,[]);

我們給出網頁端的操作:

//我們需要呼叫age時,是採用的age()方法
console.log(hutao.age())
20
//這裡採用getAge的apply方法
getAge.apply(hutao,[]);
20

內部物件

JavaScript的內部物件類似於我們Java中的常見類

它們同樣都是由他人創造並存在於JavaScript中,我們可以直接呼叫幫助我們程式設計

標準型別

我們先來介紹一些標準型別便於內部物件的講解

我們先給出一個新的方法,用於分析其型別:

typeof 型別物件

我們給出案例:

typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof []
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

Date日期物件

首先我們給出日期物件的定義方法:

var name = new Date();

我們通過日期物件來進行一些方法操作:

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

我們同時提供一些Date物件輸出日期的不同寫法(這裡在網頁示例):

now = new Date()
Thu Jul 14 2022 13:27:07 GMT+0800 (中國標準時間)

now.toLocaleString()
'2022/7/14 13:27:07'

now.toGMTString()
'Thu, 14 Jul 2022 05:27:07 GMT'

JSON字串

我們先來介紹一下JSON:

  • 在早期,所有資料傳輸都採用XML檔案,但後來開始採用JSON傳輸
  • JSON是一種輕量級的資料交換格式
  • 簡潔和清晰的層次結構使得JSON成為理想的資料交換語言
  • 益於人的閱讀和書寫,也易於機器解析和生成,有效地提升了網路傳輸效率

在JavaScript中一切皆為物件,任何JS所支援的型別都是物件

格式:

  • 物件都採用{}
  • 陣列都採用[]
  • 鍵值對都採用 key:value

我先在這裡講解一下JSON的格式,並且給出物件進行對比:

//物件具有物件的形式
var obj = {
            name:"萬葉",
            eyes:"風"
        }

//JSON雖然和物件相似,但實際上是字串,內部所有元素都有"""所包圍
var json = '{"name":"萬葉","eyes":"風"}'

最後我們給出JSON和物件之間的轉換:

var obj = {
            name:"萬葉",
            eyes:"風"
        }

//物件轉化為JSON字串
var jsonUser = JSON.stringify(obj);

//JSON字串轉化為物件
var wanye = JSON.parse('{"name":"萬葉","eyes":"風"}')

物件導向程式設計

首先物件導向程式設計是什麼呢?

  • 物件導向都具有一個模板類
  • 我們根據模板類來產生物件並對其進行操作

JavaScript的類和物件

JavaScript的物件導向與其他物件導向有一點區別:

        //我們先給出一個整體物件(類似於類,但類需要寫有資料)
        var Student = {
            name:"name",
            age:18,
            run:function() {
                console.log(this.name + "running!")
            }
        };

        //我們建立一個物件
        var xiaoming = {
            name:"xiaoming"
        }

        //然後我們讓小明的本源指向Student物件
        xiaoming._proto_ = Student;

        //下面是網頁測試給出的結果,我們可以看到xiaoming繼承了Student的方法
        // xiaoming
        // {name: 'xiaoming', _proto_: {…}}
        // name: "xiaoming"
        // _proto_: {name: 'name', age: 18, run: ƒ}
        // [[Prototype]]: Object

但是在ES6版本之後,JavaScript給出了class關鍵字,具體化了類這個概念:

class定義模板:

class name{
	//...
}

下面給出class案例:

class Student{

    //class配置的constructor方法,用來創造物件的屬性
    constructor(name){
        this.name = name;
    }

    //方法直接在下面書寫即可
    run(){
        console.log(this.name + "running");
    }
}

//建立新物件的方法(需要把所需引數寫入)
var yebao = new Student("yebao");

我們給出網頁除錯結果:

yebao
Student {name: 'yebao'}
yebao.name
'yebao'
yebao.run()
4.html:19 yebaorunning

結束語

好的,關於JavaScript的函式和物件我們就介紹到這裡,下一期我們會講解JavaScript的重點BOM和DOM部分。