JavaScript 基礎二

函數

函數：函數就是封裝了一段能夠重複執行的代碼塊。

function fn(){
             console.log('我是函數')
         }
         fn();
    
    
         function getSum(a,b){
          return a +b;
        }
       console.log(getSum(1, 2));

• 函數不調用本身不執行
• 調用函數的時候，千萬別忘了加小括號
• 一次聲明函數，能夠調用屢次
• 封裝，就相似打包

返回值

1. 代碼執行到return 關鍵字後，會跳出當前函數，後續與代碼再也不執行
2. 函數的返回值是什麼。調用這個函數就至關於調用了什麼
3. 沒有返回值的函數至關於返回了undedined

function fn2(){
                alert('fn2內部的代碼')
        }
        console.log(fn2())      //先彈出'fn2內部的代碼',而後控制檯打印undefined

小細節 : break ,continue ,return 的區別

  break   	結束當前的循環體 （for   while ）      
  continue	跳出本次循環，繼續執行下次循環（for   while ）
  return  	返回return 中的值 同時結束當前的函數體內的代碼

arguments的使用

JavaScript中，arguments對象是比較特別的一個對象，其實是當前函數的一個內置屬性。也就是說全部函數都內置了一個arguments對象，arguments對象中存儲了傳遞的全部的實參。arguments是一個僞數組，所以及能夠進行遍歷

僞數組定義：

a.具備length屬性；
b.按索引方式儲存數據；
c.不具備數組的push,pop等方法；

當咱們不肯定有多少個參數傳遞的時候，能夠用arguments 來獲取

定義函數有兩種方式

• 函數關鍵字自定義函數方式

// 命名函數   有函數名 爲  fn 
    function fn() { ....}
    // 調用  那個地方調用均可以
    fn()

• 函數表達式方式

語法格式：

// 這是 函數表達式 寫法   匿名函數後面跟分號結束
    var  fn =  function () { ....  }；
    // 調用的方式  可是這個方式，函數調用必須寫到函數體下面
    fn();

1. 函數沒有名字，咱們稱爲匿名函數
2. 這個fn 裏面存儲的是一個函數
3. 這個執行的原理 跟咱們 學的 變量使用一致的。
4. 調用的方式 可是這個方式，函數調用必須寫到函數體下面

自執行函數(瞭解)

• 匿名函數能夠做爲啓動函數，定義後當即自執行

(function () {
      alert('我是匿名函數，被自執行啦~~！');
    })();

匿名函數自動執行寫法的，最大的好處，就是 防止命名衝突， 這種函數永遠不會衝突。

值類型和引用類型

• 基本類型

var num1 = 10;
        var num2 = num1;
        num1 =20;
        console.log(num1);      //20
        console.log(num2);      //10

棧速度比堆快。

• 引用類型

fnuction Person(name,age){
            this.name = name;
            this.age = age;
        }
        var p1 = new Person('zs',18);
        var p2 = p1;    //複製引用
        p2.name = 'ls';
        console.log(p1.name);       //ls
        console.log(p2.name);       //ls

做用域

全局變量和局部變量

• 全局做用域
  供全部代碼執行的環境(整個script標籤內部) 或者一個獨立的js文件中
• 局部做用域（函數做用域）
  會造成一個執行函數內代碼的新環境。
• 全局變量
  • 在全局做用域下聲明的變量叫作全局變量（在函數外部定義的變量）
  • 全局變量在代碼的任何位置均可以使用
  • 特殊狀況， 再函數內 不var 聲明 的 變量 也是全局變量 （不建議使用）
• 局部變量
  • 在局部做用域下聲明的變量叫作局部變量（在函數內部定義的變量）
  • 局部變量只能在該函數內部使用

注意

• 在函數內部不聲明直接賦值使用的變量也算是全局變量

• 函數的形參實際上就是局部變量

• 局部變量當其所在的代碼塊被執行時，會被初始化，當代碼塊運行結束後，就被銷燬了，節省內存空間。

• 全局變量由於任何一個地方均可以使用，只有再瀏覽器關閉纔會銷燬，比較佔內存。

• 只要是代碼，就至少有一個做用域

• 寫在函數外部的是全局做用域

• 寫在函數內部的局部做用域

• 若是函數中還有函數，那麼在這個做用域中就又能夠誕生一個做用域。

• 根據在內部函數能夠訪問外部函數變量的這種機制，用鏈式查找決定哪些數據能被內部函數訪問。 就稱做做用域鏈。

• 局部變量，寫在函數內部，當咱們函數執行完畢後，裏面的局部就會自動銷燬，釋放內存，比較節省資源。

• 全局變量 只有瀏覽器關閉的時候纔會銷燬，比較浪費資源。

• 做用域鏈：咱們按照鏈式方式去查找，最終決定咱們變量執行那個值的過程（就近原則）

預解析

JavaScript代碼是由瀏覽器中的JavaScript解析器來執行的。JavaScript解析器在運行JavaScript代碼的時候，分爲兩步：預解析和代碼執行

