文實(shí)例講述了JavaScript函數(shù)的4種調(diào)用方法。分享給大家供大家參考，具體如下：

JavaScript 函數(shù)有 4 種調(diào)用方式：

1. 作為一個(gè)函數(shù)調(diào)用
2. 函數(shù)作為方法調(diào)用
3. 使用構(gòu)造函數(shù)調(diào)用函數(shù)
4. 作為函數(shù)方法調(diào)用函數(shù)

分述如下：

每種方式的不同方式在于 this 的初始化。

作為一個(gè)函數(shù)調(diào)用

function myFunction(a, b) {
 return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20

以上函數(shù)不屬于任何對(duì)象。但是在 JavaScript 中它始終是默認(rèn)的全局對(duì)象。

在 HTML 中默認(rèn)的全局對(duì)象是 HTML 頁面本身，所以函數(shù)是屬于 HTML 頁面。

在瀏覽器中的頁面對(duì)象是瀏覽器窗口(window 對(duì)象)。以上函數(shù)會(huì)自動(dòng)變?yōu)?window 對(duì)象的函數(shù)。

myFunction() 和 window.myFunction() 是一樣的：

function myFunction(a, b) {
 return a * b;
}
window.myFunction(10, 2); // window.myFunction(10, 2) 返回 20

當(dāng)函數(shù)沒有被自身的對(duì)象調(diào)用時(shí)， this 的值就會(huì)變成全局對(duì)象。

在 web 瀏覽器中全局對(duì)象是瀏覽器窗口（window 對(duì)象）。

該實(shí)例返回 this 的值是 window 對(duì)象:

function myFunction() {
 return this;
}
myFunction(); // 返回 window 對(duì)象

函數(shù)作為全局對(duì)象調(diào)用，會(huì)使 this 的值成為全局對(duì)象。

使用 window 對(duì)象作為一個(gè)變量容易造成程序崩潰。

函數(shù)作為方法調(diào)用

var myObject={
 firstName:"John",
 lastName: "Doe",
 fullName: function () {
 return this.firstName + " " + this.lastName;
 }
}
myObject.fullName(); // 返回 "John Doe"

fullName 方法是一個(gè)函數(shù)。函數(shù)屬于對(duì)象。 myObject 是函數(shù)的所有者。

this對(duì)象，擁有 JavaScript 代碼。實(shí)例中 this 的值為 myObject 對(duì)象。

測試以下！修改 fullName 方法并返回 this 值:

var myObject={
 firstName:"John",
 lastName: "Doe",
 fullName: function () {
 return this;
 }
}
myObject.fullName(); // 返回 [object Object] (所有者對(duì)象)

函數(shù)作為對(duì)象方法調(diào)用，會(huì)使得 this 的值成為對(duì)象本身。

使用構(gòu)造函數(shù)調(diào)用函數(shù)

如果函數(shù)調(diào)用前使用了 new 關(guān)鍵字, 則是調(diào)用了構(gòu)造函數(shù)。

這看起來就像創(chuàng)建了新的函數(shù)，但實(shí)際上 JavaScript 函數(shù)是重新創(chuàng)建的對(duì)象：

// 構(gòu)造函數(shù):
function myFunction(arg1, arg2) {
 this.firstName=arg1;
 this.lastName=arg2;
}
// This creates a new object
var x=new myFunction("John","Doe");
x.firstName; // 返回 "John"

構(gòu)造函數(shù)的調(diào)用會(huì)創(chuàng)建一個(gè)新的對(duì)象。新對(duì)象會(huì)繼承構(gòu)造函數(shù)的屬性和方法。

構(gòu)造函數(shù)中 this 關(guān)鍵字沒有任何的值。

this 的值在函數(shù)調(diào)用時(shí)實(shí)例化對(duì)象(new object)時(shí)創(chuàng)建。

作為函數(shù)方法調(diào)用函數(shù)

在 JavaScript 中, 函數(shù)是對(duì)象。JavaScript 函數(shù)有它的屬性和方法。

call() 和 apply() 是預(yù)定義的函數(shù)方法。 兩個(gè)方法可用于調(diào)用函數(shù)，兩個(gè)方法的第一個(gè)參數(shù)必須是對(duì)象本身。

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

