JavaScript進階知識點——函數和對象詳解

来源:https://www.cnblogs.com/qiuluoyuweiliang/archive/2022/07/14/16477455.html
-Advertisement-
Play Games

JavaScript進階知識點——函數和對象詳解 我們在上期內容中學習了JavaScript的基本知識點，今天讓我們更加深入地瞭解JavaScript JavaScript函數 JavaScript函數和Java函數是有一部分相似的，所以學習起來也會相對簡單 基本構造 1.直接構造 //functi ...


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部分。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • NodeJS 5分鐘 連接 Redis 讀寫操作
    本文簡介 本文主要講解使用 NodeJS 操作 Redis ，順便會先帶一帶 Redis 基礎用法。 在寫本文時，使用 NPM 安裝的 Redis 依賴包已經到了 4.1.0 版本了。我以前用過 2.8 ，這兩個版本在用法上也是有差別的。可能一些老項目還在用老版本的依賴包。所以我會把2個版本的用法都 ...
  • 從零開始製作【立體鍵盤】，畫UI免寫CSS，【盲打練習】的交互邏輯只用了10來行表達式！
    手把手教你從空白頁面開始通過拖拉拽可視化的方式製作【立體鍵盤】的靜態頁面，不用手寫一行CSS代碼，全程只用10來行表達式就完成了【盲打練習】的交互邏輯。 整個過程在眾觸應用平臺進行，快速直觀。 ...
  • Vue2源碼解析-源碼調試與核心流程梳理圖解
    現在VUE3已經有一段時間了，也慢慢普及起來了。不過因為一直還在使用VUE2的原因還是去瞭解和學了下它的源碼，畢竟VUE2也不會突然就沒了是吧，且VUE3中很多原理之類的也是類似的。然後就準備把VUE3搞起來了是吧。VUE2源碼使用的是roullup進行打包的，還使用了Flow進行靜態類型檢測(該庫 ...
  • 虛擬DOM的理解與總結
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 1. 對虛擬DOM的理解？ 從本質上來說，Virtual Dom是一個JavaScript對象，通過對象的方式來表示DOM結構。將頁面的狀態抽象為JS對象的形式，配合不同的渲染工具，使跨平臺渲染成為可能。通過事務處理機制，將多次DOM修改 ...
  • 白色卡片陰影效果
    .shawdown{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); } 湊字數 湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字數湊字 ...
  • BBEdit for Mac(專業HTML文本編輯器)
    想要一款專業且易用的代碼文本編輯器？小編今天為大家推薦BBEdit Mac版。BBEdit Mac版是專業的HTML文本編輯器，提供豐富的功能，用於編輯，搜索和處理散文，源代碼和文本數據。 詳情：BBEdit for Mac(專業HTML文本編輯器) 功能特色 1、對文本進行全面控制 - 在任何Au ...
  • vue整合electron 實現pc端應用程式
    準備工作 下載 electron-v9.4.4-win32-ia32.zip https://npm.taobao.org/mirrors/electron/9.4.4/electron-v9.4.4-win32-ia32.zip 解壓放到 C:\Users\Admin\AppData\Local\ ...
  • 分享關於遞歸樹形結構增刪改查的方法
    在使用樹形節點或級聯組件時常常會碰到根據id處理數據的情況 下麵為大家簡單介紹關於節點遞歸增刪改查方法 根據目標id刪除指定節點 /** * 根據目標id刪除指定節點 * @param {*} list 數據源 * @param {*} targetId 目標id */ function delet ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類