Web前端工程师会遇到的JavaScript难点有哪些?

2019-08-26 投稿人 : www.auguryps.com 围观 : 1655 次

前锋广州我想昨天分享

对于那些从事网络前端的人来说,JavaScript并不陌生。相反,任何参与网络前端的人都无法规避这个话题。今天,我将与您分享JavaScript前端工程师将遇到的一些困难,并帮助您更好地处理工作中的问题。

image.php?url=0Muijbyy12

?1,立即执行功能

立即执行函数,立即调用函数表达式(IIFE),顾名思义,在创建函数时立即执行。它不绑定任何事件或等待任何异步操作:

(函数{

//代码

//.

});

函数{.}是一个匿名函数,它包含一对括号以将其转换为表达式,后跟一对括号来调用该函数。立即执行函数也可以理解为立即调用匿名函数。立即执行函数的最常见应用场景是将var变量的范围限制为您的函数,从而避免命名冲突。

2,闭包

对于闭包,当外部函数返回时,内部函数仍然可以访问外部函数的变量。

在代码中,外部函数f1仅执行一次,变量N设置为0,内部函数f2分配给变量结果。由于外部函数f1已经被执行,它的内部变量N应该在内存中被清除,但事实并非如此:每当我们调用result时,我们发现变量N总是在内存中并且正在累积。为什么?这是关闭的神奇之处!

3.使用闭包来定义私有变量

通常,JavaScript开发人员使用下划线作为私有变量的前缀。但事实上,仍然可以访问和修改这些变量,而不是真正的私有变量。此时,使用闭包来定义真正的私有变量:

在代码中,对象p的name属性是私有属性,不能使用p.name直接访问。

4,原型

每个JavaScript构造函数都有一个prototype属性,用于设置所有实例对象需要共享的属性和方法。无法枚举prototype属性。 JavaScript仅支持通过prototype属性继承属性和方法。

在代码中,x和y都是由构造函数Rectangle创建的对象实例,它通过原型继承getDimensions方法。

5.模块化

JavaScript不是模块化编程语言,至少在ES6登陆之前是这样。但是,对于复杂的Web应用程序,模块化编程是最基本的要求之一。此时,您可以使用立即执行功能来实现模块化,就像许多JS库(如jQuery和Fundebug)以这种方式实现一样。

所谓的模块化是根据需要控制模块中属性和方法的可访问性,即私有或公共。在代码中,模块是一个单独的模块,N是它的私有属性,print是它的私有方法,decription是它的公共属性,add是它的常用方法。

6.可变促销

JavaScript将所有变量和函数声明移动到其作用域的前面。这称为吊装。也就是说,无论您在何处声明变量和函数,解释器都会将它们移动到范围的顶部。所以我们可以先使用变量和函数,然后声明它们。

CONSOLE.LOG(Y); //输出undefined

Y=2; //初始化y

上面的代码等同于以下代码:

Var y; //声明y

CONSOLE.LOG(Y); //输出undefined

Y=2; //初始化y

为避免错误,开发人员应在每个范围的开头声明变量和函数。

7. Currying

Currying或Currying可以是一种变得更加灵活的功能。我们可以通过一次传递多个参数来调用它;我们也可以通过只传递一个参数的子集来调用它,让它返回一个函数来处理剩下的参数。

在代码中,我们可以一次传递两个1作为参数add(1)(1),或者我们可以在传递一个参数后获得add1和add10函数,这非常灵活。

8,申请,调用和绑定方法

JavaScript开发人员必须了解apply,call和bind方法之间的区别。它们的共同点是第一个参数是这个,它是函数所依赖的上下文。

在这三种方法中,call方法最简单,相当于调用具有指定值this的函数:

apply方法与call方法类似。两者之间的唯一区别是Apply方法使用数组来指定参数,并且需要为每个参数分别指定调用方法:

使用bind方法,可以将此值绑定到函数,然后将其作为新函数返回:

9、记忆化

memoization用于优化耗时的计算,方法是将结果缓存到内存中,这样对于相同的输入值,下次只需要在内存中读取结果。

在代码中,斐波那契(100)的第二个计算只需要直接在内存中读取结果。

10。函数重载

所谓的函数重载(方法重载)与函数名相同,但输入和输出不同。或者,为了允许函数具有各种不同的输入,根据输入返回不同的结果。直观地说,函数重载可以通过if…else或switch来实现,而这将使它单独存在。jquery之父JohnResig想出了一个非常聪明的(tai)方法,利用闭包。

实际上,people对象的find方法允许3个不同的输入返回: 0个参数,返回所有名称;1个参数,根据firstname查找名称并返回;2个参数,根据全名查找名称并返回。

困难在于people.find只能绑定一个函数,为什么它能处理3个不同的输入?不能同时绑定3个函数find0、find1和find2!这里的键是旧属性。

从调用addMethod函数的顺序开始,people.find最终绑定到find2函数。但是,绑定find2时,old是find1;类似地,当绑定bind1时,old是find0。 find0,find1和find2这三个函数由闭包链接。

根据addMethod的逻辑,当f.length与arguments.length不匹配时,它将调用old直到匹配。

