想啥寫啥

問題：
javascript 由什麼組成：
　　ECMAScript / DOM / BOM
javascript 原始類型：
　　string number boolean null undefined object
　　demo:  '11'，11，true ， null ， undefined， let obj = {}
基本類型：
　　string ,number,boolean,null,undefined
　　demo:  '11'，11，true ， null ， undefined，

複雜類型：
　　object,
　　demo: let obj = {}

javascript undefined null的區別

　　undefined:
　　　　1.聲明變量，沒有賦值
　　　　　　demo: var a 
　　　　　　　　　cosole.log(a)　// undefined

　　　　2.函數參數，在調用時，沒有帶參
　　　　　　demo: 
　　　　　　　　function add (id){
　　　　　　　　　　console.log(id)　　// undefined
　　　　　　　　}
　　　　　　　　add() // 調用沒有帶參
　　　　3.對象沒有賦值的屬性
　　　　　　demo:
　　　　　　　　let o  = {}
　　　　　　　　console.log(o.p)　// undefined　
　　　　　　　　let a = new Object();
　　　　　　　　console.log(a.x)　 // undefined　
　　　　4.函數沒有返回值時
　　　　　　demo:
　　　　　　　　function too(x=11){
　　　　　　　　　　console.log(x)
　　　　　　　　}
　　　　　　　　let x = too();
　　　　　　　　console.log(x) // undefined
　　
　　　　　　　　如下是 一個有返回值的demo　　　　　　
　　　　　　　　function foo(x=11){
　　　　　　　　　　return x 
　　　　　　　　}
　　　　　　　　let y = foo();
　　　　　　　　console.log(y) // 11
　　null:表示被定義了，可是這個值爲空
javascript 隱式轉換：
　　false : 0 , true :1 , " " : 0
　　demo:
　　　　let t = true
　　　　if(t==1){
　　　　　　alert("我是true可是我轉換成1") // 我是true可是我轉換成1
　　　　}
　　　　let t = false
　　　　if(t==0){
　　　　　　alert("我是false可是我轉換成0") // 我是false可是我轉換成0
　　　　}

　　　　// 字符串
　　　　let b = ""
　　　　if(b==0){
　　　　　　alert("我是空可是我轉換成0") // 我是空可是我轉換成0
　　　　}
　　　　// 對象和布爾比較
　　　　let t = [];　
　　　　if(t==false){
　　　　　　// 對象轉換成空字符串 ，而後再轉成數字0 ，false 轉換成0再作比較
　　　　　　alert("我是一個對象，可是我先轉換爲空（' '）在轉換成數字") // 我是一個對象，可是我先轉換爲空（' '）在轉換成數字
　　　　}
　　　　// 對象和字符串比較
　　　　let t = [1,2,3]
　　　　if(t=="1,2,3"){
　　　　　　alert("對象和字符串比較，先把對象轉換成字符串'1,2,3' ,而後再作比較")
　　　　}
　　　　// 對象和數字比較
　　　　let t = [1];
　　　　if(t==1){
　　　　　alert("我是先轉成'1'再比較")
　　　　}
　　　　// 字符串和數字比較
　　　　'1' == 1 // true
　　　　// 字符串布爾
　　　　’1‘ == true // true

　　　　'0' == false // true
　　　　// 特殊比較
　　　　undefined == null // true

什麼事編程面向對象：
　　面向對象：是一種設計思想，簡稱：OOP,把公共的事物抽象成屬性和方法進行編程
原型鏈和做用域鏈有什麼區別：
　　原型鏈：針對構造函數；例如：咱們建立一個函數，這個函數經過__proto__ 或 prototype 綁定屬性，而後經過new這個函數，那麼這個被new 出來的新函數就會繼承該函數的屬性。
　　　　經過新函數訪問，可是新函數沒有這個屬性，因此要經過鏈式向上查找，這就是原型鏈

　　demo:  
　　　　　　function Add () {}
　　　　　　Add.prototype.id = "1111"
　　　　　　let a = new Add()
　　　　　　console.log(a.id)  // "1111"
　　做用域鏈：是針對變量；分有全局和局部，若是局部沒有就向全局查找
　　demo:　　　　
　　　　　　let a = "你這個老頭壞滴狠";
　　　　　　function too(){
　　　　　　　　console.log(a)  // "你這個老頭壞滴狠";
　　　　　　}

