文实例讲述了JavaScript函数的4种调用方法。分享给大家供大家参考，具体如下：

JavaScript 函数有 4 种调用方式：

1. 作为一个函数调用
2. 函数作为方法调用
3. 使用构造函数调用函数
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
 }
 }

父子组件相互传值总结

父组件向子组件传值

1. 子组件在props中创建一个属性，用来接收父组件传过来的值
2. 父组件中注册子组件
3. 在子组件标签中绑定子组件props中创建的属性并将值赋给该属性

子组件向父组件传值

1. 子组件中通过事件触发
2. 将需要传的值通过$emit传给响应自定义事件的方法
3. 在子组件标签上绑定对自定义事件对数据进行监听

欢迎关注本人的公众号：编程手札，文章也会在公众号更新