函數基礎+對象

1、函數的基本概念

函數是一個可執(zhí)行的語句塊,定義的時候不執(zhí)行,調用的時候執(zhí)行,使用"函數名()"的形式可以調用函數,

functionfun(){//定義函數,函數名為fun

//函數體

}

fun();//調用函數

functionfun(){

console.log("hello function")

}

fun();

定義一個函數,并調用了一次,這樣就會在控制臺輸出一次“hellofunction”。

2、參數

function sum(){

var num1=10;

var num2=20;

var result=num1+num2;

console.log(result);

}

sum();

函數內部的代碼是固定的,雖然可以多次使用,但是每次使用輸出的都是10和20的加和,為了讓函數更加靈活,

我們希望實現一個函數可以計算任意兩個數的加和,那么我們就需要了解函數是如何傳遞參數的。

示例代碼如下:

function fun(str){

console.log("hello"+str);

}

fun("world");


定義函數的括號中,我們添加了一個參數str,這個參數叫做形參。它在函數內部像一個變量一樣。

但是在函數調用之前他是沒有值的。當調用函數的時候,調用函數的括號中我們也添加了一個參數"world",

這個參數叫做實參,他可以是任意數據類型的值。函數被調用后,形參str被賦予了實參"world"的值,然

后執(zhí)行console.log便會在控制臺輸出"helloworld"


函數可以傳遞多個參數,用逗號間隔


function sum(num1,num2){

console.log(num1+num2);

}

sum(10,20);

調用函數的時候,實參和形參是一一對應的,10對應的是num1,20對應的是num2,函數執(zhí)行后會在控制臺輸出10和20的加和。


一個正整數參數n,當我們調用函數時,函數會輸出包括n在內,1~n所有正整數的加和

示例代碼如下:

function sum(n){

var sum=0;

for(var i=0;i<=n;i++){

sum+=i;

}

console.log(sum);}

sum(100);

sum(567);

3、返回值

輸入了一個參數,函數就可以在控制臺輸出我們希望得到的結果,但是在實際開發(fā)中,很多情況我們要的不是在控制臺輸出得到的結果,

而單純的只是為了獲取這個值,那么我們就需要用到函數的返回值。

在函數中,我們可以通過return關鍵字指定一個返回值,函數有了return,當函數被調用的時候就可以把調用的結果賦值給另一個變量了


function fun1(){?

? }

functionfun2(){

return"hello fun";

}

var str1=fun1();

varstr2=fun2();

console.log(str1);//輸出undefined

console.log(str2);//輸出"hello fun"

函數fun1沒有返回值,所有將fun1調用的結果賦值給str1,str1的值為undefined,

函數fun2有返回值,返回值是"hellofun",所以當fun2被調用后,將函數運行的結果賦值給str2,str2的值就是"hello fun"

4、函數表達式

var function Name=function(arg){

//函數體

}

這種形式看起來好像是常規(guī)的變量賦值語句,即創(chuàng)建一個函數并將它賦值給變量functionName。這種情況下創(chuàng)建的函數叫做匿名函數。

因為function關鍵字后面沒有標識符。函數表達式與其他表達式一樣,在使用之前必須先賦值;如下面代碼就會導致錯誤;

helloworld();//錯誤,還未賦值,函數不存在

var helloworld=function(){

console.log("hello world");

}

有了函數表達式,我們就可以給函數表達式賦值了;如下面代碼:

var helloworld;//聲明

if(condition){//條件

helloworld=function(){//賦值

console.log("hello world");}

}else{

helloworld=function(){//賦值

console.log("你好,世界");}

}

5、函數聲明提升

func()

function func(){

}

?‘函數聲明提升’,即將函數聲明提升(整體)到作用域頂部(注意是函數聲明,不包括函數表達式),實際提升后結果同下:

// 函數聲明提升

function func(){

}

func()

6、作用域

在 JavaScript 中, 對象和函數同樣也是變量。

在 JavaScript 中, 作用域為可訪問變量,對象,函數的集合。

JavaScript 函數作用域: 作用域在函數內修改。

6.1? 局部作用域

變量在函數內聲明,變量為局部作用域。

局部變量:只能在函數內部訪問。

// 此處不能調用 carName 變量

function myFunction(){

var carName="Volvo";// 函數內可調用 carName 變量

}

因為局部變量只作用于函數內,所以不同的函數可以使用相同名稱的變量。

局部變量在函數開始執(zhí)行時創(chuàng)建,函數執(zhí)行完后局部變量會自動銷毀。

6.2 全局變量

變量在函數外定義,即為全局變量。

全局變量有 全局作用域: 網頁中所有腳本和函數均可使用。

var carName=" Volvo"; // 此處可調用 carName 變量

function myFunction(){// 函數內可調用 carName 變量

}

6.3 如果變量在函數內沒有聲明(沒有使用 var 關鍵字),該變量為全局變量。

以下實例中 carName 在函數內,但是為全局變量。

// 此處可調用 carName 變量 function myFunction(){

carName="Volvo";// 此處可調用 carName 變量

}

1、對象的基本概念

在現實生活中,所有東西都可以看成對象,比如一臺電腦,一個房子,一只貓,一個人,對象有他自己的屬性,

比如電腦有顏色,房子有尺寸,貓和人都有年齡。

在JavaScript中,對象是屬性的集合,他也是一種數據類型。

2、自定義對象

我們可以通過一對花括號來創(chuàng)建一個對象

varobj={}

varcat={//定義一個對象cat,它有兩個屬性,name和age

name:"喵喵",

age:2

}//有兩種方法可以獲取到對象的屬性值:1、對象名.屬性名;2、對象名["屬性名"]

console.log(cat.name);

console.log(cat["name"]);

3、方法

通過上面的例子我們可以知道name的屬性值是字符串類型,age的屬性值是數值類型。其實對象的屬性值可以是任何數據類型,甚至可以是函數,如果對象的屬性值是函數,那么我們叫這個屬性為這個對象的方法

var cat={

name:"喵喵",

age:2,

sayName(){

console.log("我是喵喵");}

}

cat.sayName();

4、this關鍵字

var cat={

name:"喵喵",

age:2,

sayName:function(){

console.log("我是喵喵")}

}

cat.name="小白";

console.log(cat.name);//輸出"小白"

cat.sayName();//輸出"我是喵喵"

因為貓的名字已經改變,但是sayName方法里面的名字并沒有一同變化,我們可以通過this關鍵字實現修改了名字,方法里面的名字也會改變。

在對象的方法中使用this,可以指向這個對象本身,

var cat={

name:"喵喵",

age:2,

sayName:function(){

console.log("我是"+this.name)}

}

cat.sayName();//輸出“我是喵喵”

cat.name="小白";

console.log(cat.name);//輸出"小白"

cat.sayName();//輸出“我是小白”

5、方法傳參

給對象的方法傳遞參數和給函數傳遞參數是一樣的

示例代碼如下:

var cat={

name:"喵喵",

age:2,

sayName:function(){

console.log("我是"+this.name)

},

count:function(num1,num2){

console.log(num1+num2);

}}

cat.sayName();

cat.count(10,20);

我們在之前代碼的基礎上,有添加了一個count方法可以讓貓可以計算兩個數的加和,我們只要傳入實參,貓就能計算結果。

6、對象展開運算符

letxiaoMing={

name:"小明",

age:2

}

let superXiaoMing={

weight:"1000kg",

fly:true

}

let superHero={

...xiaoming,...sukperXiaoming

}

console.log(superHero)

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容