兩個(gè)方法都使用了對(duì)象本身作為第一個(gè)參數(shù)。 兩者的區(qū)別在于第二個(gè)參數(shù)： apply傳入的是一個(gè)參數(shù)數(shù)組，也就是將多個(gè)參數(shù)組合成為一個(gè)數(shù)組傳入，而call則作為call的參數(shù)傳入（從第二個(gè)參數(shù)開始）。

在 JavaScript 嚴(yán)格模式(strict mode)下, 在調(diào)用函數(shù)時(shí)第一個(gè)參數(shù)會(huì)成為 this 的值， 即使該參數(shù)不是一個(gè)對(duì)象。

在 JavaScript 非嚴(yán)格模式(non-strict mode)下, 如果第一個(gè)參數(shù)的值是 null 或 undefined, 它將使用全局對(duì)象替代。

最后

以下是總結(jié)出來最全前端框架視頻，包含： javascript/vue/react/angualrde/express/koa/webpack 等學(xué)習(xí)資料。

【領(lǐng)取方式】

關(guān)注頭條 前端全棧架構(gòu)丶第一時(shí)間獲取最新前端資訊學(xué)習(xí)

手機(jī)用戶可私信關(guān)鍵詞 【前端】即可獲取全棧工程師路線和學(xué)習(xí)資料！

近接了個(gè)新項(xiàng)目，更新可能會(huì)慢點(diǎn)了。。。今天繼續(xù)Vue實(shí)戰(zhàn)開發(fā)系列

現(xiàn)在開始寫文章列表展示功能，這里我把篩選這塊進(jìn)行了子組件封裝，所以在進(jìn)行搜索時(shí)我們需要從父級(jí)獲取到文章的相關(guān)信息，如更新年月，文章類型及個(gè)人分類等等信息，當(dāng)點(diǎn)擊搜索時(shí)將搜索到的結(jié)果返回給父級(jí)列表展示，下面我模擬了些數(shù)據(jù)進(jìn)行操作。

什么是組件

在vue中， 可以根據(jù)項(xiàng)目需求將大部分相同操作的模塊定義成組件，通過組件我們可以減少代碼的編寫，提高代碼的復(fù)用率，而且組件之間也可以進(jìn)行數(shù)據(jù)通信，這樣就大大提升了項(xiàng)目效率。通常父組件的模板中包含子組件，父組件會(huì)正向的向子組件傳遞當(dāng)前所需的數(shù)據(jù)，子組件接受到數(shù)據(jù)后對(duì)數(shù)據(jù)進(jìn)行渲染和執(zhí)行操作。

父組件向子組件傳遞數(shù)據(jù)

定義子組件

首先我先來創(chuàng)建一個(gè)子組件，通過時(shí)間、文章類型、個(gè)人分類或者關(guān)鍵詞者用來篩選文章，這些數(shù)據(jù)需要重父級(jí)組件獲取，vue中我們可以通過props屬性來獲取父級(jí)的數(shù)據(jù)，在props中定義你需要的數(shù)據(jù)。

<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="請輸入標(biāo)題關(guān)鍵詞" v-model="keyword">
 </div>
 <button @click="search">搜索</button>
 </div>
</template>
<script>
export default {
 props:{
 yearList:{
 type:Array,
 default:[]
 },
 //...省略
 },
}
</script>
<style scoped>
//...省略
</style>

select選框提示定義

通常我們會(huì)在select中寫個(gè)默認(rèn)提示信息，如我這里默認(rèn)顯示了年、月等信息，這樣用戶體驗(yàn)更好，那么這個(gè)要怎么實(shí)現(xiàn)呢，select中沒有input中的placeholder屬性，所以這里我們需要來通過修改第一個(gè)option屬性來實(shí)現(xiàn)select提示功能（將值設(shè)置為空，樣式設(shè)置為隱藏）。

<select class="yearSelect">
 <option value="" style="display:none">年</option> //值為空，樣式為隱藏
 <option >不限</option>
 <option v-for="(year,id) in yearList" :key="id">{{year}}</option>
