整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文實例講述了JavaScript函數的4種調用方法。分享給大家供大家參考，具體如下：
JavaScript 函數有 4 種調用方式：
分述如下：
每種方式的不同方式在于 this 的初始化。
作為一個函數調用
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20
以上函數不屬于任何對象。但是在 JavaScript 中它始終是默認的全局對象。
在 HTML 中默認的全局對象是 HTML 頁面本身，所以函數是屬于 HTML 頁面。
在瀏覽器中的頁面對象是瀏覽器窗口(window 對象)。以上函數會自動變為 window 對象的函數。
myFunction() 和 window.myFunction() 是一樣的：
function myFunction(a, b) {
return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) 返回 20
當函數沒有被自身的對象調用時， this 的值就會變成全局對象。
在 web 瀏覽器中全局對象是瀏覽器窗口（window 對象）。
該實例返回 this 的值是 window 對象:
function myFunction() {
return this;
}
myFunction(); // 返回 window 對象
函數作為全局對象調用，會使 this 的值成為全局對象。
使用 window 對象作為一個變量容易造成程序崩潰。
函數作為方法調用
var myObject={
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
fullName 方法是一個函數。函數屬于對象。 myObject 是函數的所有者。
this對象，擁有 JavaScript 代碼。實例中 this 的值為 myObject 對象。
測試以下！修改 fullName 方法并返回 this 值:
var myObject={
firstName:"John",
lastName: "Doe",
fullName: function () {
return this;
}
}
myObject.fullName(); // 返回 [object Object] (所有者對象)
函數作為對象方法調用，會使得 this 的值成為對象本身。
使用構造函數調用函數
如果函數調用前使用了 new 關鍵字, 則是調用了構造函數。
這看起來就像創建了新的函數，但實際上 JavaScript 函數是重新創建的對象：
// 構造函數:
function myFunction(arg1, arg2) {
this.firstName=arg1;
this.lastName=arg2;
}
// This creates a new object
var x=new myFunction("John","Doe");
x.firstName; // 返回 "John"
構造函數的調用會創建一個新的對象。新對象會繼承構造函數的屬性和方法。
構造函數中 this 關鍵字沒有任何的值。
this 的值在函數調用時實例化對象(new object)時創建。
作為函數方法調用函數
在 JavaScript 中, 函數是對象。JavaScript 函數有它的屬性和方法。
call() 和 apply() 是預定義的函數方法。 兩個方法可用于調用函數，兩個方法的第一個參數必須是對象本身。
function myFunction(a, b) {
return a * b;
}
myObject=myFunction.call(myObject, 10, 2); // 返回 20
function myFunction(a, b) {
return a * b;
}
myArray=[10, 2];
myObject=myFunction.apply(myObject, myArray); // 返回 20
兩個方法都使用了對象本身作為第一個參數。 兩者的區別在于第二個參數： apply傳入的是一個參數數組，也就是將多個參數組合成為一個數組傳入，而call則作為call的參數傳入（從第二個參數開始）。
在 JavaScript 嚴格模式(strict mode)下, 在調用函數時第一個參數會成為 this 的值， 即使該參數不是一個對象。
在 JavaScript 非嚴格模式(non-strict mode)下, 如果第一個參數的值是 null 或 undefined, 它將使用全局對象替代。
以下是總結出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學習資料。
近接了個新項目，更新可能會慢點了。。。今天繼續Vue實戰開發系列
現在開始寫文章列表展示功能，這里我把篩選這塊進行了子組件封裝，所以在進行搜索時我們需要從父級獲取到文章的相關信息，如更新年月，文章類型及個人分類等等信息，當點擊搜索時將搜索到的結果返回給父級列表展示，下面我模擬了些數據進行操作。
在vue中， 可以根據項目需求將大部分相同操作的模塊定義成組件，通過組件我們可以減少代碼的編寫，提高代碼的復用率，而且組件之間也可以進行數據通信，這樣就大大提升了項目效率。通常父組件的模板中包含子組件，父組件會正向的向子組件傳遞當前所需的數據，子組件接受到數據后對數據進行渲染和執行操作。
定義子組件
首先我先來創建一個子組件，通過時間、文章類型、個人分類或者關鍵詞者用來篩選文章，這些數據需要重父級組件獲取，vue中我們可以通過props屬性來獲取父級的數據，在props中定義你需要的數據。
<template>
<div class="select">
<div class="condition">
<label>篩選：</label>
<select class="yearSelect">
<option >不限</option>
<option v-for="(year,id) in yearList" :key="id">{{year}}</option>
</select>
//...省略
<input type="text" placeholder="請輸入標題關鍵詞" v-model="keyword">
</div>
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
props:{
yearList:{
type:Array,
default:[]
},
//...省略
},
}
</script>
<style scoped>
//...省略
</style>
select選框提示定義
通常我們會在select中寫個默認提示信息，如我這里默認顯示了年、月等信息，這樣用戶體驗更好，那么這個要怎么實現呢，select中沒有input中的placeholder屬性，所以這里我們需要來通過修改第一個option屬性來實現select提示功能（將值設置為空，樣式設置為隱藏）。
<select class="yearSelect">
<option value="" style="display:none">年</option> //值為空，樣式為隱藏
<option >不限</option>
<option v-for="(year,id) in yearList" :key="id">{{year}}</option>
</select>
props數組傳遞
父組件向子組件傳遞數據的過程就是通過props來實現的，props的值可以是兩種，一種是數組，一種是對象。在傳遞Array類型數據時，我們需要注意的是如果子組件接受的數據是props定義的default時，我們會遇到錯誤提示：
這時因為props的 default 參數中，數組／對象的默認值相當于一個工廠函數返回，所以這里我們可以稍微的改動下，用箭頭函數來定義default參數（這樣就不會報錯了）：
props:{
yearList:{
type:Array,
default:()=>[],
},
//...省略
},
在父組件中引入子組件
定義好了子組件，我們就需要將其引入到需要使用的父組件中去了，使用import引入組件然后在components聲明該組件，數據通過v-bind動態綁定，:yearList="yearList"就是將父組件中的yearList賦給子組件中的yearList。
#template
<Select :yearList="yearList"></Select>
#JavaScript
import Select from '@/components/back/select'
components:{
Select,
},
data(){
return{
yearList:['2019','2018','2017','2016'],
//...pass
}
},
子組件拋出數據
即然父組件可以想子組件傳遞數據，那么子組件當然也應該可以向父組件傳遞數據了，在子組件中向父組件傳值可以使用this.$emit("function",param); //其中function為父組件定義函數，param為需要傳遞參數。給搜索按鈕綁定點擊事件，點擊搜索按鈕，將子組件模擬的數據artical傳給父組件，然后在父組件展示。
<template>
<div class="select">
//...pass
<button @click="search">搜索</button>
</div>
</template>
<script>
export default {
props:{
//...pass
},
data(){
return{
keyword:'',
artical:['Django實戰010：搭建圖片服務器詳解','Django實戰009：文件上傳實現過程詳解','Django實戰008：基于Token的驗證使用','Django實戰007：Cookie搭配Session使用','Django實戰006：Cookie設置及跨域問題處理','Django實戰005:注冊加密及登陸驗證問題','Django實戰004:跨域請求問題解決','Django實戰003:為什么使用Serializer序列化器','Django實戰002:配置參數設置','Django實戰001:開發環境搭建'],
}
},
methods:{
search(){
this.$emit('articalList',this.artical)
}
}
}
</script>
<style scoped>
//...pass
</style>
父組件監聽數據
這里我定義了一個articalList，回到父組件，我們通過v-on來監聽articalList，簡寫成@articalList="getList"，getList為父組件定義的函數--用于接收子組件傳值并進行相應數據處理，你也可以直接定義articalList，方便后續查詢對應。
#template
<Select :yearList="yearList" @articalList="getList" ></Select>
#JavaScript
import Select from '@/components/back/select'
data(){
return{
articalList:'',
}
},
components:{
Select,
},
methods:{
getList(data){
this.articalList=data
}
}
父組件向子組件傳值
子組件向父組件傳值
歡迎關注本人的公眾號：編程手札，文章也會在公眾號更新
ue 2 指令是特殊的 HTML 屬性，用于將數據綁定到 DOM 元素或執行其他操作。它們以 v- 前綴開頭，后面跟著指令名稱。
內置指令
Vue 2 提供了許多內置指令，用于執行常見任務，例如：
v-model： 將數據綁定到輸入元素的值
v-text： 將數據綁定到元素的文本內容
v-html： 將數據綁定到元素的 HTML 內容
v-if： 根據條件顯示或隱藏元素
v-for： 循環遍歷數組并渲染元素
v-on： 在元素上添加事件偵聽器
v-bind： 動態綁定元素屬性
v-class： 動態添加或刪除 CSS 類
自定義指令
您還可以創建自己的自定義指令以擴展 Vue 的功能。自定義指令由 JavaScript 對象組成，該對象定義指令的鉤子函數。
指令鉤子函數包括：
bind： 指令首次綁定到元素時調用
inserted： 指令綁定的元素插入 DOM 時調用
update： 指令綁定的元素或其屬性更新時調用
componentUpdated： 指令所在的組件更新時調用
unbind： 指令與元素解綁時調用
有關 Vue 2 指令的更多信息，請參閱以下資源：
Vue 2 指令文檔 [移除了無效網址]
創建自定義指令 [移除了無效網址]
以下是一些 Vue 2 指令的示例：
v-model 示例
HTML
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
