JS進階(一)(面向對象、原型)

時間 2019-12-04

標籤進階面向對象原型欄目 JavaScript 简体版

原文原文鏈接

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)構造函數，實例化對象，經過對象調用屬性和方法，完成相應的需求

建立對象的方式

對象: 具體特指的某個事物,具備特徵(屬性)和行爲(方法)，能夠看做是一堆無序屬性的集合
- 特徵--->屬性
- 行爲--->方法
建立對象三種方式：
1. 字面量的方式（一次只能建立一個）
  - 實例對象
```
var person1 = {
       name:"xxx",
       age:"xxx",
       eat:function(){}
   };
複製代碼
```
2. 調用系統的構造函數（建立出來的對象都是Object類型的）
```
var person2 = new Object();
    person2.name = "xxx";
    person2.age = "xxx";
    person2.eat = function(){};
複製代碼
```
3. 自定義構造函數方式(優化後的工廠模式)
```
function Person(name,age){
        this.name = name;
        this.age = age;
        this.eat = function(){};
    }
    //建立對象--->實例化一個對象的同時對屬性進行初始化
    var person3 = new Person("xx",11);
複製代碼
```
  - 1. 申請空間存儲對象
    2. this就是當前實例化的對象
    3. 設置對象中的屬性和方法(爲對象添加屬性和方法，爲屬性和方法賦值)
    4. 把建立後的對象返回都是須要經過new的方式
- 一、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 構造函數名字

原型

原型：html
- 實例對象中有__proto__這個屬性叫原型，也是一個對象，這個屬性是給瀏覽器使用，不是標準的屬性--->proto--->能夠叫原型對象
- 構造函數中有prototype這個屬性叫原型，也是一個對象，這個屬性是給程序員使用，是標準的屬性--->prototype--->能夠叫原型對象 可經過原型來添加方法，解決數據共享，節省內存空間
實例對象的__proto__和構造函數中的prototype相同--->true，又由於實例對象是經過構造函數來建立的，構造函數中又原型對象prototype，因此實例對象的__proto__指向了構造函數的原型對象prototypenode
原型的做用之一：共享數據，節省空間程序員
- 屬性須要共享，方法也須要共享
- 不須要共享的數據寫在構造函數中，須要共享的數據寫在原型中

簡單的原型語法(缺陷：須要手動修改構造器的指向)編程

Object.prototype = {
    //手動修改構造器指向
    constructor:Student,
    attribute:"xxx",
    method: function(){};
};
複製代碼

原型中的方法是能夠互相訪問的json

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>
複製代碼

構造函數和實例對象和原型對象之間的關係bash
- 構造函數：能夠實例化對象，有一個屬性叫作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
複製代碼