整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

JavaScript 函数调用

JavaScript 函数有 4 种调用方式。

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

this 关键字

一般而言,在Javascript中,this指向函数执行时的当前对象。

注意 this 是保留关键字,你不能修改 this 的值。

调用 JavaScript 函数

我们知道如何创建函数。

函数中的代码在函数被调用后执行。

作为一个函数调用

实例

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

这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯 全局变量,方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时, this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口(window 对象)。

该实例返回 this 的值是 window 对象:

实例

function myFunction() {

return this;

}

myFunction(); // 返回 window 对象

函数作为全局对象调用,会使 this 的值成为全局对象。使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstNamelastName), 及一个方法 (fullName):

实例

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;

}

// Thiscreates 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;

}

myFunction.call(myObject, 10, 2); // 返回 20

实例

function myFunction(a, b) {

return a * b;

}

myArray = [10,2];

myFunction.apply(myObject, myArray); // 返回 20

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

数的编写与使用

在程序设计语言中函数是一段具有特殊功能的代码,同时也是一组可以重复使用的代码。通过函数这一对象的使用,进一步提高了程序开发的模块化与高度多的代码复用性。各种程序设计语言都对函数的定义及使用有着严格的语法规则。本文主要介绍如何在JavaScript中定义函数、使用函数,并对递归函数这一特殊类型函数进行说明。


JavaScript函数基本语法

JavaScript中所定义的函数主要由函数定义关键字、函数名称、函数参数、执行代码段与函数返回值5部分所组成。同时要求函数在使用过程中需要先定义函数,再调用函数。JavaScript函数定义基本语法描述如下:

JavaScript函数定义基本语法

JavaScript函数定义基本语法描述如上图,说明如下:

函数定义语法说明


函数调用与形参&实参

函数定义完成之后,就可以通过调用该函数完成特定的功能。函数调用方式较为简单,只需要给出函数名称与所传递参数,如果参数为空,只需要给出名称后面的括号即可。关于参数部分需要注意形参与实参概念的区分。其中在函数定义中用于解释说明语言的参数为形参。在函数调用过程中替代形参参与实际运算的参数为实参。示例说明如下:

形参与实参示例说明


匿名函数

匿名函数(Anonymous function),顾名思义是指没有名字的函数,即在上面给出的基本语法中functionName部分可以省略的函数。在JavaScript中提供两类基本匿名函数定义方式,一种是将匿名函数封装为表达式,一种是将匿名函数赋值给变量形式。两类匿名函数基本语法描述如下:

匿名函数的定义形式

匿名函数定义形式描述如上图所示,上文中计算解决值函数我们可以使用两种方法改写为匿名函数,实现描述如下:

匿名函数使用实例


递归函数

递归函数是一类特殊的函数类型,简单理解即为在一个函数的内部调用了该函数自身。在使用递归函数是需要注意产生递归的条件与递归终止的条件。如同循环控制语句一样,没有递归终止的条件,程序将会一直占用资源,无法结束释放资源。递归函数的说明可以从阶乘的计算这一案例展开说明。阶乘计算过程描述如下:

阶乘计算原理

阶乘计算过程描述如上图所示,我们可知阶乘问题的解决主要在于递推关系的挖掘与终止条件的确定。本例中递推关系为N!=N*(N-1)!,终止条件为1!=1;在明确这两点之后我们可以编写递归函数实现问题求解。递归函数描述如下图:

阶乘问题的递归求解编程实现


经典递归问题举例

爬楼梯问题是使用递归算法进行问题求解的经典案例之一,爬楼梯问题主要只是假设有N阶楼梯,需要从最底层爬到最高层,在上楼过程中每步只允许上1层或者2层,计算爬到N层总共方法有多少种?

爬楼梯方法问题

爬楼梯方法问题采用递归思想还是比较简单的,我们可以从小人最后一步考虑。小人上到最高层N层时只能有两种方法:

①从N-2层跨越2层到达N层;

②从N-1层跨越1层到达N层;

则计算到达N层的方法f(n)就等于到达N-1层方法f(n-1)与达N-2层方法f(n-2)之和。这就找到了我们进行递推的关系式,终止条件即为f(1)=1和f(2)=2;

因此我们可以编程实现计算,实现代码如下:

爬楼梯递归求解代码


本头条号长期关注编程资讯分享;编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见,可以联系作者,共同探讨。更多程序设计相关教程及实例分享,期待大家关注与阅读!JavaScript基础教程系列教程链接如下:

JavaScript基础教程(六)流程控制之循环语句

JavaScript基础教程(五)流程控制之条件语句

avaScript是一种发展迅速的语言。这篇文章,我想展示一些有关如何在JavaScript中应用函数式编程的示例。

JavaScript中的函数式编程

即使函数式编程可以极大地改善应用程序的代码,但其原理在开始时可能会有些挑战。由于详细解释所有这些都将花费大量时间,因此我们决定使用两个实际的代码示例来介绍这些概念

1.Maybe Monad

在第一个示例中,我们找到一种避免验证变量是否为Null的方法。假设在我们的应用程序中,我们可以找到具有以下格式的用户:

const someUser = {
 name: 'some_name',
 email: 'some@email.com',
 settings: {
  language: 'sp'
 }
};

有一个功能,可以以用户设置的语言返回欢迎消息。

const allGreetings = {
 'en': '嗨',
 'sp': '你好',
 'fr': '欢迎你'
};
const getGreetingForUser = (user) => {
 //将要执行
}

来看一个遵循命令式模型的“ getGreetingForUser”函​​数的实现:

