亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間：2022年07月14日 14:20:16   作者：秋落雨微涼  
為了讓大家更加深入地了解JavaScript。這篇文章主要介紹了JavaScript中函數(shù)和對象知識點，文中的示例代碼講解詳細，感興趣的可以學(xué)習(xí)一下

我們在上期內(nèi)容中學(xué)習(xí)了JavaScript的基本知識點，今天讓我們更加深入地了解JavaScript

JavaScript函數(shù)

JavaScript函數(shù)和Java函數(shù)是有一部分相似的，所以學(xué)習(xí)起來也會相對簡單

基本構(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時，運行到return，結(jié)束函數(shù)，并返回該值
  • 當(dāng)不存在return時，全部運行完畢，結(jié)束函數(shù)，返回underfined值

調(diào)用函數(shù)方法

當(dāng)調(diào)用函數(shù)時，直接書寫函數(shù)名稱并加上相對應(yīng)的參數(shù)即可

name(參數(shù))；

注意：

  • JavaScript可以傳入與之不對應(yīng)的參數(shù)
  • 當(dāng)參數(shù)傳入較多，參數(shù)進入函數(shù)但不代表函數(shù)內(nèi)任意參數(shù)，只是單純傳入?yún)?shù)
  • 當(dāng)參數(shù)傳入較少，參數(shù)進入函數(shù)，后面未傳入的參數(shù)在函數(shù)內(nèi)部以underfined的形式存在

函數(shù)參數(shù)argument和rest

argument代表函數(shù)中傳入進來的所有參數(shù)，是一個數(shù)組

我們可以在函數(shù)中使用：

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

rest代表函數(shù)中傳入進來的未定義的參數(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)試

我們針對上面所有知識點給出相應(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)
    }
}

下面我們在網(wǎng)頁中進行調(diào)試：

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

變量的作用域

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

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

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

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

function test1() {
            var x=1;
            x=x+1;
        }

x=x+2;//Uncaught ReferenceError: x is not defined

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

function test4(){
            var x=1;

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

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

良好的變量定義格式

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

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

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

全局變量

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

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

        }

alert("Hello");

注意：

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

局部變量

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

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之前，我們定義常量只是采用常識約束：

  • 我們假設(shè)全大寫字母的變量為常量
  • 但實際上是可以修改的
//我們定義PI
var PI = 3.14；
//但我們?nèi)耘f可以修改
PI = 3.33；

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

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

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

方法的物理定義：

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

方法示例

我們給出方法的示例：

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

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

This和Apply的區(qū)別

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

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

我們給出案例進行講解：

//首先我們給出一個外部函數(shù)來計算年齡：
function getAge(){
    //這里采用了Date內(nèi)置對象，我們后面會講到，這里是獲得當(dāng)前年份
    var nowTime = new Date().getFullYear();
    return nowTime - this.birth;
}

//我們創(chuàng)建一個對象(直接調(diào)用getAge，相當(dāng)于this的使用)
var hutao = {
    name:"胡桃",
    birth:2002,
    age: getAge
}

//我們直接對getAge采用apply方法，使其this指向hutao
//第一個參數(shù)是對象，后面均為參數(shù)所需值
getAge.apply(hutao,[]);

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

//我們需要調(diào)用age時，是采用的age（）方法
console.log(hutao.age())
20
//這里采用getAge的apply方法
getAge.apply(hutao,[]);
20

內(nèi)部對象

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

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

標(biāo)準(zhǔn)類型

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

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

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()返回當(dāng)前年份
name.getMonth()返回當(dāng)前月份
name.getDate()返回當(dāng)前日期
name.getDay()返回當(dāng)前星期
name.gatHours()返回當(dāng)前小時
name.getMinutes()返回當(dāng)前分鐘
name.getSeconds()返回當(dāng)前秒數(shù)
name.getTime()返回當(dāng)前時間到1970 1.1 00：00：00 的毫秒數(shù)

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

now = new Date()
Thu Jul 14 2022 13:27:07 GMT+0800 (中國標(biāo)準(zhǔn)時間)

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是一種輕量級的數(shù)據(jù)交換格式
  • 簡潔和清晰的層次結(jié)構(gòu)使得JSON成為理想的數(shù)據(jù)交換語言
  • 益于人的閱讀和書寫，也易于機器解析和生成，有效地提升了網(wǎng)絡(luò)傳輸效率

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

格式：

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

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

//對象具有對象的形式
var obj = {
            name:"萬葉",
            eyes:"風(fēng)"
        }

//JSON雖然和對象相似，但實際上是字符串，內(nèi)部所有元素都有"""所包圍
var json = '{"name":"萬葉","eyes":"風(fēng)"}'

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

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

//對象轉(zhuǎn)化為JSON字符串
var jsonUser = JSON.stringify(obj);

//JSON字符串轉(zhuǎn)化為對象
var wanye = JSON.parse('{"name":"萬葉","eyes":"風(fēng)"}')

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

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

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

JavaScript的類和對象

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

        //我們先給出一個整體對象（類似于類，但類需要寫有數(shù)據(jù)）
        var Student = {
            name:"name",
            age:18,
            run:function() {
                console.log(this.name + "running!")
            }
        };

        //我們創(chuàng)建一個對象
        var xiaoming = {
            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定義模板：

class name{
	//...
}

下面給出class案例：

class Student{

    //class配置的constructor方法，用來創(chuàng)造對象的屬性
    constructor(name){
        this.name = name;
    }

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

//創(chuàng)建新對象的方法（需要把所需參數(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進階之函數(shù)和對象知識點詳解的文章就介紹到這了,更多相關(guān)JavaScript函數(shù) 對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論