前端框架之Vue.js

時間 2019-11-13

標籤前端框架 vue.js vue 欄目 JavaScript 简体版

原文原文鏈接

前言：

前端主流框架有Vue、react、angular，目前比較火由於Vue比較容易學習，運營起來比較快速；php

Vue是什麼呢？css

是一個基於MVVM架構的，前端框架；html

若是你以前已經習慣了用jQuery操做DOM，學習Vue.js時請先拋開手動操做DOM的思惟，由於Vue.js是數據驅動的，你無需手動操做DOM。前端

它經過一些特殊的HTML語法，將DOM和數據綁定起來。一旦你建立了綁定，DOM將和數據保持同步，每當變動了數據，DOM也會相應地更新。vue

固然了，在使用Vue.js時，你也能夠結合其餘庫一塊兒使用，好比jQuery。node

我的理解： HTML標籤顯示內容和Vue對象中的變量是一致的；react

1、簡單使用

步驟1 引入Vue.js文件linux

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>

View Code

步驟2 建立HTML標籤webpack

步驟3 實例化Vue對象，並傳參設置對象屬性；ios

參數介紹：

el屬性：該屬性的值必須爲 最外層HTML標籤的id名稱，這樣綁定以後就能夠在#app標籤中也能夠應用Vue對象的屬性和指令了；


data屬性:

在data中Vue中聲明變量（注意只有 data屬性中聲明的變量在Vue中才可使用）

步驟四、將Vue對象中聲明的變量渲染到HTML標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>  <!--一、 引入Vue.js 、-->
</head>
<body>
<div id="app">                       <!--二、建立HTML標籤-->
    <p>{{temp1}}</p>                       <!-- 六、把Vue中聲明的變量渲染到 HTMK標籤 -->
    <b>{{temp2}}</b>
</div>
</body>
<script>
    new Vue({                         // 三、實例化1個實例化 Vue對象
        el:'#app',  // 傳入1個爲el的屬性（注意：一、該屬性的值必須爲 最外層HTML標籤的 id名稱，這樣綁定以後就能夠在#app標籤中應用Vue的屬性和指令了）
        data:{                        // 五、傳入2個爲data的屬性，該屬性保存Vue的變量
            temp1:'Hello world !', //  六、在data中Vue中聲明變量（注意只有 data屬性中聲明的變量在Vue中才可使用）
            temp2:'Hel  lo girl !'
        }
    })
</script>
</html>

View Code

2、Vue指令介紹

除了經過{{變量名}}，把Vue對象聲明的變量渲染到HTML中以外，還能夠經過指令的方式對DOC元素（HTML標籤）賦值，或其餘操做；

一、v-html="variable" 渲染標籤變量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>

<body>
<div id="app">
    <div v-html="ele1"></div>   <!--渲染標籤變量 -->
    <b></b>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            ele1:'<a href="http://www.baidu.com">跳轉</a>'  
        }
    })
</script>
</html>

View Code

二、v-text='variable ' 渲染文本字符串變量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>

<body>
<div id="app">
    <div v-text="temp"></div>   <!--渲染文本字符串 -->
    <b></b>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            temp:'你好！'
        }
    })
</script>
</html>

View Code

三、v-show 顯示和隱藏（經過display來控制顯示與隱藏，真實標籤不會被刪除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
    <div v-show="ok">我是青年</div>  <!-- 根據布爾值 顯示或者隱藏渲染效果-->
    <div v-show="ok1">我是壞人</div>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            ok:true,
            ok1:false
        }
    })
</script>
</html>

View Code

四、v-if/else 經過判斷語句控制顯示與隱藏（和v-show的區別，標籤會被插入、刪除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{temp1?666:444 }}</p>   <!--Vue支持三元表達式的形式作變量渲染 -->
    <p v-if="yes">yes</p>     <!--Vue的變量渲染支持  if 和else判斷 -->
    <p v-else>flase</p>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            yes:true
        }
    } )
</script>
</html>

View Code

