從壹開始先後端分離 [ Vue2.0+.NET Core2.1] 十五 ║Vue基礎：JS面向對象&字面量& this字

時間 2019-11-05

標籤開始後端分離 vue2.0+.net vue core2.1 core 十五基礎面向對象字面欄目 JavaScript 简体版

原文原文鏈接

緣起

書接上文《從壹開始先後端分離 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 計劃書 & 個人先後端開發簡史》，昨天我們說到了以個人經歷說明的web開發經歷的幾個階段，並且也說到了Vue系列須要講到的知識點，今天就正式開始Code，固然今天的代碼都特別簡單，但願你們慢慢的學習，今天主要講的是JS高級——關於面向對象的語法。javascript

磨刀不誤砍柴工，固然，我在寫這篇以前，或者是寫Vue以前，都在考慮要從何處入手，怎麼寫，由於你們確定有一部分是全棧工程師，都很懂，那我寫的您就能夠一目十行，不用看代碼，也有一部分仍是專一於後端，前端只是會一些Javascript，或者Jquery，進行一些Dom操做等，最後還有一部分小夥伴是CS模式開發的，咱們的QQ羣我就瞭解到一些，因此呢，我就去各個平臺看你們是如何講Vue，或者是講MVVM先後端分離的，嗯~~~，我也都能看懂，可是就是不想和他們同樣 [ 這樣會拉仇恨麼哈哈 ]，固然，不是說我寫的好，由於好多人都是文章直接一上來就Vue-cli搞起來，直接Hello World跑起來，而後就是搞一個TodoList，基本的就這麼過去了，感受既然是寫了，就要從基礎寫起，因此我就想到了先從JS面向對象講起，作個鋪墊，也給你們一個緩衝。你們放心，Vue-cli，Vue-router，Axios，Vuex等等，我們都有，還有hello world，哈哈哈哈！css

這個時候，必定會有好多小夥伴問，既然是Vue，爲何要說JS呢，請看我寫的簡單的代碼（這是Vue定義一個組件的語法）：html

不要怕看不懂，由於過一段時間就會了前端

<script>
  import myHeader from '../components/header.vue'
  import myFooter from '../components/footer.vue'
  export default {
    components: {myHeader, myFooter},
    data() {
      return {
        id: this.$route.params.id,
        dat: {},
        isShow: true
      }
    },
    created() {
      this.getData()
    },
    methods: {
      getData() {
        var that = this
        this.$api.get('Blog/Get/' + this.id, null, r => {
          r.data.bCreateTime = that.$utils.goodTime(r.data.bCreateTime)
          this.dat = r.data
          this.isShow = false
        })
      }
    },
    watch: {
      '$route'(to, from) {
        this.dat={}
        this.isShow = true
        this.id = to.params.id
        this.getData()
      }
    }
  }
</script>

零、今天要完成淺綠色的部分

1、JS和C#同樣，一切都是對象

一、關於JS函數對象方法的寫法，目前有兩種，不知道你們平時喜歡用哪一種，請看：vue

 　 //這種是直接函數聲明的方法
　　var id=9;
　　var brandid=1;

　　GetGoods();

　　GetDetail();

　　GetUsers();

    function GetGoods() {
        var tmplTrips = new StringBuilder();
        $('#DifCountry .cur').removeClass("cur");
      　　//...
    }
    function GetDetail() {
        var tmplTrips = new StringBuilder();
        $('#DifCountry .cur').removeClass("cur");
      　　//...
    }
    function GetUsers() {
        var tmplTrips = new StringBuilder();
        $('#DifCountry .cur').removeClass("cur");
      　　//...
    }

//這一種是對象的寫法
Object.defineProperties(a, {
  "property": {
    set property(newValue) {
      console.log("set property");
      return this._property = newValue;
    },
    get property() {
      console.log("getgsd property");
      return this._property;
    },
    enumerable: true,
    configurable: true
  },
  "name":{
    value: "maotr",
    writable: true,
    enumerable: true,
    configurable: true
  }
});

二、對象包含哪些元素java

