从壹开始先后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字
缘起
书接上文《从壹开始先后端分离 [ 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的一些内容。