五、v-for 遍歷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in arr">
            下標：{{index}}   <!-- 遍歷Vue對象中聲明的變量，第2個值爲 item -->
            數值：{{item}}     <!-- 遍歷Vue對象中聲明的變量，第1個值爲 index -->
        </li>
    </ul>
    <ul>
        <li v-for="(value,key) in obj">
            {{value}}           <!--遍歷字典 第1個值爲 字典的值和 Python正好相反 -->
            {{key}}             <!--遍歷字典 第2個值爲 字典的鍵和 Python正好相反 -->
        </li>
    </ul>

    <ul>                    <!--Vue 遍歷嵌套類型數據 -->
        <li v-for="item in obj2">  <!-- 注意不要加括號（） -->
            {{item.name}}      <!--對象的name-->
            {{item.sex}}
            {{item.age}}
        </li>
    </ul>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            arr: [11, 22, 33, 44, 55, 66],
            obj: {name: '小三', sex: '女', age: 18},
            obj2: [{name: '小三', sex: '女', age: 18}, {name: '小四', sex: '女', age: 28}],
        }
    })
</script>
</html>

View Code

六、v-bind:標籤屬性=‘ 變量’ Vue動態操做標籤的屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <!---v-bind 操做標籤的屬性 -->
    <a v-bind:href='url' v-bind:class='cla' v-text="text" style="text-decoration: none"></a>
</div>
</body>
<script>
   vm= new Vue({
        el:'#app',
        data:{
            url:"http://www.baidu.com",
            cla:'person',
            text:'百度一下',
        }
    })
     setTimeout(function () {  //setTimeout  設置2秒鐘後修改  Vuel對象中的變量
        vm.url='http://www.le.com'  //若是修改了 Vuel對象中聲明的變量，頁面中的效果也會動態改變
        vm.text='樂視一下'
    },2000)
</script>
</html>

View Code

七、v-on:click="事件(args)="事件(args)"Vue爲標籤綁定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="點我有飯吃" v-on:click="showme(args)">   <!-- v-on:click綁定事件,支持傳入參數-->

    <input type="button" value="點我有飯吃" @click="showme(args)">   <!-- @:click綁定事件,也支持傳入參數-->
</div>
</body>
<script>

new Vue({
    el:'#app',
    data:{
        args:'不吃'
    },
    methods:{showme:function (a) {
        alert(a)
    } }
})
</script>
</html>

View Code

八、v-model數據雙向綁定（所見即所得）

咱們在前端頁面form 標籤就是爲了向後臺提交數據，有了v-model 不再用尋找到input標籤再去獲取val值了，

若是咱們接收到了後臺的數據，賦值給Vue變量，頁面標籤顯示的內容也更新了，這就是v-model雙向綁定的優點所在；

把視圖（HTML標籤顯示內容）和model數據（Vue中聲明的變量）進行雙向綁定，經過視圖能夠改變數據，經過數據也能夠改變視圖；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="myapp">
    <input type="text" v-model="showtemp">
    <p>{{showtemp}}</p>
    <p>{{showtemp}}</p>
    <input type="button" v-on:click="showme" value="點擊我">  <!--顯示層數據和model層數據一致，輸入的內容改變變量自動改變；-->

    <select v-model="sel">                        <!--select選中那個option，sel變量被賦值爲那個option的value  -->
        <option value="1" selected>111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
</div>
</body>
<script>
    new Vue({
        el:'#myapp',
        data:{
            showtemp:'', // model層數據和顯示層數據一致，input標籤輸入的內容改變 showtemp變量內容改變；
            sel:'1'
        },
        methods:{showme:function () {
            alert(this.sel)
        }}
    })
</script>
</html>

<!--MVVM框架的優點 -->
 <!--Vue中很大的一個特性，數據的雙向綁定
  優點1：咱們在前端頁面form 標籤就是爲了向後臺提交數據，有了v-model 不再用尋找到input標籤再去獲取val值了
  優點2：若是咱們把後臺的數據，賦值給Vue變量，頁面標籤顯示的內容也更新了，v-model雙向綁定的優點！   -->

View Code

九、Vue三元表達式的形式作變量渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <p>{{temp1?666:444 }}</p>   <!--Vue支持三元表達式的形式作變量渲染 -->
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            temp1:true
        }
    } )
</script>
</html>

View Code

十、修改Vue data屬性中的變量（頁面效果動態改變）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{temp1}}</p>
        <b>{{temp2}}</b>
    </div>
</body>
<script>
    vm=new Vue({
        el:'#app',
        data:{
            temp1:'大大大大',
            temp2:'小小小小' ,
        }


    })
    setTimeout(function () {  //setTimeout  設置2秒鐘後修改  Vuel對象中的變量
        vm.temp1='小小小小'  //若是修改了 Vuel對象中聲明的變量，頁面中的效果也會動態改變
        vm.temp2='大大大大'
    },2000)