　　包含屬性，方法，數據類型（字符串，數字，布爾，數組，對象），在C#中，隨隨便便就是寫出幾個對象，JS中也是如此。ios

2、定義對象的四種方式

一、經過new關鍵字git

格式：new Object()；es6

var obj=new Object();

obj.Name='blog';

obj.address='beijing';

二、嵌套字面量的方法，鍵值對的形式github

格式：objectName = {property1:value1, property2:value2,…, propertyN:valueN} 。property是對象的屬性

這個我使用的較多，只要是用來POST傳值的時候。

　　 var obj = {
            name: 'blog',
            address: 'beijing',
            say: function () {
                alert("hello world");
            }
        }

三、函數表達式，和函數聲明很相似

注意！函數表達式必須先定義，再使用，有上下順序之分；而函數聲明沒有。

//函數聲明（定義和使用沒有前後之分）
function obj(){
    alert('hi,我是函數聲明');
}

//函數表達式（必須先定義聲明，再使用）
var obj=function(){
　　 //other things...
    alert('hi,我是函數表達式方法')
}

四、構造函數聲明

        function Blog(title,font) {
            this.title = title,
            this.font = font,
            this.read = function () {
                    alert('Hi ,Blog');
                }
        }
        var blog1 = new Blog('JS學習', 100);
        alert(blog1.title);
        blog1.read();

整體來講，

構造函數，和普通函數都是平時用的較多的寫法

//構造函數
function Egperson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
var person = new Egperson('mike','18'); //this-->person
person.sayName();  //'mike'


//普通函數
function egPerson (name,age) {
    this.name = name;
    this.age = age;
    this.sayName = function () {
        alert(this.name);
     }
}
egPerson('alice','23'); //this-->window
window.sayName();  //'alice'

可是要注意，構造函數和普通函數的區別：

一、在命名規則上，構造函數通常是首字母大寫，普通函數則是遵守小駝峯式命名法

二、構造函數內部的this指向是新建立的person實例，而普通函數內部的this指向調用函數的對象（若是沒有對象調用，默認爲window）

三、構造函數內部會建立一個實例，調用普通函數時則不會建立新的對象

這個時候你必定會問了，看着兩種方法很類似呀？？？

這裏引用網友的說法：

　　我感受創造實例的緣由是由於new ,而不是由於他是「構造函數」，構造函數的名稱首字母大寫是約定。瀏覽器並不會由於函數的首字母是否大寫來判斷這個函數是否是構造函數。普通函數也經過New建立也依舊能夠打上構造函數的效果。若是不想用new,也能夠加一個return語句。
補充：構造函數返回都是對象。也能夠在構造函數中顯示調用return.若是return的值是一個對象，它會代替新建立的對象實例返回。若是返回的值是一個原始類型，它會被忽略，新建立的實例(對象)會被返回。

3、剪不斷理還亂的 this關鍵字

一、這裏有一個常見面試題，相信有不少人會亂：

function foo() {
    var f2 = new foo2();
    console.log(f2);    //{a: 3}
    console.log(this); //window
    return true;
}
function foo2() {
    console.log(this); //foo2類型的對象 不是foo2函數
    return { a: 3 };
}
var f1 = foo();
console.log(f1); // true

大概思路是這樣的；

一、f1調用foo()，而後foo()，又實例化對象foo2，因此，這個時候，f2就是一個foo2()的一個對象，被打印出來；

二、而後foo2()，返回值一個對象{a:3}，被賦值給了f2，被打印出來；

三、這個this，就是調用者，也就是window；

四、這個時候foo()的返回值 true，被賦值給f1，被打印出來；

二、深刻理解 js this關鍵字

栗子1：

 　　var name = 'blog.vue';

      function showName(){
        return this.name;
    }
    alert(showName()); //blog.vue

你們都知道是指向window全局對象的屬性（變量）name，由於調用showName()實際上就至關於window.showName(),因此this指向window對象。

