资讯专栏INFORMATION COLUMN

JavaScript函数

v1 / 2634人阅读

摘要:函数面试考点比较密集参考阮一峰函数我的博客关于作用域变量提升函数提升的个人理解笔记函数的五种声明方式具名函数声明一个变量七种数据类型声明一个函数是个特例不写自动加上关于返回会在传入的参数里首先调用方法但是当打印到控制台的时候没有写双引号是浏

JavaScript函数

面试考点比较密集
参考阮一峰JavaScript函数
我的博客:关于作用域,变量提升,函数提升的个人理解笔记

1.函数的五种声明方式 1.1 具名函数

var 声明一个变量,七种数据类型
function 声明一个函数,是个特例
不写return自动加上return undefined

</>复制代码

  1. function f(x,y){
  2. return x+y
  3. }
  4. f.name // "f"

1.1.1 关于console.log()

console.log()返回undefined

console.log()会在传入的参数里首先调用toString()方法

但是当打印到控制台的时候,没有写双引号,是chrome浏览器的原因

比如可以在重写console.log()

1.2 匿名函数

</>复制代码

  1. var f
  2. f = function(x,y){
  3. return x+y
  4. }
  5. f.name // "f"

如果要声明匿名函数,就一定要把它赋给一个变量

1.3var x = function y(){}

</>复制代码

  1. var f
  2. f = function f2(x,y){ return x+y }
  3. f.name // "f2"
  4. console.log(f2) // undefined

直接声明function y(){}var x = function y(){}的区别


然后刷新页面


直接报错,说y没有定义

区别:

第一种方式可以打印,第二种打印说不存在.
第一种整个外面的区域都可以访问y,第二种只有函数内部才可以访问到y.(可以访问的区域就是绿色圈起来的区域)

1.4 window.Function

</>复制代码

  1. window.Function
  2. var f = new Function("x","y","return x+y")
  3. f.name // "anonymous"

基本不会用

1.5 箭头函数

箭头函数都是匿名函数,没有名字,就像是匿名函数的简写形式

三种

</>复制代码

  1. 箭头函数
  2. var f = (x,y) => {
  3. return x+y
  4. }
  5. var sum = (x,y) => x+y//如果return只有一个,可以省略return和{}
  6. var n2 = n => n*n//如果参数只有一个,可以省略()

五种方式总结

2.函数的name属性

所有的函数都有一个name属性,他是一个字符串

</>复制代码

  1. 1具名函数
  2. function f(x,y){
  3. return x+y
  4. }
  5. f.name // "f"
  6. 2匿名函数
  7. var f
  8. f = function(x,y){
  9. return x+y
  10. }
  11. f.name // "f"
  12. 3具名函数赋值
  13. var f
  14. f = function f2(x,y){ return x+y }
  15. f.name // "f2"
  16. console.log(f2) // undefined
  17. 4window.Function
  18. var f = new Function("x","y","return x+y")
  19. f.name // "anonymous"
  20. 5箭头函数
  21. var f = (x,y) => {
  22. return x+y
  23. }
  24. f.name//"f"
3.函数的本质 3.1函数的调用

调用的英文单词call
函数在内存中为字符串

3.1.1函数在内存中:


即函数也是一个对象,广义上

3.1.2 eval()函数

给一个字符串.返回的为:字符串转化成代码然后执行."

3.1.3函数就是对象

模拟函数本质

函数是一个对象,里面有参数,函数体,调用方法
f是函数,是对象,f.call()是一个执行函数体的方法

总结

js中有七种数据类型,

</>复制代码

  1. number string boolean null undefined
  2. symbol **object**

前六种是简单类型,object是前6种的各种组合,所以是复杂类型
原型链

3.1.4函数的调用:f(1,2)f.call(undefined,1,2)

f(1,2)是简单用法
f.call(undefined,1,2)才是真实的用法


用call 便于理解this,是硬核技术
call用法:

参数从第二个开始

4.thisarguments

arguments是参数数组

4.1 this

特例:当call()的第一个参数是undefined的时候, thiswindow.

当启用严格模式的时候,call 里的第一个参数是什么,this 就是什么

this的作用先不说

4.2 arguments是参数组成的伪数组

伪数组:里面有0123这些次序,也有length,长得像数组,但是.伪数组的__proto__没有指向的是 Array.prototype,或者说原型链中没有Array.prototype,即原型链中没有和Array.prototype有关的 ,也就是说只是一个像数组的对象而已.