javascript 多態繼承：
　　同一個事物：發出不一樣的形態
　　繼承：同一個事物，繼承相同的形態，

javascript 閉包：
　　1.讀取其餘函數內部變量的函數，

　　2.子函數調用父函數的變量，變量不會被釋放

javascript 類

　　function Person(name){

     // 共用屬性
 this.name = name;
 // 共用實例
 this.userName = function(){
        console.log(this.name+'是個人愛人');
     }
    this.totalNum = function(){
        console.log("我共用")
    }
}

Person.prototype.Add = function(){
    console.log(this.name+"我添加了");
}

let b = new Person("LING");

b.userName();
b.Add();


// 想要繼承類經過prototype new一個新的類
function ClassNameTest(){}
// 例子
ClassNameTest.prototype = new Person();
const tt = new ClassNameTest();
tt.totalNum();

/**
 * 得到的思想
* 建立一個類，首字母要大寫
* 能夠把共同的可複用性的放在類裏面
* 獨立狀態的可用portotype 點來繼承
* 使用類能夠用new 一個變量來使用
*
 * 子類繼承父類能夠用經過prototype來實現
* 也要new 一個新的類經過變量調用類的方法
* 缺點：沒法繼承多個類
*
 * **/

javascript 變量提高：
　　var a = "1"；
　　function foo(){
　　　　let a = "44"
　　　　console.log(a) // 44
　　　　return a
　　}
　　foo()
javascript let const var 的區別：
　　let 是一個塊級做用域，在函數內定義，對外部無影響；
　　demo:　　
　　　　let a = "444";
　　　　function foo(){
　　　　　　let a = "我是諤諤"
　　　　　　console.log(a)　//  "我是諤諤"
　　　　}
　　　　console.log(a)　　//  "444"
　　const 是一個常量,定義後不能修改   
　　var 是一個全局，能夠修改，不初始化會獲得undefined
javascript  __proto__  protoType的關係：
　　
　　　　

   function Person (){}
   let person = new Person();
   console.log(person.__proto__ == Person.prototype); // true
   console.log(Person.prototype.constructor==Person); // true

javascript 手寫實現一個xhr：

　　// 建立一個xhr對象

　　var xhr = new XMLHttpRequest()

　　xhr.open ("get","文件名地址","布爾，false表示同步請求，true表示異步請求")

　　xhr.onreadystatechange = function(){
　　　　// readystate 

　　　　// 0 表示未初始化，xhr對象已調用，open方法沒有執行

　　　　// 1表示初始化，send方法沒有執行

　　　　// 2表示發送數據，http請求頭未知

　　　　// 3表示數據發送中，可是http請求頭不全，致使responseBody和responseText報錯

　　　　// 4表示數據接收完畢，responseBody和responseText迴應請求的數據
　　　　console.log(xhr.readystate)

　　　　if(xhr.readystate==4 && xhr.status==200){
　　　　　　// 表示數據接收完畢 ，http狀態200
　　　　　　

　　　　}
　　}

　　xhr.send()

　　post 請求

　　let xhr = new XMLHttpResquest();

　　xhr.open('post','aa.text?parmes=1&id=2');

　　xhr.onreadystatechange = function(){
　　　　if(xhr.readystate==4 && xhr.status==200){
　　　　　　alert("成功")
　　　　}
　　}

　　xhr.setRequsetHeader ('Content-Type','applicaiton/x-www-form-urlencoded');

　　xhr.send("?parmes=1&id=2");

　　使用promise 封裝ajax
　　let fetch = (method,url)=>{
　　　　rerurn new Promise((reject,resolve)=>{
　　　　　　let xhr = new XMLHttpRequest();

　　　　　　xhr.open(method,url);
　　　　　　xhr.responseType = "json";
　　　　　　xhr.setRequsetHeader ("Accept","application/json");
　　　　　　xhr.readystatechange = function(){
　　　　　　　　if(xhr.readystate==4 && xhr.status==200){
　　　　　　　　　　resolve(this.response)
　　　　　　　　}else{
　　　　　　　　　　reject(this.response)
　　　　　　　　}
　　　　　　}
　　　　　　xhr.send();
　　　　})
　　}
　　　　
　　fetch('get','https://www.baidu.com').then(({code,msg,res})=>{
　　　　console.log(code,msg,res)
　　}).catch(()=>{});

