【JavaScript高级3】面试官会问的this指向、严格模式、闭包、递归、深浅拷贝
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞
前言
本章节是JS高级中非常重要的一章,例如this指向问题、严格模式、闭包、递归、深浅拷贝都是面试官经常问的知识点,小伙伴们一定要认真学习哦,如有疑问欢迎在评论区留言;
文章の目录
- 🏆 学习の目标
- 一、函数的定义和调用
-
- 1.1 函数的定义方式
- 1.2 函数的调用
- 二、this
-
- 2.1 函数内部的this指向
- 2.2 改变函数内部 this 指向
-
- 2.2.1 call 方法
- 2.2.2 apply 方法
- 2.2.3 blind 方法
- 2.2.4 call、apply、bind三者的异同
- 三、严格模式
-
- 3.1 什么是严格模式
- 3.2 开启严格模式
- 3.2 严格模式中的变化
- 四、高阶函数
- 五、闭包
-
- 5.1 变量的作用域复习
- 5.2 什么是闭包
- 5.3 闭包的作用
- 六、递归
-
- 6.1 什么是递归
- 6.2 利用递归求1~n的阶乘
- 6.3 利用递遍历数据
- 七、深、浅拷贝
-
- 7.1 浅拷贝
- 7.2 深拷贝
- 🥇 知识の总结
- 🥇 推荐の内容
🏆 学习の目标
1.说出函数的多种定义和调用方式
2. 说出和改变函数内部this指向
3. 说出严格模式特点
4. 能够把函数作为参数和返回值传递
5. 说出闭包的作用
6. 说出递归的两个条件
7. 说出浅拷贝和深拷贝的区别
一、函数的定义和调用
1.1 函数的定义方式
-
方式1 函数声明方式 function 关键字 (命名函数)
function fn(){}
-
方式2 函数表达式(匿名函数)
var fn = function(){}
-
方式3 new Function()
var f = new Function('a', 'b', 'console.log(a + b)');f(1, 2);var fn = new Function('参数1','参数2'..., '函数体')注意/*Function 里面参数都必须是字符串格式第三种方式执行效率低,也不方便书写,因此较少使用所有函数都是 Function 的实例(对象) 函数也属于对象*/
1.2 函数的调用
/* 1. 普通函数 */function fn() {console.log('人生的巅峰');} fn(); /* 2. 对象的方法 */var o = { sayHi: function() { console.log('人生的巅峰'); }}o.sayHi();/* 3. 构造函数*/function Star() {};new Star();/* 4. 绑定事件函数*/ btn.onclick = function() {}; // 点击了按钮就可以调用这个函数/* 5. 定时器函数*/setInterval(function() {}, 1000); 这个函数是定时器自动1秒钟调用一次/* 6. 立即执行函数(自调用函数)*/(function() {console.log('人生的巅峰');})();
二、this
2.1 函数内部的this指向
这些 this 的指向,是当我们调用函数的时候确定的。调用方式的不同决定了this 的指向不同;一般指向我们的调用者,以下是this指向的表格,大家一定要牢记!
2.2 改变函数内部 this 指向
2.2.1 call 方法
call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的 this 指向,应用场景: 经常做继承;在上一篇文章讲过call方法可以改变this指向,让子构造函数的继承父构造函数的属性和方法;
var o = {name: 'andy'} function fn(a, b) { console.log(this); console.log(a+b)};fn(1,2)// 此时的this指向的是window 运行结果为3fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3
以上代码运行结果为:
2.2.2 apply 方法
apply() 方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的 this 指向。应用场景: 经常跟数组有关系:
var o = {name: 'andy'} function fn(a, b) { console.log(this); console.log(a+b)};fn()// 此时的this指向的是window 运行结果为3fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3
2.2.3 blind 方法
bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是原函数改变this之后产生的新函数,如果只是想改变 this 指向,并且不想调用这个函数的时候,可以使用bind应用场景:不调用函数,但是还想改变this指向:
var o = { name: 'andy' };function fn(a, b) {console.log(this);console.log(a + b);};var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数f();//调用新函数 this指向的是对象o 参数使用逗号隔开
2.2.4 call、apply、bind三者的异同
-
共同点 : 都可以改变this指向
-
不同点:
- call 和 apply 会调用函数, 并且改变函数内部this指向.
- call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
- bind 不会调用函数, 可以改变函数内部this指向.
-
应用场景
- call 经常做继承.
- apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
- bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
三、严格模式
3.1 什么是严格模式
JavaScript 除了提供正常模式外,还提供了严格模式(strict mode)。ES5 的严格模式是采用具有限制性 JavaScript变体的一种方式,即在严格的条件下运行 JS 代码。严格模式在 IE10 以上版本的浏览器中才会被支持,旧版本浏览器中会被忽略。
严格模式对正常的 JavaScript 语义做了一些更改:
1.消除了 Javascript 语法的一些不合理、不严谨之处,减少了一些怪异行为。
2.消除代码运行的一些不安全之处,保证代码运行的安全。
3.提高编译器效率,增加运行速度。
4.禁用了在 ECMAScript 的未来版本中可能会定义的一些语法,为未来新版本的 Javascript 做好铺垫。比如一些保留字如:class,enum,export, extends, import, super 不能做变量名;
3.2 开启严格模式
严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为为脚本开启严格模式和为函数开启严格模式两种情况。
-
情况一 :为脚本开启严格模式
-
有的 script 脚本是严格模式,有的 script 脚本是正常模式,这样不利于文件合并,所以可以将整个脚本文件放在一个立即执行的匿名函数之中。这样独立创建一个作用域而不影响其他
script 脚本文件。(function (){ //在当前的这个自调用函数中有开启严格模式,当前函数之外还是普通模式 "use strict";var num = 10; function fn() {}})();//或者 <script> "use strict"; //当前script标签开启了严格模式</script><script> //当前script标签未开启严格模式</script>
-
-
情况二: 为函数开启严格模式
-
要给某个函数开启严格模式,需要把“use strict”; (或 ‘use strict’; ) 声明放在函数体所有语句之前。
function fn(){ "use strict"; return "123";} //当前fn函数开启了严格模式
-
3.2 严格模式中的变化
-
严格模式下变量规定:
-
严格模式下this指向变化:
-
严格模式下函数变化:
严格模式对 Javascript 的语法和行为,都做了一些改变。
'use strict'num = 10 console.log(num)//严格模式后使用未声明的变量--------------------------------------------------------------------------------var num2 = 1;delete num2;//严格模式不允许删除变量--------------------------------------------------------------------------------function fn() { console.log(this); // 严格模式下全局作用域中函数中的 this 是 undefined}fn(); ---------------------------------------------------------------------------------function Star() { this.sex = '男';}// Star();严格模式下,如果 构造函数不加new调用, this 指向的是undefined 如果给他赋值则 会报错.var ldh = new Star();console.log(ldh.sex);----------------------------------------------------------------------------------setTimeout(function() { console.log(this); //严格模式下,定时器 this 还是指向 window}, 2000);
严格模式更详细的说明
四、高阶函数
高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。
以上fn 就是一个高阶函数,函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。同理函数也可以作为返回值传递回来;
五、闭包
5.1 变量的作用域复习
变量根据作用域的不同分为两种:全局变量和局部变量。
- 函数内部可以使用全局变量。
- 函数外部不可以使用局部变量。
- 当函数执行完毕,本作用域内的局部变量会销毁。
5.2 什么是闭包
闭包(closure)指有权访问另一个函数作用域中变量的函数。简单理解就是 ,一个作用域可以访问另外一个函数内部的局部变量。
5.3 闭包的作用
作用:延伸变量的作用范围。
function fn() { var num = 10; function fun() {console.log(num); } return fun; }var f = fn();f();
六、递归
6.1 什么是递归
**递归:**如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。简单理解:函数内部自己调用自己, 这个函数就是递归函数
📣**注意:**递归函数的作用和循环效果一样,由于递归很容易发生“栈溢出”错误(stack overflow),所以必须要加退出条件return。❗❗❗
6.2 利用递归求1~n的阶乘
代码示例如下:
//利用递归函数求1~n的阶乘 1 * 2 * 3 * 4 * ..n function fn(n) { if (n == 1) { //结束条件return 1; } return n * fn(n - 1);gehwwwwwwdddddddddddddddddd- } console.log(fn(3));
6.3 利用递遍历数据
众所周知,前端会经常性的进行成后台请求数据,将数据渲染到页面上,所以对数据的处理十分重要,下面学习利用递归进行遍历数据;
代码示例如下:
// 我们想要做输入id号,就可以返回的数据对象 var data = [{ id: 1, name: '家电', goods: [{ id: 11, gname: '冰箱', goods: [{id: 111,gname: '海尔' }, {id: 112,gname: '美的' }, ] }, { id: 12, gname: '洗衣机' }] }, { id: 2, name: '服饰'}];//1.利用 forEach 去遍历里面的每一个对象 function getID(json, id) { var o = {}; json.forEach(function(item) { // console.log(item); // 2个数组元素 if (item.id == id) {// console.log(item);o = item;return o;// 2. 我们想要得里层的数据 11 12 可以利用递归函数// 里面应该有goods这个数组并且数组的长度不为 0 } else if (item.goods && item.goods.length > 0) {o = getID(item.goods, id); } }); return o;}
七、深、浅拷贝
7.1 浅拷贝
浅拷贝只是拷贝最外面一层, 更深层次对象级别的只拷贝引用(引用).
* es5: 可以使用for in来拷贝
* es6:Object.assign(targetObject, sourceObject) 第一个参数是目标对象,后面的参数都是源对象。
7.2 深拷贝
会完全拷贝,每一级别的数据,包括深层次的引用对象
🥇 知识の总结
本节讲解的this指向问题、严格模式、闭包、递归、高阶函数、深浅拷贝;都是非常重要的内容,面试过程中面试官会经常提问,所以小伙伴们一定要牢记这些知识点,并且结合实例进行应用,相信经过本篇文章的学习,小伙伴们会百尺竿头–更进一步;🥂
🥇 推荐の内容
🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞
JavaScript高级1
JavaScript高级2