</script>
</html>

View Code

十一、Vue中變量支持數值運算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
    <p>{{temp1}}</p>
    <p>{{temp1}}</p>
    <p v-text='temp0+temp1'></p>  <!--Vue支持數字運算 -->
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            temp0:100,
            temp1:1
        }
    })
</script>
</html>

View Code

十二、 mounted（存放全部html加載完畢以後，當即自動執行的事件）

mounted:function () {    // mounted自動加載showme 函數
    this.showme()
  },

View Code

1三、methods（存放事件觸發後執行的函數）

  methods: {
    showme: function () {
      var url = "./static/hotcity.json";
      var self = this;
      axios.get(url).then(function(respose){
          self.arr = respose.data.data.hotCity;

      })
    }
  }

View Code

3、Vue先後端數據交互（Axios）

不管使用什麼前端框架和後端進行交換是不可避免的，例如jQuery使用ajax，Vue也有和後端交換的方法Axios；

一、 axios.get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="點我" v-on:click="showlist">
    <ul>
        <li v-for="item in lists">
            {{item.cityCode}}
            {{item.cityName}}
        </li>
    </ul>

</div>
</body>
<script>

new Vue({
    el:'#app',
    data:{
        lists:[]
    },
    methods:{showlist:function () {
        url='./hotcity.json';
        var self = this;                      // 因爲Vue對象，是類實例化的，因此this是局部對象不是windows對象，賦值給self；
        axios.get(url)
    .then(function (res) {
        self.lists=res.data.data.hotCity     //self 如今是 showlist函數中的局部this;

    }).catch(function (error) {

})
    } }
})



</script>
</html>

View Code

axios.get(url,{params:{username:'zhanggen'} })帶參數的get請求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="axios.js"></script>
</head>
<body>
<div id="app">
    <input type="button" value="點我" v-on:click="showlist">
    <ul>
        <li v-for="item in lists">
            {{item.cityCode}}
            {{item.cityName}}
        </li>
    </ul>

</div>
</body>
<script>

new Vue({
    el:'#app',
    data:{
        lists:[]
    },
    methods:{showlist:function () {
        url='./hotcity.json';
        var self = this;                   // 把new建立的Vue對象this， 賦值給self變量，在回調函數中才能經過sel變量獲取 Vue對象中聲明的變量；
        axios.get(url,{params:{username:'劉德華'}  })    //params:{}指get請求攜帶的參數
    .then(function (res) {
        self.lists=res.data.data.hotCity                   //self 如今是 showlist函數中的局部this;

    }).catch(function (error) {

})
    } }
})



</script>
</html>

View Code

二、 axios.post()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="axios.js"></script>
    <script src="vue.js"></script>
</head>
<body>
<div id="myapp">
    <p>姓名：<input type="text" v-model="username"></p>
    <p>密碼：<input type="password" v-model="pwd"></p>
    <p><input type="button" value="登陸" v-on:click="login" ></p>
</div>
</body>
<script>
   a= new Vue({
        el: '#myapp',
        data: {
            username: '',
            pwd: ''
        },
        methods: {
            login: function () {
                var url='http://127.0.0.1:8000/api/'
                 axios.post(url,
                    {
                        name: this.username,
                        password: this.pwd
                    },
                    {
                        'headers':{'Content-Type': 'application/x-www-form-urlencoded'}
                    }).then(function (res) {
                                alert(res)
                }).catch(function (error) {

                })

            }
        }
    })


</script>
</html>

View Code

Django後端接收

from django.shortcuts import render,HttpResponse
import json
def api1(request):
        print(request.method)
        if request.method=='POST':
            obj = HttpResponse('ok')
            obj['Access-Control-Allow-Origin'] = "*"
            print(request.POST)
        return obj

View Code

4、Vue的運行平臺 node.js

一、node.js介紹

Node.js 能夠用JavaScript寫一個服務端的服務器，是一個基於 Chrome V8 引擎的 JavaScript 後端運行環境，Vue框架也是基於Node.js運行的；

Node.js 的包管理器 npm（相似於linux的yum），是全球最大的開源庫生態系統。

相似於：

Python能夠用Django建立服務端給別人提供數據、php能夠在Apache建立服務端、Java可使用Tomcat構建服務端同樣；

官網：http://nodejs.cn/

Node.js的應用場景：

因爲Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，適用於開發聊天工具、電子商務等高併發app;