简化书籍的版权归作者所有。如需任何形式的转载,请联系作者进行授权并注明出处。

收集报告投诉

对于那些从事网络前端的人来说,JavaScript并不陌生。相反,任何参与网络前端的人都无法规避这个话题。今天,我将与您分享JavaScript前端工程师将遇到的一些困难,并帮助您更好地处理工作中的问题。

image.php?url=0Muijbyy12

?1,立即执行功能

立即执行函数,立即调用函数表达式(IIFE),顾名思义,在创建函数时立即执行。它不绑定任何事件或等待任何异步操作:

(函数{

//代码

//.

});

函数{.}是一个匿名函数,它包含一对括号以将其转换为表达式,后跟一对括号来调用该函数。立即执行函数也可以理解为立即调用匿名函数。立即执行函数的最常见应用场景是将var变量的范围限制为您的函数,从而避免命名冲突。

2,闭包

对于闭包,当外部函数返回时,内部函数仍然可以访问外部函数的变量。

在代码中,外部函数f1仅执行一次,变量N设置为0,内部函数f2分配给变量结果。由于外部函数f1已经被执行,它的内部变量N应该在内存中被清除,但事实并非如此:每当我们调用result时,我们发现变量N总是在内存中并且正在累积。为什么?这是关闭的神奇之处!

3.使用闭包来定义私有变量

通常,JavaScript开发人员使用下划线作为私有变量的前缀。但事实上,仍然可以访问和修改这些变量,而不是真正的私有变量。此时,使用闭包来定义真正的私有变量:

在代码中,对象p的name属性是私有属性,不能使用p.name直接访问。

4,原型

每个JavaScript构造函数都有一个prototype属性,用于设置所有实例对象需要共享的属性和方法。无法枚举prototype属性。 JavaScript仅支持通过prototype属性继承属性和方法。

在代码中,x和y都是由构造函数Rectangle创建的对象实例,它通过原型继承getDimensions方法。

5.模块化

JavaScript不是模块化编程语言,至少在ES6登陆之前是这样。但是,对于复杂的Web应用程序,模块化编程是最基本的要求之一。此时,您可以使用立即执行功能来实现模块化,就像许多JS库(如jQuery和Fundebug)以这种方式实现一样。

所谓的模块化是根据需要控制模块中属性和方法的可访问性,即私有或公共。在代码中,模块是一个单独的模块,N是它的私有属性,print是它的私有方法,decription是它的公共属性,add是它的常用方法。

6.可变促销

JavaScript将所有变量和函数声明移动到其作用域的前面。这称为吊装。也就是说,无论您在何处声明变量和函数,解释器都会将它们移动到范围的顶部。所以我们可以先使用变量和函数,然后声明它们。

CONSOLE.LOG(Y); //输出undefined

Y=2; //初始化y

上面的代码等同于以下代码:

Var y; //声明y

CONSOLE.LOG(Y); //输出undefined

Y=2; //初始化y

为避免错误,开发人员应在每个范围的开头声明变量和函数。

7. Currying

Currying或Currying可以是一种变得更加灵活的功能。我们可以通过一次传递多个参数来调用它;我们也可以通过只传递一个参数的子集来调用它,让它返回一个函数来处理剩下的参数。

在代码中,我们可以一次传递两个1作为参数add(1)(1),或者我们可以在传递一个参数后获得add1和add10函数,这非常灵活。

8,申请,调用和绑定方法

JavaScript开发人员必须了解apply,call和bind方法之间的区别。它们的共同点是第一个参数是这个,它是函数所依赖的上下文。

在三者中,call方法最简单,它相当于调用具有指定值的函数:

apply方法类似于call方法。两者之间的唯一区别是apply方法使用数组来指定参数,并且需要为每个参数单独指定调用方法:

使用bind方法,可以将this值绑定到函数,然后将其作为新函数返回:

9,记忆

Memoization用于通过将结果缓存到内存中来优化耗时的计算,以便对于相同的输入值,下次只需要在内存中读取结果。

在代码中,fibonacci(100)的第二次计算只需要直接在内存中读取结果。

10.函数重载

所谓的函数重载(方法重载)与函数名称相同,但输入和输出不相同。或者,为了允许函数具有各种不同的输入,根据输入,返回不同的结果。直观地说,函数重载可以通过if . else或switch来实现,这样就不用了。 jQuery的父亲John Resig提出了一种利用闭包的非常聪明的(tai)方法。

实际上,people对象的find方法允许3个不同的输入返回: 0参数,返回所有名称; 1参数,根据firstName查找名称并返回; 2参数,根据全名查找名称并返回。

困难在于people.find只能绑定一个函数,那为什么它可以处理3个不同的输入呢?不可能同时绑定3个函数find0,find1和find2!这里的关键是旧属性。

从调用addMethod函数的顺序开始,people.find最终绑定到find2函数。但是,绑定find2时,old是find1;类似地,当绑定bind1时,old是find0。 find0,find1和find2这三个函数由闭包链接。

根据addMethod的逻辑,当f.length与arguments.length不匹配时,它将调用old直到匹配。

简化书籍的版权归作者所有。如需任何形式的转载,请联系作者进行授权并注明出处。

日期归档