這裏看着有些簡單，可是若是複雜點兒呢，因此這裏先引入三個概念：

       一、函數名是一個指向函數的指針。
       二、函數執行環境（this何時初始化）：當某個函數第一次被調用時，會建立一個執行環境，並使用this/arguments和其餘命名參數的值來初始化函數的活動對象。
       三、初始化指向誰：在Javascript中,this關鍵字永遠都指向函數(方法)的全部者。

栗子2

            var name = 'The window';
            var object = {
                name:'The object',
                getNameFunc:function(){
                    return object1.getNameFunc();
                }
            };
            var object1 = {
                name:'The object1',
                getNameFunc:function(){
                    return this.name;
                }
            };
            alert(object.getNameFunc());//The object1

說明：object1.getNameFunc()至關因而調用object1對象的getNameFunc方法，此時會初始化this關鍵字，而getNameFunc方法的全部者就是object1，this指向object1，因此調用object1.getNameFunc()返回的是object1的name屬性，也就是"The object1"。

三、總結

函數的幾種調用方式：

1.普通函數調用

2.做爲方法來調用

3.做爲構造函數來調用

4.使用apply、call方法來調用

5.Function.prototype.bind方法

6.es6箭頭函數

請記住一點：誰調用這個函數或方法,this關鍵字就指向誰。

若是你對this以及函數的嵌套字面量有必定的瞭解了，能夠看看下邊這個小Demo。

4、面向對象實例Demo

一、我簡單作了一個小Demo，你們能夠看看，固然也能夠本身動手試試，特別簡單的，就是鼠標滑過，顯示按鈕，彈窗。

這個代碼我已經到了Git上，地址是，之後每次的小Demo我都會放上去，以備不時之需，Git代碼在文末。

var obj = {
    data: {
        books: "",
        price: 0,
        bookObj: null
    },
    init: function () {
        this.bind();
        this.popup();
        this.show();

    },
    show: function () {
        $(".content-title").html("");
        $(".content-title").html(this.data.books);
        $(".content-price").html(this.data.price);
    },
    bind: function () {
        var that = this;
        $(".content .content-list ").hover(function () {
            $(this).find(".see").show();
        }, function () {
            $(this).find(".see").hide();
        });

        $(".see").click(function () {
            $(".bg,.popupbox").show();
            that.data.bookObj = $(this);
        });

        $(".btn3,.cancel").click(function () {
            $(".bg,.popupbox").hide();
        });

        $(".ok").click(function () {
            var bookItem = that.data.bookObj;
            var _parice = $(bookItem).data("price");
            var _book = $(bookItem).data("book");
            that.data.books += _book + ",";
            that.data.price += parseInt(_parice);
            that.show();
        });
    },
    popup: function () {
        var box = $(".popupbox");
        var _width = document.documentElement.clientWidth;
        var _height = document.documentElement.clientHeight;
        var $width = (_width - box.width()) / 2;
        var $height = (_height - box.height()) / 2;
        box.css({ "left": $width, "top": $height });
    },
    watch: {

    }
};

$(function () {
    obj.init();
});

這個栗子，就是咱們上文中的第二節的第2個方法——經過定義嵌套字面量的形式來寫的，只不過稍微複雜一丟丟（顏值很差，你們多擔待）。

這個時候，你再把這個代碼和上文的開篇的那個Vue寫法對比下：哦！是否是有點兒相近的意思了。嗯！若是你找到了其中的相似處，那恭喜，你已經基本入門啦！

二、單向數據傳輸

從上邊的代碼和動圖你應該能看到，目前這種開發都是單向數據的（是經過Data來控制Dom的展現的），那如何經過操做Dom來控制Data呢？誒~若是你能這麼想，那Vue已經事半功倍了。

其實MVVM的核心功能之一就是雙向數據傳輸。

5、結語

今天也是簡簡單單的說了一下，面向對象的一些知識，還有就是如何定義嵌套字面量，this到底如何歸屬的，講的稍微淺顯了一些，後期還須要大量內容豐富，若是你本身寫一遍，你應該已經掌握瞭如何定義一個對象方法了。這樣能夠爲之後學習Vue打下基礎。好啦今天的講解暫時到這裏辣~明天繼續JS高級的屬性獲取和ES6的一些內容。