http請求狀態碼：

• 100 Continue 初始的請求已經接受，客戶應當繼續發送請求的其他部分
• 101 Switching Protocols 服務器將聽從客戶的請求轉換到另一種協議
• 200 OK 一切正常，對GET和POST請求的應答文檔跟在後面。
• 201 Created 服務器已經建立了文檔，Location頭給出了它的URL。
• 202 Accepted 已經接受請求，但處理還沒有完成。
• 203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，由於使用的是文檔的拷貝
• 204 No Content 沒有新文檔，瀏覽器應該繼續顯示原來的文檔。若是用戶按期地刷新頁面，而Servlet能夠肯定用戶文檔足夠新，這個狀態代碼是頗有用的
• 205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容
• 206 Partial Content 客戶發送了一個帶有Range頭的GET請求，服務器完成了它
• 300 Multiple Choices 客戶請求的文檔能夠在多個位置找到，這些位置已經在返回的文檔內列出。若是服務器要提出優先選擇，則應該在Location應答頭指明。
• 301 Moved Permanently 客戶請求的文檔在其餘地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。
• 302 Found 相似於301，但新的URL應該被視爲臨時性的替代，而不是永久性的。
• 303 See Other 相似於301/302，不一樣之處在於，若是原來的請求是POST，Location頭指定的重定向目標文檔應該經過GET提取
• 304 Not Modified 客戶端有緩衝的文檔併發出了一個條件性的請求（通常是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩衝的文檔還能夠繼續使用。
• 305 Use Proxy 客戶請求的文檔應該經過Location頭所指明的代理服務器提取
• 307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即便原來的請求是POST，即便它實際上只能在POST請求的應答是303時才能重定向。因爲這個緣由，HTTP 1.1新增了307，以便更加清除地區分幾個狀態代碼：當出現303應答時，瀏覽器能夠跟隨重定向的GET和POST請求；若是是307應答，則瀏覽器只能跟隨對GET請求的重定向。
• 400 Bad Request 請求出現語法錯誤。
• 401 Unauthorized 客戶試圖未經受權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據此顯示用戶名字/密碼對話框，而後在填寫合適的Authorization頭後再次發出請求。
• 403 Forbidden 資源不可用。
• 404 Not Found 沒法找到指定位置的資源
• 405 Method Not Allowed 請求方法（GET、POST、HEAD、Delete、PUT、TRACE等）對指定的資源不適用。
• 406 Not Acceptable 指定的資源已經找到，但它的MIME類型和客戶在Accpet頭中所指定的不兼容
• 407 Proxy Authentication Required 相似於401，表示客戶必須先通過代理服務器的受權。
• 408 Request Timeout 在服務器許可的等待時間內，客戶一直沒有發出任何請求。客戶能夠在之後重複同一請求。
• 409 Conflict 一般和PUT請求有關。因爲請求和資源的當前狀態相沖突，所以請求不能成功。
• 410 Gone 所請求的文檔已經再也不可用，並且服務器不知道應該重定向到哪個地址。它和404的不一樣在於，返回407表示文檔永久地離開了指定的位置，而404表示因爲未知的緣由文檔不可用。
• 411 Length Required 服務器不能處理請求，除非客戶發送一個Content-Length頭
• 412 Precondition Failed 請求頭中指定的一些前提條件失敗
• 413 Request Entity Too Large 目標文檔的大小超過服務器當前願意處理的大小。若是服務器認爲本身可以稍後再處理該請求，則應該提供一個Retry-After頭
• 414 Request URI Too Long URI太長
• 416 Requested Range Not Satisfiable 服務器不能知足客戶在請求中指定的Range頭
• 500 Internal Server Error 服務器遇到了意料不到的狀況，不能完成客戶的請求
• 501 Not Implemented 服務器不支持實現請求所須要的功能。例如，客戶發出了一個服務器不支持的PUT請求
• 502 Bad Gateway 服務器做爲網關或者代理時，爲了完成請求訪問下一個服務器，但該服務器返回了非法的應答
• 503 Service Unavailable 服務器因爲維護或者負載太重未能應答。例如，Servlet可能在數據庫鏈接池已滿的狀況下返回503。服務器返回503時能夠提供一個Retry-After頭
• 504 Gateway Timeout 由做爲代理或網關的服務器使用，表示不能及時地從遠程服務器得到應答
• 505 HTTP Version Not Supported 服務器不支持請求中所指明的HTTP版本