學習預解析可以讓咱們知道 爲何在變量聲明以前訪問變量 值是undefined 爲何在函數聲明以前就能夠調用函數

• 預解析過程

  • JavaScript解析器會在全局環境下查找 var、function關鍵字，變量只聲明不賦值，函數聲明不調用。
  • 預解析只發生在當前做用域下

• 預解析也叫作變量、函數提高

  • 變量提高
    定義變量的時候，變量的聲明會被提高到當前做用域的最上面，變量的賦值不會提高。
  • 函數提高
    JavaScript解析器首先會把當前做用域的函數聲明提早到整個做用域的最前面
  • 變量名和函數名相同，優先執行 函數

• 執行過程

  • 變量賦值、函數調用、表達式運算等等。

1. 首先把全部的var function 進行代碼提高。提高到當前做用域的最前面
2. 變量提高的是聲明並不賦值，函數只提高聲明，並不調用。

console.log(num2);
      var num2 = 20;
    
      //至關於執行了下面的代碼
      var num2;
      console.log(num2);    //undefined;
      num2 = 20;

什麼是對象？

• 現實生活中：萬物皆對象，對象是一個具體的事物。 看得見摸得着實物。一本書、一輛汽車、一我的均可以是「對象」，一個數據庫、一張網頁、一個與遠程服務器的鏈接也能夠是「對象」。

對象調用：

• 對象裏面的屬性調用 : 對象.屬性名 這個小點 就理解爲 的
• 對象裏面的屬性另外調用方式 : 對象['屬性名'] 注意 方括號裏面的屬性 必須加 引號 咱們後面會用
• 對象裏面的方法調用： 對象.方法名() 注意這個方法名字後面必定加括號

console.log(star.name)  // 調用 名字屬性
      console.log(star.age)  // 調用 年齡屬性
      star.sayHi();  // 調用 sayHi 方法   注意，必定不要忘記帶後面的括號

函數和方法的區別：

• 函數是單獨存在的， 調用的時候 函數名() 就能夠了
• 方法是再對象裏面， 調用的時候，對象.方法名()

new Object 建立對象

var stuObj = new Obect();
        stuObj.name = 'james';
        stuObj.age = 11;
        stuObj.sex = true;
        stuObj.sayHi = function(){
            alert('你們好啊~');
        }

• 跟咱們前面學的 new Array() 同樣。
• Object() 是構造函數 第一個字母大寫
• new Object() 是調用構造函數 由於構造函數須要new 來調用 同時再內存中建立一個對象
• 注意裏面使用的時候用點 . 不是 冒號 :

自定義構造函數

咱們能夠和之前封裝函數同樣， 想建立多個對象，不用一個個的創造對象了。

抽象能夠將具備相同或類似功能的js代碼獨立出來封裝成一個函數，這樣能夠提升代碼的重複利用率，提升代碼書寫的效率，也能夠有效的減小代碼的冗餘。
咱們這個函數裏面封裝的對象， 爲了和之前區別顯示不一樣。 咱們稱爲構造函數。

1. 構造函數用於建立某一大類對象，首字母要大寫。
2. 構造函數要和new一塊兒使用纔有意義。

function Person(name, age, sex) {
             this.name = name;
             this.age = age;
             this.sex = sex;
             this.sayHi = function() {
                  alert('個人名字叫：' + this.name + '，年齡：' + this.age + '，性別：' + this.sex);
            }
        }
        var bigbai = new Person('大白', 100, '男');
        var smallbai = new Person('小白', 21, '男');
        console.log(bigbai.name);
        console.log(smallbai.name);

new在執行時會作四件事情

• new會在內存中建立一個新的空對象
• new 會讓this指向這個新的對象
• 執行構造函數裏面的代碼 目的：給這個新對象加屬性和方法
• new會返回這個新對象 （因此構造函數裏面不須要return）

this詳解

JavaScript中的this指向問題，有時候會讓人難以捉摸，隨着學習的深刻，咱們能夠逐漸瞭解
如今咱們須要掌握函數內部的this幾個特色
1. 函數在定義的時候this是不肯定的，只有在調用的時候才能夠肯定
2. 通常函數直接執行，內部this指向全局window
3. 函數做爲一個對象的方法，被該對象所調用，那麼this指向的是該對象（誰調用指向誰）
4. 構造函數中的this 對象的實例

// 1. 普通函數
    function fn() {
        console.log(this); // this 指向 window
     }
    fn();
     // 2 對象方法
    var obj = {
        name: 'zs',
        dance: function() {
             console.log(this);
             that = this;
    }
    }
    obj.dance(); //  this 指向 obj  
    console.log(that === obj); // true
    // 3 構造函數
    function Fn() {
        this.age = '18';
        console.log(this)
        self = this;
    }
    var demo = new Fn(); // this  指向 demo
    console.log(self === demo); // true

對象是封裝了相關屬性和方法的複雜數據類型

本質：對象就是一組無序的相關屬性和方法的集合

注意： 函數用來按功能封裝代碼，對象用來按功能封裝方法和屬性，都起到複用代碼和數據的做用。