銀角補充：websock 是http協議的弟弟，都是基於TCP協議，不一樣於http協議的是websock使用的長鏈接，而且鏈接須要通過握手+驗證；若是想要裝逼（Magic strings）

二、安裝node.js平臺並建立Vue項目

2.1 登陸官網：

http://nodejs.cn/download/

2.2 選擇適配操做系統：

2.3 檢查是否安裝成功：node -v

2.4 經過腳手架建立Vue項目

全局安裝腳手架：npm install vue-cli -g

建立基於webpack模板的項目： D: vue init webpack myproject

進入項目安裝依賴包：cd myproject npm install （該環節會比較慢）

2.5 啓動項目：npm run dev 或 npm start ( 以上環節可能會報錯，以項目啓動成功爲最終目的)

4、基於node.js平臺開發Vue項目

Vue很是火的緣由是能夠快速開發單頁面應用( 1個網站只有1個頁面，經過點擊這個頁面的菜單加載 1個組件)

項目目錄結構介紹

一、node_models目錄

存放npm下載的插件

二、src目錄

assets目錄

　　存放靜態圖片

components目錄

　　存放網頁組件，在此目錄下建立新組件

router目錄

　　index.js （爲組件設置訪問路徑）

app.vue （根組件全部組件的入口）

　　全部組件的根組件，爲全部組件設置路由和組件關係，把全部組件整合渲染到首頁；

main.js

　　核心文件，和項目最外層index.html默認首頁是組合關係，爲默認首頁建立Vue對象（只能建立1個Vue對象）；

四、index.html

項目最外層index.html做爲1個div標籤，把根組件和全部組件中全部內容放在index裏面；

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myproject</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

View Code

五、package.json

批量安裝插件

小結：

基於node.js使用Vue建立單頁面應用思路：

一、在components目錄下建立組件（.vue結尾的文件）

<template>
<div>
  劉娟
</div>
</template>

<!--
export default： 對外開放1個接口，在組件中export 導出了，才能在router目錄的index.js文件裏 導入！
  name        ： 組件名稱
  data ()     ：函數（對於組件來講 data 必須是函數）
  methods     ：寫其餘函數

 -->

<script>
export default {
  name: 'liujuan',
  data () {
    return {
      msg: '我相信你是好的朋友'
    }
  }
}
</script>


<style scoped>
</style>

View Code

二、在router目錄下的index.js中導入新組件，併爲組件設置訪問url生成路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 導入components目錄下的 zhanggen組件
import zhanggen from '@/components/zhanggen.vue'
// 爲新建立的組件設置URL
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'zhanggen',
      component: HelloWorld
    },
    {
      path: '/zhanggen/',
      name: 'SSD',
      component: zhanggen
    }
  ]
})

View Code

三、經過根組件把組件和連接展現到首頁（<router-link to="/">你</router-link>）

<!--App.vue是1個根組件，全部的組件都要經過根組件配置 路由和組件關係
 它包含三部分
    template（寫html代碼）
    script（寫js代碼）
    css（寫css代碼）  -->

<!-- <router-view/>用來創建 組件和之間的路由關係 -->

<template>
  <div id="app">
    歡迎來到老男孩
    <router-link to="/">你</router-link>
    <router-link to="/zhanggen/">好</router-link>
     <router-view/>
  </div>
</template>
                                     <!--javescript代碼 -->
<script>
export default {
  name: 'app'
}
</script>

                                     <!--css代碼 -->

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

View Code

經過package.json批量安裝插件

一、以管理員身份運行cmd cd 項目目錄 npm install axios(插件名稱)

二、展開node_modules目錄，查看安裝的插件名稱（插件源）

三、在package.json文件引入插件源中的插件名稱

四、使用

在src目錄下main.js中

import axios from 'axios'  // 導入第3方插件
Vue.use(axios)                // 使用插件

View Code

在組件裏引入

<script>
import axios from 'axios'
</script>

View Code

在組件裏使用

<script>
import axios from 'axios'   //引入安裝好的axios插件
</script>

<script>
import axios from 'axios'   //引入安裝好的axios插件
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '我相信你是好的朋友',
      arr:[],
    }
  },
  mounted: function () {    // mounted自動加載showme 函數
    this.showme()
  },
  methods: {
    showme: function () {
        var url = "./static/hotcity.json" ;
        var self = this ;
        axios.get(url).then(function(respose) {
          self.arr = respose.data.data.hotCity;

      })
    }
  }
}
</script>

View Code

