JS基本介紹

• JS的用途：Javascript可以實現瀏覽器端、伺服器端(nodejs)。。。
• 瀏覽器端JS由以下三個部分組成：
  • ECMAScript：基礎語法(資料型別、運算子、函式。。。)
  • BOM(瀏覽器物件模型)：window、location、history、navigator。。。
  • DOM(文件物件模型)：div、p、span。。。
• ECMAScript又名es，有以下重大版本：
  • 舊時代：
    • es1.0。。。es3.1
  • 新時代：
    • es5
    • es6(es2015)
    • es7(es2016)、es8(es2017)

資料型別

• 基本資料型別——值型別：(數字、字串、布林值、null、undefined)
  • undefined型別？
• 複雜資料型別——引用型別：(物件)
  • 陣列
  • 函式
  • 正則表示式
  • Date

物件的基本使用

建立一個物件

    var student={ 
        name:"李白" , //student有一個name屬性，值為"李白"
 

        grade:"初一" ,
        //a、student有一個say屬性，值為一個函式
        //b、student有一個say方法
        say:function(){
            console.log("你好");
        },
        run:function(speed){
            console.log("正在以"+speed+"米/秒的速度奔跑");
        }
    }

物件是鍵值對的集合：物件是由屬性和方法構成的 (ps：也有說法為：物件裡面皆屬性，認為方法也是一個屬性)

• name是屬性 grade是屬性
• say是方法 run是方法

物件屬性操作

獲取屬性：

第一種方式：.語法

• student.name 獲取到name屬性的值，為：“李白”
• student.say 獲取到一個函式

第二種方式：[]語法

• student[“name”] 等價於student.name
• student[“say”] 等價於student.say

號外：2種方式的差異：

• .語法更方便，但是坑比較多(有侷限性)，比如：
  • .後面不能使用js中的關鍵字、保留字(class、this、function。。。)
  • .後面不能使用數字

    var obj={};
    obj.this=5; //語法錯誤
    obj.0=10;   //語法錯誤

• []使用更廣泛
  • o1[變數name]
  • [“class”]、[“this”]都可以隨意使用 obj["this"]=10
  • [0]、[1]、[2]也可以使用
    • obj[3]=50 = obj["3"]=50
    • 思考：為什麼obj[3]=obj[“3”]
  • 甚至還可以這樣用：["[object Array]"]
    • jquery裡面就有這樣的實現
  • 也可以這樣用：["{abc}"]
    • 給物件添加了{abc}屬性

設定屬性

• student["gender"]="男" 等價於： student.gender="男"
  • 含義：如果student物件中沒有gender屬性，就新增一個gender屬性，值為"男"

  •  如果student物件中有gender屬性，就修改gender屬性的值為"男"
    

• 案例1：student.isFemale=true
• 案例2：student["children"]=[1,2,5]
• 案例3：

    student.toShanghai=function(){   
        console.log("正在去往上海的路上")   
    }

刪除屬性

• delete student[“gender”]
• delete student.gender

通過建構函式建立物件

建構函式建立物件的例子：

• var xiaoming = new Object() --> var xiaoming = {};

• var now = new Date()

• var rooms = new Array(1,3,5) --> var rooms = [1,3,5]

• var isMale=/123/; ==> var isMale=new RegExp("123")

  • isMale是通過RegExp建構函式創建出來的物件
  • isMale是RegExp建構函式的例項

• 以上例子中，Object、Date、Array都是內建的建構函式

自定義一個建構函式來建立物件

• 建構函式

    function Person(name,age){
        this.name=name;
        this.age=age;
    }
    var p1=new Person("趙雲",18)

• 說明：p1就是根據【Person建構函式】創建出來的物件

建構函式的概念

• 任何函式都可以當成建構函式
  function CreateFunc(){ }
• 只要把一個函式通過new的方式來進行呼叫，我們就把這一次函式的呼叫方式稱之為：建構函式的呼叫
  • new CreateFunc(); 此時CreateFunc就是一個建構函式
  • CreateFunc(); 此時的CreateFunc並不是建構函式

關於new Object()

• new Object()等同於物件字面量{}

建構函式的執行過程

var p1=new Person();

• 1、建立一個物件 (我們把這個物件稱之為Person建構函式的例項)- _p1
• 2、建立一個內部物件，this，將this指向該例項(_p1)
• 3、執行函式內部的程式碼，其中，操作this的部分就是操作了該例項(_p1)
• 4、返回值：
  • a、如果函式沒有返回值(沒有return語句)，那麼就會返回建構函式的例項(p1)
  • b、如果函式返回了一個基本資料型別的值，那麼本次建構函式的返回值是該例項(_p1)

      function fn(){
          
      }
      var f1=new fn();    //f1就是fn的例項
  
      function fn2(){
          return "abc";
      }
      var f2=new fn2();   //f2是fn2建構函式的例項
  

  • c、如果函式返回了一個複雜資料型別的值，那麼本次函式的返回值就是該值

      function fn3(){
          return [1,3,5]; 
          //陣列是一個物件型別的值，
          //所以陣列是一個複雜資料型別的值
          //-->本次建構函式的真正返回值就是該陣列
          //-->不再是fn3建構函式的例項
      }
      var f3=new fn3();   //f3還是fn3的例項嗎？錯
      //f3值為[1,3,5]
  

最後補充：

原型

• 原型很多人開發用不到？
  • 很多人都用es6/7/8開發，確實用的比較少
  • 如果你用es5之前的版本開發程式碼(IE8、IE7。。。)，可能天天都要寫原型
  • 理解了原型，才是理解了JS面向物件的核心
• 類繼承其實本質上還是用原型繼承來(包裝)的

物件的屬性查詢規則

//–>1、首先檢視本身有沒有length屬性
//–>2、如果本身沒有該屬性，那麼去它的原型物件中查詢
//–>3、如果原型物件中沒有，那麼就去原型物件的原型物件中查詢，最終一直找到根物件（Object.prototype）
//–>4、最終都沒有找到的話，我們認為該物件並沒有該屬性，如果獲取該屬性的值：undefined

global和window的區別

• global是es中全域性作用域中的根物件
  • 但是nodejs裡面，global全是表示全域性變數的載體
  • 瀏覽器端的js裡面，全域性變數都放在了window中，瀏覽器中不存在global物件