【JavaScript高级3】面试官会问的this指向、严格模式、闭包、递归、深浅拷贝

function fn(){}



```
  1. 方式2 函数表达式(匿名函数)

    
    var fn = function(){}
    
    
    
    
  2. 方式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 运行结果为3

fn.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 运行结果为3

fn.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指向.

  • 应用场景

    1. call 经常做继承.

    2. apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值

    3. 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 严格模式中的变化


  1. 严格模式下变量规定:

    CleanShot 2020-08-12 at 16.26.11@2x

  2. 严格模式下this指向变化:

    CleanShot 2020-08-12 at 16.27.08@2x

  3. 严格模式下函数变化:CleanShot 2020-08-12 at 16.28.02@2x

    严格模式对 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);  



严格模式更详细的说明

四、高阶函数

=====================================================================

高阶函数是对其他函数进行操作的函数,它接收函数作为参数或将函数作为返回值输出。

img2

以上fn 就是一个高阶函数,函数也是一种数据类型,同样可以作为参数,传递给另外一个参数使用。最典型的就是作为回调函数。同理函数也可以作为返回值传递回来;

五、闭包

===================================================================

5.1 变量的作用域复习


变量根据作用域的不同分为两种:全局变量和局部变量。

  1. 函数内部可以使用全局变量。

  2. 函数外部不可以使用局部变量。

  3. 当函数执行完毕,本作用域内的局部变量会销毁。

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号,就可以返回的数据对象


### 文末

js前端的重头戏,值得花大部分时间学习。

![JavaScript知识](https://img-blog.csdnimg.cn/img_convert/701f4db8e7fc0c3ff4d87017d6c846be.png)

推荐通过书籍学习,《 JavaScript 高级程序设计(第 4 版)》你值得拥有。整本书内容质量都很高,尤其是前十章语言基础部分,建议多读几遍。

![前端电子书](https://img-blog.csdnimg.cn/img_convert/6065b7d33c9a5859971490467a967767.png)



另外,大推一个网上教程 现代 JavaScript 教程 ,文章深入浅出,很容易理解,上面的内容几乎都是重点,而且充分发挥了网上教程的时效性和资料链接。



学习资料在精不在多,二者结合,定能构建你的 JavaScript 知识体系。

面试本质也是考试,面试题就起到很好的考纲作用。想要取得优秀的面试成绩,刷面试题是必须的,除非你样样精通。

**这是288页的前端面试题**

![288页面试题](https://img-blog.csdnimg.cn/img_convert/6a0ed19303290ef201081fc6148f21db.png)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值