JavaScript分三個部分：
- ECMAScript標準：JS 的基本語法
- DOM：Document Object Model
- BOM：Browser Object Model
JavaScript 是什麼
- 解析執行：輕量級解釋型的，或是 JIT(即使編譯） 編譯型的程式設計語言
- 語言特點：動態，頭等函式 (First-class Function)
- 又稱函式是 JavaScript 中的一等公民
- 執行環境：在宿主環境（host environment）下執行，瀏覽器是最常見的 JavaScript 宿主環境
- 但是在很多非瀏覽器環境中也使用 JavaScript ，例如 node.js
- 程式設計正規化：基於原型、多正規化的動態指令碼語言，並且支援物件導向、命令式和宣告式（如：函數語言程式設計）程式設計風格
程式設計思想：
- 程式導向：所有事情都是親力親為，注重的是過程
- 物件導向：執行者成為指揮者，只要找物件，然後讓物件做相關的事情，注重的是結果
- js不是一門物件導向的語言，是基於物件的語言，用js來模擬物件導向
- 物件導向的特性 :封裝，繼承，多型，(抽象性)
- 封裝: 就是包裝，把一些重用到內容進行包裝,需要到時候,直接使用(例如把一個值，存在一個變數中，把一些重用程式碼放在函式中，把很多相同功能多函式放中一個物件中)
- 繼承: 類於類之間的關係，js中沒有類的概念，但有建構函式但概念，是可以有繼承的，是基於原型.
- 多型: 同一個行為，針對不同但物件，產生類不同但效果
- 物件導向的程式設計思想：根據需求，抽象出相關物件，總結物件的特徵和行為，把特徵變成屬性，行為變成方法，然後定義(js)建構函式，例項化物件，通過物件呼叫屬性和方法，完成相應的需求
建立物件的方式
- 物件: 具體特指的某個事物,具有特徵(屬性)和行為(方法)，可以看作是一堆無序屬性的集合
- 特徵--->屬性
- 行為--->方法
- 建立物件三種方式：
- 字面量的方式（一次只能建立一個）
- 例項物件
var person1 = { name:"xxx", age:"xxx", eat:function(){} }; 複製程式碼 - 呼叫系統的建構函式（建立出來的物件都是Object型別的）
var person2 = new Object(); person2.name = "xxx"; person2.age = "xxx"; person2.eat = function(){}; 複製程式碼 - 自定義建構函式方式(優化後的工廠模式)
function Person(name,age){ this.name = name; this.age = age; this.eat = function(){}; } //建立物件--->例項化一個物件的同時對屬性進行初始化 var person3 = new Person("xx",11); 複製程式碼-
- 申請空間儲存物件
- this就是當前例項化的物件
- 設定物件中的屬性和方法(為物件新增屬性和方法，為屬性和方法賦值)
- 把建立後的物件返回 都是需要通過new的方式
-
- 1、2中方式建立的物件屬於Object型別，3中建立的物件屬於Person(建立的自定義物件)
- 字面量的方式（一次只能建立一個）
工廠模式和自定義建構函式的區別
- 工廠模式：
function createObject(name,age){ var obj = new Object(); obj.name = name; obj.age = age; obj.eat = function(){}; return obj; } 複製程式碼 - 自定義建構函式：
function Person(name,age){ this.name = name; this.age = age; this.eat = function(){}; } //建立物件--->例項化一個物件的同時對屬性進行初始化 var person3 = new Person("xx",11); 複製程式碼 - 區別：
- 共同點：都為函式，可建立物件，可傳入引數
- 不同點：
- 工廠模式：
- 函式名為小寫
- 有new，有返回值
- new之後的物件是當前的物件
- 直接呼叫函式就可以建立物件
- 自定義建構函式：
- 函式名是大寫(首字母)
- 沒有new，沒有返回值
- this是當前的物件
- 通過new的方式來建立物件
- 工廠模式：
建構函式和例項物件之間的關係
- 物件導向的思想是--->抽象的過程--->例項化的過程
-
function Person(name,age){ this.name = name; this.age = age; this.eat = function(){}; } //建構函式--->例項物件 var per = new Person("xx",11); console.log(per.constructor == Person);//true console.log(per instanceof Person);//true 複製程式碼 - 例項物件和建構函式之間的關係：
- 例項物件是通過建構函式來建立的--建立的過程叫例項化
- 判斷物件是否為該資料型別
- 通過(原型)構造器的方式 例項物件.構造器 == 建構函式名字
- 物件 instanceof 建構函式名字
原型
-
原型：
- 例項物件中有__proto__這個屬性叫原型，也是一個物件，這個屬性是給瀏覽器使用，不是標準的屬性--->proto--->可以叫原型物件
- 建構函式中有prototype這個屬性叫原型，也是一個物件，這個屬性是給程式設計師使用，是標準的屬性--->prototype--->可以叫原型物件 可通過原型來新增方法，解決資料共享，節省記憶體空間
-
例項物件的__proto__和建構函式中的prototype相同--->true，又因為例項物件是通過建構函式來建立的，建構函式中又原型物件prototype，所以例項物件的__proto__指向了建構函式的原型物件prototype
-
原型的作用之一：共享資料，節省空間
- 屬性需要共享，方法也需要共享
- 不需要共享的資料寫在建構函式中，需要共享的資料寫在原型中
-
簡單的原型語法(缺陷：需要手動修改構造器的指向)
Object.prototype = { //手動修改構造器指向 constructor:Student, attribute:"xxx", method: function(){}; }; 複製程式碼 -
原型中的方法是可以互相訪問的
function Object(name,age){ this.name = name; this.age = age; } Object.prototype.method1 = function(){ console("method1"); this.method2; }; Object.prototype.method2 = function(){ console("method2"); this.method1; }; var obj = new Object("xx",11); obj.method1();// method1 method2 obj.method2();// method2 method1 複製程式碼 -
原型的使用例項
<body> <input type="button" value="顯示效果" id="btn"/> <div id="dv" style="width: 300px;height: 200px;background-color: red"></div> <script src="common.js"></script> <script> /** * 改變元素樣式內容 *@param btnObj 按鈕物件 *@param dvObj 盒子物件 *@param josn 改變的樣式資訊 */ function ChangStyle(btnObj,dvObj,json){ this.btnObj = btnObj; this.dvObj = dvObj; this.json = json; } //為ChangStyle的原型物件新增方法 ChangStyle.prototype.init = function(){ var that = this;//儲存ChangStyle例項物件 this.btnObj.onclick = function(){ for(var key in that.json){ that.dvObj.style[key] = that.json[key]; } }; }; //例項物件 var json = {"width" : "500px", "height" : "800px", "background" : "blue", "opacity": "0.2"}; var btn = document.getElementById("btn"); var dv = document.getElementByID("dv"); var cs = new ChangStyle(btn,dv,json); cs.init(); //呼叫方法 </script> </body> </html> 複製程式碼 -
建構函式和例項物件和原型物件之間的關係
- 建構函式：可以例項化物件，有一個屬性叫做prototype,是建構函式的原型物件.原型物件prototype中有一個constructor構造器，這個構造器指向的就是自己所在的原型物件所在的建構函式。
- 例項物件：
- 例項物件的原型物件(proto)指向的是該建構函式的原型物件。建構函式的原型物件(prototype)中的方法是可以被例項物件直接訪問的
- 例項物件使用的屬性或方法，先在例項中查詢若有是則使用，若無再到例項物件的__proto__指向的原型物件prototype中尋找，若有則使用，若無則報錯
-
為系統的物件的原型中新增方法
- 例如倒序輸出字串方法
-
String.prototype.myReverse=function () { for(var i=this.length-1;i>=0;i--){ console.log(this[i]); } }; var str="abcdefg"; str.myReverse();//g f e d c b a (隔行輸出的) 複製程式碼
-
區域性變數變成全域性變數(把區域性變數給window)
//函式的自呼叫--自呼叫函式 function(){ var num = 10;//區域性變數 };)(); console.log(num); //報錯 //win形參 window實參 (function(win){ var num = 10; win.num = num; })(window); console(num);//10 複製程式碼- js是一門動態型別的語言，物件沒有屬性 點.出來就有了
------------------------------------------------------記錄於 2019.4.20 JavaScript高階(一)