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)