<template>
<div>
  this is a div elements.
  <ul>
    <li v-for="item in arr">
      姓名：{{item.name }}
      年齡：{{item.age}}
      性別：{{item.sex}}
    </li>
  </ul>
  <div>
  <p>姓名：<input type="text" v-model="username"> </p>
  <p>年齡：<input type="text" v-model="age"> </p>
   <p>性別：<input type="text" v-model="sex"> </p>
  <input type="button" value="添加" v-on:click="add">
  </div>
</div>
</template>

<!--
export default： 對外開放1個接口
  name        ： 組件名稱
  data ()     ：函數（對於組件來講 data 必須是函數）
  methods     ：寫其餘函數

 -->

<script>
export default {
  name: 'zhenggen',
  data () {
    return {
      msg: '我相信你是好的朋友',
      arr: [],
      username:'',
      age:'',
      sex:''

    }
  },
  mounted: function () {
    this.showlist()
  },
  methods: {
    showlist(){   //定義函數 showlist(){}
       this.arr=[
         {name:"日天",age:"18",sex:'femele'},
          {name:"日地",age:"12",sex:'femele'},
          {name:"日空氣",age:"14",sex:'femele'},
       ]
    },
    add(){   //arr.push({}) 添加元素
      this.arr.push({name:this.username,age:this.age,sex:this.sex } )
    }
  }
}
</script>


<style scoped>
  ul li{
    list-style-type:none;
  }
</style>

View Code

5、知識總結

一、先後端分離：

通過對Vue的一些學習得知Vue能夠經過組件構建單頁面應用，而且能夠經過路由在當前頁作頁面的跳轉，還可使用axios插件（ajax）向後獲取和提交數據；

那麼Django後臺return的響應，不再須要響應redirect和模板渲染了，只須要提供1個API接口（url），給前端、APP 返回json數據便可（1個APi適配多中應用），

這種先後端搭配模式叫作先後端分離；

例如

前端代碼運行在node.js平臺上，域名 https://www.le.com；（讓客戶訪問）

前端啓動起來以後，向後端獲取數據 https://api.le.com；（給前端提供數據）

二、Vue項目

能夠把node.js中的Vue項目，分爲3層;

1層index.htmm包含全部組件的內容，src目錄下的main.js爲index.html實例化建立vue對象

2層根組件app.vue

<template>
  <div id="app">
    歡迎來到老男孩
    <router-link to="/">首頁</router-link>
    <router-link to="/zhanggen/">課程</router-link>
    <router-link to="/liujuan/">Luffy學位</router-link>
     <router-view/>
  </div>
</template>


註釋：
一、<router-link to="路由中的path">首頁</router-link>，最終會生成1個a標籤，用戶點擊那個a標籤；

二、用戶點擊哪一個a標籤，就在 <router-view/>中渲染哪一個組件；

3層router目錄下的index.js承上啓下爲各組件生成訪問路徑，讓根組件調用；

4層 components目錄下建立各個組件

三、Vue插件擴展

跟Python的pip 相似，若是在項目開發中須要使用其餘插件，使用npm去網絡上自動下載，下載成功後後存放在node_modeule站點包目錄下，使用import導入；

四、關於JavaScript的this關鍵字

1.初步認識

js 函數中的 this關鍵字代指Window全局對象，類中的 this關鍵字代指類的對象；

<script>
//一、js 函數中的 this代指Window全局對象
    function zhanggen() {
        alert(this)
    }
    zhanggen()

//二、js 類中的 this代指 類的對象
function Foo() {
        this.name='egon'
    }
obj= new Foo()
alert(obj.name)

</script>

View Code

二、進階認識

若是函數被對象.函數執行，那麼函數中的this代指該對象自己

若是在自執行函數中 this代指 window 對象;

this能夠被賦值，因爲this 被賦值爲 that,那麼即便在自執行函數中也是 userinfo對象

<script>
userinfo={
    name:'alex',
    age:18,
    show:function () {    //userinfo  是1個字典對象
//        alert(this.age)  //this是userinfo對象
        var that = this;
        (function () {
          console.log(this)  //window對象
          console.log(that)  // that 仍是userinfo對象
        })()
    }
}
userinfo.show()
//若是函數 被對象.函數執行，那麼函數中的this代指該對象自己
//若是在自執行函數中  this代指 window 對象;
//this能夠被賦值，因爲this 被賦值爲 that,那麼即便在自執行函數中也是 userinfo對象
</script>