this指向-作用域、作用域鏈-預決議 變數提升-Vue組件傳值 父子 子父 非父子-Vue資料雙向系結原理

目錄

1. this指向
2. 作用域、作用域鏈
3. 預決議 變數提升
4. Vue組件傳值 父子 子父 非父子
5. Vue資料雙向系結原理

1.this指向

函式的this指向 看呼叫、不看宣告
(1)普通函式呼叫
①函式名() this->windown
(2)事件處理函式呼叫
①oDiv.onclick = function(){} this->添加事件的元素
　 1.1 onclick　　點擊事件
　　1.2 onl oad　　用戶進入某個頁面的時候觸發（onload 事件可用于檢測訪問者的瀏覽器型別和瀏覽器版本，并基于這些資訊來加載網頁的正確版本，）
　　1.3 onunload　　用戶離開某個頁面的時候觸發（onload 和 onunload 事件可用于處理 cookie，）
　　1.4 onchange　　內容變化事件（常結合對輸入欄位的驗證來使用）
　　1.5 onm ouseover　　滑鼠移動到HTML元素上方的事件
　　1.6 onm ouseout　　滑鼠移出HTML元素上方的事件
　　1.7 onm ousedown　　滑鼠按下的時候觸發的事件
　　1.8 onm ouseup　　滑鼠彈起觸發的事件（onmousedown，onmouseup和onclick區別，onclick是滑鼠完成點擊事件的時候觸發的事件）
　　1.9 onfocus　　元素獲取焦點事件
　　1.10 onblur　　元素失去焦點事件
　　1.11 onabort　　影像的加載失敗
　　1.12 ondblclick　　雙擊事件
　　1.13 one rror　　當加載影像和檔案時發生錯誤
　　1.14 onkeydown　　鍵盤按鍵被按下發生的事件
　　1.15 onkeyup　　鍵盤按鍵被松開發生的事件
　　1.16 onkeypress　　鍵盤按鍵按下并松開發生的事件
　　1.17 onm ousemove　　滑鼠移動
　　1.18 onresize　　視窗或者框架被重新調整大小
　　1.19 onselect　　文本被選中
　　1.20 onreset　　重置按鈕被點擊
　　1.21 onsubmit　　提交按鈕被點擊

(3)全域中this指向window物件

(4)物件的方法函式

Var obj = {fn:function(){}}

物件名.方法名()   obj.fn(); this->呼叫方法的物件（物件名）obj

例1.普通函式this默認指向window

 function fun(){
            console.log(this)  //window
        }        
  fun()  //相當于window.fun()

例2.物件的方法 物件.方法呼叫this指向該物件

let obj={
         name:'胡歌',
         age:"18",
         speak(){
             console.log(this.name+'今年'+this.age,this)  
             //胡歌今年18   this指向這個物件
            }
        }
obj.speak()  //誰呼叫這個方法指向誰

例3.函式誰呼叫指向誰

function constructorFun(name='虹貓藍兔七俠傳',age='16'){
        this.name=name;
        this.age=age;
        this.speak=function(){
             console.log(this.name+'的年齡是'+this.age,this)
            }
        }
        let childObj = new constructorFun('胡歌',20)
        childObj.speak()  
        //胡歌的年齡是20  this指向childObj這個物件 
        //this指向實體
        //比如：vue實體  就是new出來的 在使用中通常會使用this點方法名來使用方法，這些方法都是vue這個類上面的方法，

例4.事件物件 誰觸發事件指向誰

 <div id="box">我是id=box盒子</div>
 let boxid = document.getElementById('box')
 boxid.onclick=function(){
        console.log(this)  //指向box這個dom物件
         this.innerHTML='我是用this改變后的innerHTML'
    }

例5.箭頭函式this指向外層作用域的this

<div class="box">我是class=box盒子</div>
 let boxclass = document.getElementsByClassName('box')[0]
        boxclass.onclick=()=>{
            console.log(this)  //當前作用域外層this指向window
            this.alert('我是window物件')
        }

總的來說：
①方法函式：物件.方法() ; this->呼叫方法的物件
②普通函式：( window.) 函式名() this->window
③事件處理函式： oDiv.οnclick= function(){} oDiv.onclick() this->添加事件的元素
④全域中的this指向window物件

2.作用域、作用域鏈

