深入学习JavaScript(1)

简介: 深入学习JavaScript(1)

this指向


1.函数在调用时,JavaScript会默认给this绑定一个值;

2.this的绑定和定义的位置(编写的位置)没有关系;

3.this的绑定和调用方式以及调用的位置有关系;

4.this是在运行时被绑定的;


默认绑定:微信图片_20221010170605.png

隐式绑定:


在调用位置中,是通过某个对象发起函数的调用

微信图片_20221010170648.png

new绑定:


JavaScript中的函数可以当做一个类的构造函数来使用,也就是使用new关键字.

微信图片_20221010170734.png

补充

微信图片_20221010170744.png

微信图片_20221010170827.png

显示绑定:微信图片_20221010170936.png

注意:JavaScript所有的函数都可以使用call和apply方法:

第一个传入参数都是相同的,要求传入一个对象,通过直接绑定了this的指向对象,称作显示绑定

微信图片_20221010171403.png

如果我们希望一个函数总是显示的绑定到一个对象上,可以使用bind方法。bind() 方法创建一个新的绑定函数。在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数,而其余参数将作为新函数的参数,供调用时使用微信图片_20221010171407.png

规则优先级


  • new绑定>bind绑定(new绑定和call、apply是不允许同时使用的,所以不存在谁的优先级更高;new绑定可以和bind一起使用,new绑定优先级更高)
  • new绑定>隐式绑定
  • 显示绑定>隐式绑定
  • 默认规则的优先级最低


箭头函数(arrow function):


箭头函数是ES6之后增加的一种编写函数的方法,并且它比函数表达式更要简洁


  • 箭头函数不会绑定this、arguments属性;(this引用就会从上层作用域中找到对应的this)
  • 箭头函数不能作为构造函数来使用(不能和new一起来使用,会抛出错误。箭头函数中没有原型);

注意:如果函数执行体只有返回一个对象, 那么需要给这个对象加上()


作用域和作用域链(Scope Chain)


  • 作用域链是一个对象列表,用于变量标识符的求值;
  • 当进入一个执行上下文时,这个作用域链被创建,并且根据代码类型,添加一系列的对象;
  • 微信图片_20221010171622.png

关于Map和Array.prototype.map()


关于Map


Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者[基本类型)都可以作为一个键或一个值。Object 和 Map 类似的是,它们都允许你按键存取一个值、删除键、检测一个键是否绑定了值。


Array.prototype.map()中的的map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。


闭包


  • 一个普通的函数function,如果它可以访问外层作用域的自由变量,那么这个函数和周围环境就是一个闭包;
  • 从广义的角度来说:JavaScript中的函数都是闭包;
  • 从狭义的角度来说:JavaScript中一个函数,如果访问了外层作用域的变量,那么它是一个闭包;


arguments对象(类数组对象)


事实上在函数有一个特别的对象:arguments对象


  • 默认情况下,arguments对象是所有(非箭头)函数中都可用的局部变量;
  • 该对象中存放着所有的调用者传入的参数,从0位置开始,依次存放;
  • arguments变量的类型是一个object类型( array-like ),不是一个数组,但是和数组的用法看起来很相似;
  • 如果调用者传入的参数多余函数接收的参数,可以通过arguments去获取所有的参数


Argument转Array


方式一:遍历arguments,添加到一个新数组中

微信图片_20221010171829.png


方式二:ES6中常用的两个方法:

微信图片_20221010171901.png注意:箭头函数是不绑定arguments的,所以我们在箭头函数中使用arguments会去上层作用域查找


函数的剩余(rest)参数


如果最后一个参数是 … 为前缀的,那么它会将剩余的参数放到该参数中,并且作为一个数组;


那么剩余参数和arguments有什么区别呢?


  • 剩余参数只包含那些没有对应形参的实参,而 arguments 对象包含了传给函数的所有实参;
  • arguments对象不是一个真正的数组,而rest参数是一个真正的数组,可以进行数组的所有操作;
  • arguments是早期的ECMAScript中为了方便去获取所有的参数提供的一个数据结构,而rest参数是ES6中提供并且希望以此 来替代arguments的;


相关文章
|
1月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
47 5
|
1月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
30 2
|
1月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
54 1
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
58 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
31 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
23 2
|
2月前
|
JavaScript
js学习--开屏弹窗
js学习--开屏弹窗
46 1
|
2月前
|
JavaScript
js学习--抽奖
js学习--抽奖
24 1
|
2月前
|
JavaScript
js学习--隔行换色
js学习--隔行换色
33 1
|
2月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
48 0