没有 push

5 call stack 调用栈

每进入一个函数,就在栈里记录一个记号,当调用完之后return的时候,就跳到做的记号哪里,弹出栈里的记号

调用演示:
普通调用
嵌套调用
递归调用

5.1 Stack Overflow错误

堆栈溢出

超出call stack调用栈

</>复制代码

  1. segment fault也是一种错误,c语言里面的
6. 作用域

什么情况下直接使用 a=1 会使a直接变成全局变量(window.a)?
当写a=1这个代码的时候,首先计算机会认为这是赋值,当发现当前作用域没有声明a的时候,就继续往上找,看看上一层的作用域有没有声明a,就这样,一直找到window层即全局作用域层,就直接给全局变量window自动声明一个a.
就近原则,哪一个scope离赋值最近,赋值的就是哪一个作用域
我的博客:关于作用域,变量提升,函数提升的个人理解笔记

这个f4里面的a只能是他自己本身的作用与和他的父作用域,跟f1里面的a没有关系

f4打印出来的a是1


所有的代码解析完毕,这时候i已经是6.
所以当点击的时候,已经是解析完毕后的i,点击的时候就是执行最开始绑定过的函数,点击相当于在最后写下执行函数的代码,这时候i已经是6了,所以打印出来的是6.for循环结束之后就是6.

</>复制代码

  1. liTags[i].onclick = function(){
  2. console.log(i)
  3. }//在这里只是声明函数,并没有调用,运行这段代码只会解析代码,不会运行函数
  4. //当点击事件发生的时候,就相当于调用这个函数,当调用的时候,已经被解析成6了点击速度不可能超过解析速度

同理,下面代码打印出的是6

闭包定义

题目



特例:当call()的第一个参数是undefined的时候, thiswindow.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95278.html

相关文章

  • JavaScript专题系列文章

    摘要:专题系列共计篇,主要研究日常开发中一些功能点的实现,比如防抖节流去重类型判断拷贝最值扁平柯里递归乱序排序等,特点是研究专题之函数组合专题系列第十六篇,讲解函数组合,并且使用柯里化和函数组合实现模式需求我们需要写一个函数,输入,返回。 JavaScript 专题之从零实现 jQuery 的 extend JavaScritp 专题系列第七篇,讲解如何从零实现一个 jQuery 的 ext...

    Maxiye 评论0 收藏0
  • JS程序

    摘要:设计模式是以面向对象编程为基础的,的面向对象编程和传统的的面向对象编程有些差别,这让我一开始接触的时候感到十分痛苦,但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程,否则只会让你自己更痛苦。 JavaScript 中的构造函数 学习总结。知识只有分享才有存在的意义。 是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

    melody_lql 评论0 收藏0
  • JavaScript深入浅出

    摘要:理解的函数基础要搞好深入浅出原型使用原型模型,虽然这经常被当作缺点提及,但是只要善于运用,其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法,包括,,。商业转载请联系作者获得授权,非商业转载请注明出处。 怎样使用 this 因为本人属于伪前端,因此文中只看懂了 8 成左右,希望能够给大家带来帮助....(据说是阿里的前端妹子写的) this 的值到底...

    blair 评论0 收藏0
  • 10分钟了解Javascript-天码营

    摘要:然后将构造函数的原型设为,便实现了对象继承。首先,我们定义一个构造函数,并在其中定义一个局部变量。这里的是局部变量,其作用域仍然存在是闭包现象,而非对象属性。 Javascript是动态的,弱类型的,解释执行的程序设计语言。 Javascript极其灵活,支持多种程序设计范式:面向对象、指令式、函数式。JavaSCript最初被用于浏览器脚本,现在已经是所有主流浏览器的默认脚本语言。浏...

    trigkit4 评论0 收藏0
  • 学习React之前你需要知道的的JavaScript基础知识

    摘要:和类在开始时遇到类组件,只是需要有关类的基础。毕竟,中的条件呈现仅再次显示大多数是而不是特定的任何内容。 在我的研讨会期间,更多的材料是关于JavaScript而不是React。其中大部分归结为JavaScript ES6以及功能和语法,但也包括三元运算符,语言中的简写版本,此对象,JavaScript内置函数(map,reduce,filter)或更常识性的概念,如:可组合性,可重用...

    bitkylin 评论0 收藏0

发表评论

0条评论

v1

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<