它是指對某一變數和函式具有訪問權限的代碼空間
在js中只有兩種作用域
1.全域作用域：script標簽內部的區域就是全域作用域
2.區域作用域：函式大括號內部的區域就是區域作用域
在js中只有函式可以劃分作用域，因此每個函式的大括號內部都是一個區域作用域

window.onload = function () { //在這里再寫上你的函式 }

因此我們稱區域作用域為函式作用域
1.全域變數 宣告在全域的變數
2.全域作用域就是全域變數起作用的范圍
3.區域變數 在函式內部宣告的變數
4.區域作用域就是區域變數起作用的范圍

  <script>
    	  //script標簽中的空間就是全域作用域
         //全域作用域
         //a變數就宣告在了全域作用域，就是一個全域變數
        var a;  //全域變數
        a(a)
        a = 10;
        function a(a) {
            //函式大括號內區域作用域
            //在函式內部宣告的變數就是區域變數
            let b = 10;//區域變數
            console.log(a)
            a = 100
        }
        console.log(a)
        console.log(b) //b is not defined
        var c;
        console.log(c)//undefined
    </script>

作用域鏈
會先在當前作用域查找變數，當前沒有向上一級查詢

1.當前有使用當前的變數，

首先，函式不呼叫不執行，所以呼叫了fun函式，在fun函式中，有一個函式a，呼叫了函式a，列印了a，呼叫a會執行a函式，里面var了一個a賦值為10，所以在函式a中列印a出的結果為10，在fun函式中列印a的結果是函式a這個函式體，

2.當前沒有向上一級查找變數，一直到全域作用域為止，如果還是沒有會報錯，xxx is not defined，

 var c = 100;//全域作用域中有c
        function num(b) {
        //上一級函式區域作用域也沒有c
            var a = 10;
            function sum() {
                console.log(a + b + c) //當前函式區域作用域沒有c
            }
            sum()
        }
        // num(10)  //10+10+100
        num(10)  //120

3.瀏覽器預決議變數提升

提升的物件包括：
1.函式宣告
2.變數宣告
3.函式內部作用域默認形參宣告

1.函式宣告和變數宣告是同一個變數名
當函式宣告和變數宣告沖突的時候,變數宣告無法覆寫函式宣告，變數賦值可以覆寫函式宣告 所以最后結果為10
具體代碼：

 a(a)  //呼叫函式
    a = 10;  //變數   
    var a;  //全域變數
    //或者 var a = 10;  同上面兩句
    function a(a) {  //函式

    }
    console.log(a)//10

瀏覽器對js代碼的預決議，這是代碼執行之前的操作，也叫變數提升，
函式和定義變數會被提升到當前作用域最頂端，當函式名和定義變數名字一樣時，函式名會覆寫變數定義，
預決議完成后的代碼：

  //上面預決議完成后是
    function a(a) { 

    }
    a(a)  //呼叫函式 
    a = 10;  //給變數a重新賦值覆寫函式體
    console.log(a)//10

2.函式形參和變數宣告是同一個變數名

  a(a)  //呼叫函式
    a = 10;  //變數
    b=20;//變數
    var a;  //全域變數
    function a(a) {  //函式
        var a = 100;
        b=200
        console.log(a,b)  //100  200
    }
    var b;
    console.log(a)//10

當函式呼叫的時候，就要進入函式的區域作用域 瀏覽器還要重新再區域作用域中進行預決議，變數名定義提前 賦值不會提前，
1.引數的傳遞和函式中變數名沖突，函式形參的值會覆寫預決議的效果
2.在函式執行之前進行預決議，這時候引數還沒傳遞
3.預決議以后 函式內代碼開始執行 傳參
4.在函式中如果沒有定義這個變數 就要在全域作用域中查找
5.賦值的時候函式中沒有這個變數根據作用域鏈也會將全域這個變數的值發生改變
函式體內正常預決議代碼，沒有形參參與：

var b;
    function a(a) {  //函式
        var a;
        a = 100;
        b = 200
        console.log(a, b)
    }
    a(a)  //呼叫函式
    a = 10;  //變數
    b = 20;//變數
    console.log(a)//10

函式開始執行，形參接受到實參的時候：

var b;
        function a(a) {  //函式
            var a =a; //定義a為形參a  引數
            a = 100;  //被重新賦值
            b = 200
            console.log(a, b)  //100  200
        }
        a(a)  //呼叫函式
        a = 10;  //變數
        b = 20;//變數
        console.log(a)//10
        console,log(b)//20

在執行函式的時候，函式內部有用到b,并且被重新賦值，b由undefined變成200，改變全域變數的值，在后面的同步代碼中b又被重新賦值，所以最終列印b的值為20，

陣列的參考地址
下面的代碼在瀏覽器運行

	var arr = [3, 4]; 
console.log(arr); 
arr.push(5);
 	console.log(arr);

運行結果為：

點開看到第二行列印，里面還有5

實際第二行代碼列印的就是[3,4],但是由于陣列是參考資料型別(復雜資料型別)，記憶體地址是一樣的，顯示的是原來的結果，但包含修改后的結果.(淺拷貝，拷貝堆疊里面的指標)

第一次列印的時候，記憶體地址還沒有變，第二次列印的時候已經發生了變化，點開第一次列印，所指向的記憶體地址已經發生了變化，進而陣列項資料也發生了變化，
ie: 11 跟不上進度

		var arr = [3, 4]; 
        let brr=arr;
        brr.push(5)
        console.log(arr); 3 4 5 

4.Vue組件傳值 父子 子父 非父子

1.父子

 //父   引入子組件  注冊 使用 系結屬性 系結方法
        <v-child :abc="a" @zjq="num"></v-child>
//子     props接受  在views使用  {{}}
        props: ["abc"],
        我是父組件傳過來的 {{abc}}

2.子父

 // 父
          <v-child :abc="a" @zjq="num"></v-child>
//子
          <button @click="CHILDRENfun">我是子組件的按鈕</button>
         CHILDRENfun(){
           this.$emit('zjq','我是子組件來的資料')
       }
//父
     num(item) {
       console.log("我是父組件的方法，num", item);
     }

3.1非父子

```javascript
 // main.js檔案
 import Vue from 'vue'
        import App from './App'
        import router from './router'
        Vue.config.productionTip = false
        Vue.prototype.$eventsBus = new Vue()
        new Vue({
            el: '#app',
            router,
            components: { App },
            template: '<App/>'
        })
//1  觸發方法
/ <button @click="getBroFun">children按鈕</button>
 getBroFun(){
     this.$eventsBus.$emit('zzz',123)
},
//2監聽方法
  this.$eventsBus.$on('zzz',(num)=>{
         console.log(num)
       })

3.2 下載events模塊
Events.js

const EventEmitter = require('events')
const ee =new EventEmitter()
export default {ee}

Main.js

import events from './assets/js/events'
Vue.prototype.$events = events.ee

 //1  觸發方法
getBroFun() {
      this.$events.emit("asd", 123);
},
//2監聽方法
 this.$events.on("asd", num => {
      console.log(num);
      this.num = num;
    });

5.Vue資料雙向系結原理

點擊鏈接直通車 == > 大佬詳細介紹Vue原理
new Vue() ==> Observer資料劫持 ==> 系結Dep ==> 通知watcher ==> 更新視圖
new Vue() ==> Compile決議模板指令 ==> 初始化視圖 和 系結watcher

Observer ：資料監聽器，能夠對資料物件的所有屬性進行監聽，如有變動可拿到最新值并通知訂閱者，內部采用Object.defineProperty 的 getter 和 setter 來實作
Dep ：訂閱者收集器或者叫訊息訂閱器都可以，它在內部維護了一個陣列，用來收集訂閱者，當資料改變觸發 notify 函式，再呼叫訂閱者的 update 方法
Watcher ：訂閱者，它是連接 Observer 和 Compile 的橋梁，收到訊息訂閱器的通知，更新視圖
Compile ：指令決議器，它的作用對每個元素節點的指令進行掃描和決議，根據指令模板替換資料，以及系結相應的更新函式
Updater：視圖更新

阿里面試題

   function Foo() {
        getName = function () {
            console.log(1);
        };
        return this;
    }
    Foo.getName = function () {
        console.log(2);
    };
    Foo.prototype.getName = function () {
        console.log(3);
    };
    var getName = function () {
        console.log(4);
    };
    function getName() {
        console.log(5);
    }
    Foo.getName();
    getName();
    Foo().getName();
    getName();
    new Foo.getName();
    new Foo().getName();
    new new Foo().getName();