javascript section cookies localStorage sessionStorage：

　　

/*
* 保存狀態：cookie 存在瀏覽器端，session 存在服務端，
*
* 使用方式：
*
* cookie 分兩種：
* 1.若是沒有設置過期間，隨着瀏覽器的關閉而消失
* 2.若是設置過時時間，過時時間到，cookie會自動消失
* cookie 是以文本方式保存在客戶端，每次請求都帶上它
*
* session 有沒有sessionId 有這個返回一個session對象，沒有這個建立一個新的session對象
* 分三種狀況：禁用cookie則重寫response.encodeURL(url)
*           不支持cookie 將會重寫url把sessionId拼接搭到url後面
*           支持則url不作任何處理
*
*
* 存儲內容：
* cookie 以文本格式存儲， session 相似hashtable數據格式存儲，能夠存儲多個對象（session）
*
* 存儲的大小
* cookie 單個不能超過4kb, session 沒有大小限制
*
* 安全性
* cookie 容易被攔截，欺騙， session 的sessionId是保存在cookie裏的，因此安全大於cookie
*
* 應用場景：
*   cookie 用戶登錄過，下次能夠記住用戶信息，方便登錄;保存上次的登陸時間；保存上次查看的頁面；統計查看次數
*
*缺點：
*   cookie 大小限制，不安全
*   session 不利於用戶量多使用，佔服務器內存
*
*
*localStorage:存在本地，永久性存儲,大小5mb,沒有跟服務器接觸
*
*sessionStorage:僅在當前會話，瀏覽器關閉就結束，大小5mb,沒有跟服務器接觸
*
*
* */

javascript 重繪和迴流，防抖,節流

重繪：不改變佈局大小，只改變樣式和文本，

迴流：改變頁面佈局，從新計算文檔元素

防抖：屢次觸發事件，事件之執行一次，而且是在事件結束後執行
應用場景：好比按鈕，屢次點擊，將屢次操做合併成一次操做

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #container {
            width: 100%;
            height: 80px;
            line-height: 80px;
            background-color: black;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="container"></div>
<script>
    const container = document.getElementById("container");
    let count = 1;
    function add(e){
        console.log(e,"getHtml")
        container.innerText = count++;
    }
    function getHtml(func,wait,isflag) {
        let time,result;
        return function () {
            time && clearTimeout(time);
            let context = this;
            let arg = arguments;
            if(isflag){
                let callnow = !time;
                time = setTimeout(()=>{
                    time = null
                },wait);
                if(callnow) result=func.apply(context,arg)
            }else {
                time = setTimeout(()=> {
                    func(context, arg)
                }, wait)
            }
            return result;
        }
    }
    container.onclick = getHtml(add,300);

</script>
</body>
</html>

 

 

 

節流：在規定時間內，只執行一次，必定時間內只觸發一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>節流</title>
    <style>
        #content{
            width:80px;
            height: 60px;
            background-color: black;
            overflow: auto;
        }
    </style>
</head>
<body>
<div id="content">gggggggggggggggggggggggggggggggggggggggggggggggggggggg
    gggggggggggggggggggggggggggggggggggggggggggg</div>
<script>
    let content = document.getElementById('content');
    let falg = true;
    content.onscroll = function () {
        if(!falg) return;
        falg = false;
        setTimeout(function () {
            console.log("函數節流");
            falg = true
        },300)
    }
</script>
</body>
</html>

應用場景：滾動條，縮放頁面
javascript DOM有哪些api

nodeType:

html:<div id="container"></div>