</select>

props數(shù)組傳遞

父組件向子組件傳遞數(shù)據(jù)的過程就是通過props來實(shí)現(xiàn)的，props的值可以是兩種，一種是數(shù)組，一種是對(duì)象。在傳遞Array類型數(shù)據(jù)時(shí)，我們需要注意的是如果子組件接受的數(shù)據(jù)是props定義的default時(shí)，我們會(huì)遇到錯(cuò)誤提示：

這時(shí)因?yàn)閜rops的 default 參數(shù)中，數(shù)組／對(duì)象的默認(rèn)值相當(dāng)于一個(gè)工廠函數(shù)返回，所以這里我們可以稍微的改動(dòng)下，用箭頭函數(shù)來定義default參數(shù)（這樣就不會(huì)報(bào)錯(cuò)了）：

 props:{
 yearList:{
 type:Array,
 default:()=>[],
 },
 //...省略
 },

在父組件中引入子組件

定義好了子組件，我們就需要將其引入到需要使用的父組件中去了，使用import引入組件然后在components聲明該組件，數(shù)據(jù)通過v-bind動(dòng)態(tài)綁定，: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
 }
},

子組件向父組件傳遞數(shù)據(jù)

子組件拋出數(shù)據(jù)

即然父組件可以想子組件傳遞數(shù)據(jù)，那么子組件當(dāng)然也應(yīng)該可以向父組件傳遞數(shù)據(jù)了，在子組件中向父組件傳值可以使用this.$emit("function",param); //其中function為父組件定義函數(shù)，param為需要傳遞參數(shù)。給搜索按鈕綁定點(diǎn)擊事件，點(diǎn)擊搜索按鈕，將子組件模擬的數(shù)據(jù)artical傳給父組件，然后在父組件展示。

<template>
 <div class="select">
 //...pass
 <button @click="search">搜索</button>
 </div>
</template>
<script>
export default {
 props:{
 //...pass
 },
 data(){
 return{ 
 keyword:'',
 artical:['Django實(shí)戰(zhàn)010：搭建圖片服務(wù)器詳解','Django實(shí)戰(zhàn)009：文件上傳實(shí)現(xiàn)過程詳解','Django實(shí)戰(zhàn)008：基于Token的驗(yàn)證使用','Django實(shí)戰(zhàn)007：Cookie搭配Session使用','Django實(shí)戰(zhàn)006：Cookie設(shè)置及跨域問題處理','Django實(shí)戰(zhàn)005:注冊加密及登陸驗(yàn)證問題','Django實(shí)戰(zhàn)004:跨域請求問題解決','Django實(shí)戰(zhàn)003:為什么使用Serializer序列化器','Django實(shí)戰(zhàn)002:配置參數(shù)設(shè)置','Django實(shí)戰(zhàn)001:開發(fā)環(huán)境搭建'],
 }
 },
 methods:{
 search(){
 this.$emit('articalList',this.artical)
 }
 }
}
</script>
<style scoped>
//...pass
</style>

父組件監(jiān)聽數(shù)據(jù)

這里我定義了一個(gè)articalList，回到父組件，我們通過v-on來監(jiān)聽articalList，簡寫成@articalList="getList"，getList為父組件定義的函數(shù)--用于接收子組件傳值并進(jìn)行相應(yīng)數(shù)據(jù)處理，你也可以直接定義articalList，方便后續(xù)查詢對(duì)應(yīng)。

#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
 }
 }

父子組件相互傳值總結(jié)

父組件向子組件傳值

1. 子組件在props中創(chuàng)建一個(gè)屬性，用來接收父組件傳過來的值
2. 父組件中注冊子組件
3. 在子組件標(biāo)簽中綁定子組件props中創(chuàng)建的屬性并將值賦給該屬性

子組件向父組件傳值

1. 子組件中通過事件觸發(fā)
2. 將需要傳的值通過$emit傳給響應(yīng)自定義事件的方法
3. 在子組件標(biāo)簽上綁定對(duì)自定義事件對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽

歡迎關(guān)注本人的公眾號(hào)：編程手札，文章也會(huì)在公眾號(hào)更新