JavaScript函式與物件

一、JavaScript函式

函式就是將重複的程式碼，進行封裝，需要時就直接呼叫。

函式的作用：程式碼的重用；

1、函式定義

//函式定義
function 函式名(){
    函式體;
}
//函式呼叫
函式名();

//求兩個數之和
function mySum(){
    var num1 = 10;
    var num2 = 20;
    var sum = num1 + num2;
    console.log(sum);
}
//函式呼叫
mySum();

函式需要注意的問題：

1、函式需要先進行定義，才能使用；

2、函式的名字：遵循駝峰命名法規則；

3、函式一旦重名，後面的函式將會覆蓋前面的函式；

4、一個函式最好就是一個功能；

2、函式的引數

函式在定義時候，函式名後面的小括號裡的變數就是引數，函式引數的作用就是在被呼叫時可以根據特定的需求進行傳入特定的引數操作，已達到所需的需求。函式的引數，使得函式更加靈活。

函式也是一種資料型別；資料型別是方function型別。

//兩個數之和
function mySum(x,y){
    var sum = x + y;
    console.log(sum);
}

1、形參與實參

形參：函式在定義時，小括號裡的變數就是形參；

//兩個數之和
function mySum(x,y){
    var sum = x + y;
    console.log(sum);
}
//此時的x與y就是形參

實參：函式在呼叫時，傳入的值就是實參；實參可以是變數，也可以是具體值；

//兩個數之和
function mySum(x,y){
    var sum = x + y;
    console.log(sum);
}
//函式呼叫
mySum(10,20);
//20,30就是實參，傳入到函式中

2、函式的返回值

返回值：在函式內部有return關鍵字，並且在關鍵字後面有內容，這個內容就會被返回，稱為返回值。函式在呼叫後，需要這個返回值時，只需定義變數接收該返回值，即可。

函式中一旦遇到return關鍵字，整個函式結束了。

function (x,y){
    return x+y;
}
//接收返回值
var result = function(10,20);

3、函式案例

//求兩個數中的最大數
function getMax(x, y) {
    return x > y ? x : y;
}
console.log(getMax(10, 20));

//求三個數中最大數
 function getMax3(num1, num2, num3) {
     var temp = num1 > num2 ? num1 : num2;
     return temp > num3 ? temp : num3;
 }

 console.log(getMax3(1, 4, 3));

 function getThreeMax(x, y, z) {
     return x > y ? (x > z ? x : y) : (y > z ? y : z);
 }

 console.log(getThreeMax(1, 4, 2));

 //判斷一個數是否為素數，只能被1和自身整除，質數是從2開始的
 function getPrimeNumber(num) {
     for (var i = 2; i < num; i++) {
         if (num % i == 0) {
             return false;
         }
     }
     return true;
 }

 var result = getPrimeNumber(7);
 if (result) {
     console.log("是質數");
 } else {
     console.log("不是質數");
 }

4、匿名函式

函式如果沒有名字，就稱之為匿名函式；

匿名函式定義：

//匿名函式
function (){
    函式體;
}
//匿名函式不能直接呼叫
//匿名函式需要被呼叫時，需要通過函式表示式來呼叫
函式表示式：
var 變數名 = 匿名函式;
var func = function(){
    函式體;
}

5、函式作為引數使用

function f1(fn){
    fn();//函式呼叫
}
//區分：
function f1(fn());//這個是將fn（）的返回值做引數，而不是函式做引數

6、函式作為返回值使用

function f1(){
    return function(){
        函式體;
    }
}

var fn = f1();//當f1呼叫時，把function匿名函式賦給了fn變數，此時的fn變數是一個函數了

二、作用域

作用域:使用範圍

全域性變數：宣告的變數是使用var宣告的,那麼這個變數就是全域性變數,全域性變數可以在頁面的任何位置使用

​ 除了函式以外,其他的任何位置定義的變數都是全域性變數。

區域性變數:在函式內部定義的變數,是區域性變數,外面不能使用全域性變數,如果頁面不關閉,那麼就不會釋放,就會佔空間,消耗記憶體。

全域性作用域:全域性變數的使用範圍。

區域性作用域:區域性變數的使用範圍。

塊級作用域:一對大括號就可以看成是一塊,在這塊區域中定義的變數,只能在這個區域中使用,但是在js中在這個塊級作用域中定義的變數,外面也能使用。

說明:js沒有塊級作用域,只有函式除外

隱式全域性變數:宣告的變數沒有var,就叫隱式全域性變數

全域性變數是不能被刪除的,隱式全域性變數是可以被刪除的

定義變數使用var是不會被刪除的,沒有var是可以刪除的

三、JavaScript面向物件

JavaScript不是面嚮物件語言，是模擬向物件思想；是一門基於物件的語言。

1、建立物件

建立物件有三種方式：

1、呼叫系統的建構函式建立物件

//建立物件
var obj = new Object();//例項化一個物件
//新增物件屬性與屬性值
obj.name = "小明";
obj.sex = "男";
obj.age = 22;
//新增物件方法，即物件行為
obj.eat=function(){
    console.log("我的愛好是吃!");
};
obj.play = function (){
    console.log("我喜歡玩!");
};
//呼叫對物件屬性與方法
console.log(obj.name);
console.log(obj.sex);
console.log(obj.age);
obj.eat();
obj.play();

2、自定義建構函式建立物件（結合第一種和需求通過工廠模式建立物件）

工廠模式建立物件

//工廠模式建立物件
function createObject(name,age,sex) {
    //建立物件
    var obj = new Object();
    //新增屬性
    obj.name = name;
    obj.age = age;
    obj,sex = sex;
    obj.say=function () {
      console.log("hello, I am "+this.name);
    };
    return obj;  //返回該物件
};
var person = createObject("小芳",20,"女");
person.say();

自定義建構函式建立

//自定義建構函式建立物件
function Person(name,age,sex) { //自定義建構函式，函式系統裡沒有，自定義的，函式名大寫
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.say = function () {
        console.log("hello I am "+this.name);
    };
};
var person = new Person("小明",23,"男");
person.say();

new 物件時，系統所做的事情。
自定義建構函式建立物件做了四件事：
1、在記憶體中開闢空間，儲存建立新的物件
2、把this設定為當前物件
3、設定物件屬性和方法值
4、將this這個物件返回

自定義建構函式建立物件與工廠模式建立物件的區別：

a、工廠模式建立物件，是定義函式，在函式中建立物件；函式中需要將物件返回；

b、自定義建構函式建立物件，函式名大寫，通過this關鍵字設定屬性，無需返回物件。

c、工廠模式建立物件方式是：定義變數，呼叫函式建立：var person = createObject(“小芳”,20,“女”);

​ 自定義建構函式建立物件：通過new關鍵字建立物件：var person = new Person(“小明”,23,“男”);

3、字面量方式建立物件

var obj = {}; //空物件
//新增屬性
obj.name = "小明";
obj.age = 20;
obj.sex = "男";
obj.say = function (){
     console.log("hello I am "+this.name+"今年"+this.age+"歲");
}
obj.say();

//字面量方式建立物件
var  obj ={
    name:"小明",
    age:20,
    sex:"男",
    say:function () {
        console.log("hello I am "+this.name);
    }
}
obj.say();

//字面量方式建立物件
var  obj ={
    name:this.name,
    age: this.age,
    sex:this.sex,
    say:function () {
        console.log("hello I am "+this.name+"今年"+this.age+"歲");
    }
}
obj.name="小明";
obj.age=20;
obj.sex="男";
obj.say();