　　let container = document.getEleMentById('container');
　　container.nodeType // 判斷是什麼元素 
　　1.表示標籤元素
　　2.表示元素屬性
　　3.表示文本
　　8.表示註釋
　　9.表示文檔 （document)
　　11.表示輕量級文檔 （DocumentFragment）
nodeValue:獲取內容

建立api:
　　createElement 建立標籤元素
　　createTextNode 建立文本

　　cloneNode 複製一個節點副本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <span>我能夠複製哦</span>
</div>
<button id="btn">複製</button>
<script>
    let content = document.getElementById('content');
    let btn = document.getElementById("btn");
    btn.onclick = function () {
        let content1 = content.cloneNode(true);
        content1.id="content1";
        document.body.appendChild(content1);
    }
    /**
     * 獲取id
     * 經過點擊事件觸發
     * id.cloneNode(true) // 複製節點副本
     * 添加id
     * 使用appendChild 插入到body
     *
     *
     * **/
</script>
</body>
</html>
createDocumentFragment() 文檔片斷

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="list"></ul>
<input type="button" value="點我" onclick="handleClick()"/>
<input type="button" value="愛我" onclick="handleBtn()"/>
<script>
    let listID = document.getElementById("list");
    // function handleBtn(){
    //     console.time("antzone");
    //     for (let i =0;i<10;i++){
    //         let lis = document.createElement('li');
    //         lis.textContent = i;
    //         listID.appendChild(lis);
    //
    //     }
    //     console.timeEnd("antzone"); 
    //
    // }
    let Fragment = document.createDocumentFragment();
    function handleClick() {
        console.time("antzone");
        for(let i =0;i<10;i++){
            let list = document.createElement('li');
            list.textContent = i;
            // 先放進片斷
            Fragment.appendChild(list)
        }
        // 後面一次性再加入片斷
        listID.appendChild(Fragment);
        console.timeEnd("antzone"); //antzone: 
    }
    /**
     * 獲取id
     * 經過點擊事件處理
     * 使用createElement建立元素
     * textContent 文本內容
     * 性功能要求：
     * 第一個方案：每次都會建立一個新的元素，而後添加到文檔樹中，形成瀏覽器迴流
     * 第二個方案：每次先添加到Fragment,而後再一次性添加到ul中
     *
     *
     * **/
</script>
</body>
</html>
appendChild 在後插入
inserBefor 在前面插入
removeChild 刪除
replaceChild 替換一個元素

查找api:
　　getElementById()　　　// 查找id
　　getElementsClassName()// 查找class
　　getElementsByTagName()// 查找標籤元素
　　querySelectorAll()// 經過class 查找全部
　　querySelector（） // 查找一個

修改屬性：

setAttribute ('name',value) // 修改屬性
getAttribute('name') // 獲取屬性

 

javascript mvc mvvm mvp的區別

　　mvc:module-view-controller   
　　用戶操做（view）=>業務邏輯處理（controller）=>數據持久化（module）=>用戶視圖(view)

　　

　　mvp:module-view-Presenter

　　用戶視圖（view）=>Presenter=>數據持久化（module）

　　應用到：.net 

　　
　　mvvm:module-view-viewModule
　　用戶視圖（view）<=>viewModule<=module(數據持久化)
　　好處：可實現數據綁定

　　應用到：angular vue 

　　

地址參考：https://www.cnblogs.com/guwei4037/p/5591183.html

