一、 函數調用
構成函數的js代碼在定義的時候,並不會執行,只有調用該函數的時候,它們才會執行,調用函數有4種方法:
² 作為函數調用
² 作為方法調用
² 作為構造函數 //最后兩個不做為現階段需要掌握的內容介紹。
² 通過它們的call()和apply()方法間接調用
1. 作為函數調用:
調用函數表達(或者函數聲明)式可以進行普通的函數調用。
var a = 10,b = 20;
var add=function(){
var c = a+b;
return c;
}
console.log(add());
函數聲明:
var a = 10,b = 20;
function add(){
var c = a+b;
return c;
}
2. 方法調用
函數和方法本質上是一類東西,只不過函數是屬於全局對象window的方法,他可以直接用函數名進行調用;而其它對象的方法,則不可以這樣調用,只能被對象進行調用。
觀察上面的事例,無論是函數聲明還是函數表達式,都可以被全局對象window調用實現:
console.log(window.add());
console.log(add()); //兩種調用方式,展示出的結論是一樣的,充分證明聲明的函數就是window對象的方法。
但是,屬於其它對象的方法,就不能單獨使用名稱調用:
var arr = [];
var a = 10,b = 20;
arr.add = function(){//add方法此時屬於arr對象
var c = a+b;
return c;
}
console.log(arr.add());//其它對象的方法,只屬於這個對象,只能被這個對象調用
console.log(add());//報錯,單獨調用不可以
console.log(window.add());//其它對象也無法調用
注意:哪怕生成兩個值一模一樣的對象,但是他們也不是同一個東西,他們的方法不能互相調用,只屬於自己。
var arr1 = [];
var arr2 = [];
var a = 10,b = 20;
arr1.add = function(){
var c = a+b;
return c;
}
console.log(arr1.add());
console.log(arr2.add());
3. 方法調用中的方法鏈
如果一個方法的返回值是對象,那么這個返回值依然可以調用它自己的方法,形成方法的鏈式調用。
var jim = {
name:"jim",
age:15,
myName:function (){
return jim.name;
}
}
var student = {
1001:jim,
stu : function(){
return student[1001];
}
}
var obj = student.stu();
console.log(obj.myName());
以上obj就是student.stu()的返回值,也就是對象jim;於是可以修改代碼為:
console.log(student.stu().myName());
二、 函數封裝
1. 函數封裝概念
函數封裝是一種函數的功能,它把程序員寫的一個或者多個功能通過函數的方式封裝起來,對外只提供一個簡單的函數接口(其實所說接口就是方法)。
比如說,數組遍歷:
var arr = [1,2,3,4,5];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
以上寫法只能實現一個數組的遍歷,當我們有很多數組需要遍歷的時候,只能復制for循環,重寫代碼來實現。可它們明明是一樣的代碼,知識數組不同,這樣會產生很大的冗余。
於是我們可以將for循環封裝到一個函數中,在遇到需要數組遍歷的時候,只要引入並調用這個函數即可實現任何數組的遍歷。
var arr1 = [1,2,3,4,5];
var arr2 = [9,8,7,6,5,4];
function arrbl(arr){
for (var i = 0; i < arr.length; i++) {
console.log(arr[i])
}
}
//遍歷arr1
arrbl(arr1);
//遍歷arr2
arrbl(arr2);
這個和我們之前使用的數組方法有異曲同工之妙,但是原理並不相同,不要混為一談。
封裝函數的三個要素;
功能、參數、返回值。
實際在運用函數封裝的過程中,有許多情況我們會設置返回值,這是一種很好的操作,當然如果不需要的話,可以不設置。
2. 函數封裝事例
2.1 封裝奇偶數判斷方法
function isOuShu(num){
if(num%2==0){
return true;
}else{
return false;
}
2.2 自然數之和
function sumfromNToM(n,m){
var sum = 0;
for(var i=n;i<=m;i++){
sum=sum+i;
}
return sum;
}
2.3 判斷閏年
function isLeapYear(year){
if((year%4==0 && year%100!=0)||(year%400==0)){
return true;
}
return false;
}
2.4 生成4位的驗證碼
function getFourNum(){
var str="";
for(var i=0;i<4;i++){
str += parseInt(Math.random()*10);
}
return str;
}