js原型鏈，做用域，閉包講解

時間 2019-12-01

原文原文鏈接

當面試的時候遇到問原型鏈，閉包，還有做用域，直接拿張紙和筆把原型鏈畫出來，閉包跟做用域直接用筆寫幾道題出來加深理解（由於咱們是理科生，圖形和題目以及控制檯輸出結果纔是最直觀的方法）html

問：什麼是原型鏈？面試

答：Javascript是面向對象的，每一個實例對象都有一個__proto_屬性，該屬性指向它原型對象，這個實例對象的構造函數有一個原型屬性prototype，與實例的__proto__屬性指向同一個對象。當一個對象在查找一個屬性的時，自身沒有就會根據__proto__ 向它的原型進行查找，若是都沒有，則向它的原型的原型繼續查找，直到查到Object.prototype._proto_爲nul，這樣也就造成了原型鏈。ajax

問：如何查找構造函數和原型中的屬性？

答：閉包

構造函數.prototype 查看構造函數的原型屬性函數

實例對象.__proto__ 查看實例對象的構造函數的原型post

實例對象.__proto__.constructor 查看實例對象的構造函數ui

原型鏈見過最好的圖片，不囉嗦url

體如今代碼上：spa

其實很是的簡單prototype

慄如：

咱們能夠先寫一個構造函數，而後在它的prototype中寫入方法，而後咱們能夠在入口函數中去寫一個實例對象，用實例對象的方法去調用，這樣子寫代碼能夠作到邏輯清晰，代碼簡潔大方。

 1 var letao;
 2 $(function() {
 3     letao = new Letao();
 4     letao.login();
 5 });
 6 
 7 var Letao = function() {
 8 
 9 }
10 
11 Letao.prototype = {
12     //登陸函數
13     login: function() {
14         // 1. 獲取登陸的按鈕添加點擊事件
15         $('.btn-login').on('click', function() {
16             // 2. 獲取輸入的用戶和密碼
17             var username = $('.mui-input-clear').val();
18             var password = $('.mui-input-password').val();
19             // 3. 驗證用戶名密碼是否輸入
20             if (!username) {
21                 // 第一個參數是提示內容 第二個參數是一個對象（提示框的設置） duration提示信息的長短  type 提示的標籤類型 long short 和 數字
22                 mui.toast('請輸入用戶名', { duration: 'long', type: 'div' })
23                 return;
24             }
25             if (!password) {
26                 // 第一個參數是提示內容 第二個參數是一個對象（提示框的設置） duration提示信息的長短  type 提示的標籤類型 long short 和 數字
27                 mui.toast('請輸入密碼', { duration: 'long', type: 'div' })
28                 return;
29             }
30             // 4. 調用登陸的API去驗證是否登陸成功
31             $.ajax({
32                 url: '/user/login',
33                 data: { username: username, password: password },
34                 type: 'post',
35                 success: function(data) {
36                     // 5. 判斷返回的結果是否有錯誤
37                     if (data.error) {
38                             // 若是有錯誤把錯誤信息提示一下
39                         mui.toast(data.message, { duration: 'long', type: 'div' })
40                         return;
41                     }else{
42                             // 若是登陸成功就跳轉到我的中心頁面
43                             window.location.href = 'user.html';
44                     }                    
45                 }
46             })
47         })
48     }
49 }