javascript require 和 import 加載模塊的好處
　　require 是commonJs的語法
　　const {a,b,c,d} require('fs);
　　等於：
　　const _fs = require('fs');
　　const a = _fs.a
　　const b =_fs.b
　　const c = _fs.c
　　const d = _fs.d

　　

　　
javascript 淺拷貝和深拷貝
javascript alert的調用
javascript 跨域問題
javascript 當在瀏覽器輸入url發生了什麼

　　一、解析url

　　二、DNS解析(其實是域名和ip對應的數據庫)

　　三、瀏覽器與tcp創建三次握手

　　四、請求和傳輸數據

　　五、頁面渲染
javascript tcp三次握手
　　一、客戶端向服務器發送請求

　　二、服務器端接收到請求，返回一個指令

　　三、客戶端接收到服務端回覆指令並返回確認　　　
瀏覽器渲染頁面：

　　一、解析html,建立dom樹

　　二、解析css,建立style Rule　

　　三、合併dom樹和style Rule，計算每一個節點樣式

　　四、繪製完成顯示在屏幕上

渲染優化：
　　

1. HTML文檔結構層次儘可能少，最好不深於六層；

2. 腳本儘可能後放，放在前便可；

3. 少許首屏樣式內聯放在標籤內；

4. 樣式結構層次儘可能簡單；

5. 在腳本中儘可能減小DOM操做，儘可能緩存訪問DOM的樣式信息，避免過分觸發迴流；

6. 減小經過JavaScript代碼修改元素樣式，儘可能使用修改class名方式操做樣式或動畫；

7. 動畫儘可能使用在絕對定位或固定定位的元素上；

8. 隱藏在屏幕外，或在頁面滾動時，儘可能中止動畫；

9. 儘可能緩存DOM查找，查找器儘可能簡潔；

10. 涉及多域名的網站，能夠開啓域名預解析

　　
javascript 數組和對象的方法
　　數組：forEach,map,fillter,find，join,shift,unshift,push,concat,replase,sort,slice,reduer,indexOf,some,reverse(數組反轉[1,2,3] =>[3,2,1])
javascript 設計模式有哪些
javascript splice和concat
　　array.splice(start,deteleCount,item,item1)
　　

　　　　let b = ['a','1','b','2','c','3','d','4']
　　　　b.splice(1,2) // ["1", "b"]
　　
　　　　b  // ["a", "2", "c", "3", "d", "4"]
　　　　b.splice(4,2) // ["d", "4"]
　　

　　start 至關於length,
　　deteleCount 刪除多少位
　　splice 實現刪除，替換，插入

　　concat 將參數添加到數組
　　slice：
　　　　

　　let c = [1,2,3,4,5,6];
　　c.slice(4)  // [5, 6]
　　c // 沒有改變  [1,2,3,4,5,6]

　　

javascript this指向
javascript es6 promise
react : 專一於視圖層（view）
若是不用jsx寫，用json寫react 
　　<div className="content">
　　　　<p>7777</p>

　　</div>
　　const DivContent = () =>{
　　　　return {
　　　　　　type:'div',
　　　　　　props:{
　　　　　　　　className:'content',
　　　　　　　　children:{
　　　　　　　　　　type:'p',
　　　　　　　　　　props:{
　　　　　　　　　　　　children: '你大爺的'
　　　　　　　　　　}　　
　　　　　　　　}
　　　　　　}
　　　　}
　　} 

react jsx組件內true簡寫
　　demo: <Checkbox checked />
　　<Checkbox checked = {false}/>

react jsx 自定義屬性,react 不會渲染：
　　html元素使用data-
　　以aria-開頭的網絡無障礙屬性一樣不會渲染　　
　　const LeftComponent = <Add  data-init = "1"/>

react 屬性表達式：

　　輸入： <Add too={a ===1 ? '我愛你' : ' 不愛你'}/>
　　輸出：const Add = React.createElement({
　　　　　　　　　Add,

　　　　　　　　　{too:a===1?'我愛你'：'不愛你'}
　　　　　　})
經典面試題：
　　function fn(){
　　　　for(var i =0;i<5;i++){
　　　　　　dubugger
　　　　　　setTimerout(()=>{
　　　　　　　console.log(i) // 5
　　　　　　},2000)
　　　　}
　　}
　　fn() // 

 

https:

　　get和post請求的區別
　　get和post都沒有長度限制，長度限制是web瀏覽器的url限制
　　get能夠是獲取用戶數據，因此不用每次和數據庫鏈接，
　　post 是用戶操做交互，刪除和修改，因此每次都須要請插入和刪除數據庫

 

vue 實現數據綁定的作法：

發佈者-訂閱模式：sub/pub 實現數據和視圖綁定，更新數據的方式用vm.set('property',value)

class類

class Person {
    constructor(val){
        this.name = val;
    }
    getName(){
        return this.name;
    }
    setName(val){
        this.name = val
    }
}

const person = new Person('我是一個類的變量，放置在constructor');
console.log(person.name);   // 我是一個類的變量，放置在constructor

person.setName('我是');
console.log(person.getName());// 我是