const getGreetingForUser = (user) => {
 if (!user) {
   return allGreetings.en;
 }
 if (user.settings && user.settings.language) {
   if (allGreetings[user.settings.language]) {
     return allGreetings[user.settings.language]
   } else {
     return allGreetings.en;
   }
 } else {
   return allGreetings.en;
 }
};
console.log(getGreetingForUser(someUser));

如上面所看到的,必须检查用户是否已经存在,是否已设置语言,以及是否已准备好欢迎消息。如果出现问题,我们将以默认语言返回一条消息。

现在,让我们看一下相同的函数,但是这次我们将在其实现中使用函数式编程:

const getGreetingForUser = (user) => {
  return RamdaFantasy.Maybe(user)
    .map(Ramda.path(['settings', 'language']))
    .chain(maybeGreeting);
};
const maybeGreeting = Ramda.curry((greetingsList, userLanguage) => {
  return RamdaFantasy.Maybe(greetingsList[userLanguage]);
})(allGreetings);
console.log(getGreetingForUser(someUser).getOrElse(allGreetings.en));

为了处理可能为null或未定义的情况,我们将使用Maybe Monad。这使我们可以在对象周围创建包装器,并为空对象分配默认行为。

让我们比较两种解决方案:

//代替验证用户是否为空
if (!user) {
  return allGreetings.en;
}
//我们将用:
RamdaFantasy.Maybe(user) //我们将用户添加到包装器中
//代替:
 if (user.settings && user.settings.language) {
   if (allGreetings[user.settings.language]) {
//我们将用:
 <userMaybe>.map(Ramda.path(['settings', 'language'])) //如果存在数据,映射将会用它
//不是在else中返回默认值:
 return indexURLs['en'];
.getOrElse(allGreetings。EN)
// 指定的默认值。

2 Either Monad

当我们知道存在空错误时的默认行为时,Maybe Monad非常有用。

但是,如果我们有一个引发错误的函数,或者我们将各种引发错误的函数链接在一起,并且我们想知道哪个发生了故障,则可以改用Either Monad。

现在,让我们假设我们要计算产品的价格,同时考虑增值税和可能的折扣。我们已经有了以下代码:


const withTaxes = (tax, price) => {
2
 if (!_.isNumber(price)) {
3
 return new Error("Price is not numeric");
4
 }
5
 return price + (tax * price);
6
};
7
const withDiscount = (dis, price) => { 
8
  if (!_.isNumber(price)) { 
9
    return new Error("Price is not numeric"); 
10
  } 
11
  if (price < 5) 
12
    return new Error("Discounts not available for low-priced items"); 
13
  } 
14
  return price - (price * dis);5
}; 
const isError = (e) => e && e.name === 'Error';
const calculatePrice(price, tax, discount) => { 
//将要执行
}

让我们来看一个遵循命令式模型的“ calculatePrice”函数的实现:

const calculatePrice = (price, tax, discount) => {
  const priceWithTaxes = withTaxes(tax, price);
  if (isError(priceWithTaxes)) {
    return console.log('Error: ' + priceWithTaxes.message);
  }
  const priceWithTaxesAndDiscount = withDiscount(discount, priceWithTaxes);
  if (isError(priceWithTaxesAndDiscount)) {
    return console.log('Error: ' + priceWithTaxesAndDiscount.message);
  }
  console.log('Total Price: ' + priceWithTaxesAndDiscount);
}
//我们计算出价值25的产品(含21%的增值税和10%的折扣)的最终价格。
 calculatePrice(25, 0.21, 0.10)

现在,让我们了解如何使用Either Monad重写此函数。

都有两个构造函数,Left和Right。我们要实现的是将异常存储到Left构造函数,并将正常结果(快乐路径)存储到Right构造函数。

首先,将更改已经存在的withTaxes和withDiscount函数,以便在出现错误时它们返回Left,在一切正常的情况下返回Right:

const withTaxes = Ramda.curry((tax, price) => {
  if (!_.isNumber(price)) {
    return RamdaFantasy.Either.Left(new Error("Price is not numeric"));
  }
  return RamdaFantasy.Either.Right(price + (tax * price)); 
});
const withDiscount = Ramda.curry((dis, price) => {
  if (!_.isNumber(price)) {
    return RamdaFantasy.Either.Left(new Error("Price is not numeric")); 
  }
  if (price < 5) { 
    return RamdaFantasy.Either.Left(new Error("Discounts not available for low-priced items")); 
  } 
  return RamdaFantasy.Either.Right(price - (price * dis)); 
});


然后,我们为Right案例创建一个函数(显示价格),为Left案例创建另一个函数(显示错误),然后使用它们创建Either Monad:

const showPrice = (total) => { console.log('Price: ' + total) }; 
const showError = (error) => { console.log('Error: ' + error.message); }; 
const eitherErrorOrPrice = RamdaFantasy.Either.either(showError, showPrice);

最后,只需要执行Monad来计算最终价格:

//计算出价值25的产品(含21%的增值税和10%的折扣)的最终价格。
 eitherErrorOrPrice(
   RamdaFantasy.Either.Right(25)
     .chain(withTaxes(0.21))
     .chain(withDiscount(0.1))
)

结论:JavaScript中的函数式编程

正如我们所看到的,一旦用Maybe和Either单子分解了代码,就没有那么复杂了。如果使用得当,它们可以使我们的代码更易于阅读和维护。

唯一的不便是我们需要克服的初始障碍,但这可以通过在网上一些示例并进行一些测试来完成。

喜欢可以关注一下哦。

半夜的一次斜眸,我发现了支付宝灰色产业的一角

得知开源会削弱对中国的技术封锁,特朗普气炸了

用漫画让你清楚了解linux内核,看懂了么?

你用大量 if else,而不用switch的原因,if真香啊

能在996公司久呆的人,到底有多会划水?