JavaScript有什么用，JavaScript学习，JavaScript菜鸟教程 ...

没有立场的互喷

文末有合集，一定记得要收藏哦，后期慢慢学习。
一、深浅拷贝

• 首先浅拷贝和深拷贝只针对想Object,Array这样的复杂对象，简单来说，浅拷贝只复制一层对象的属性，二深拷贝则复制了所有的层级。
  
• 对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没   有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会 改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
  

const obj = {
uname: 'pink',
age: 18,
hobby: ['乒乓球', '足球'],
family: {
baby: '小pink'
      }
    }
// 把对象转换为 JSON 字符串
// console.log(JSON.stringify(obj))
const o = JSON.parse(JSON.stringify(obj))
console.log(o)
o.family.baby = '123'
console.log(obj)
二、异常处理

了解 JavaScript 中程序异常处理的方法，提升代码运行的健壮性。

2.1 throw

异常处理是指预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行。
<script>
  function counter(x, y) {
​
    if(!x || !y) {
      // throw '参数不能为空!';
      throw new Error('参数不能为空!')
    }
​
    return x + y
  }
​
  counter()
</script>总结：

• throw 抛出异常信息，程序也会终止执行
  
• throw 后面跟的是错误提示信息
  
• Error 对象配合 throw 使用，能够设置更详细的错误信息
  

2.2 try ... catch

<script>
   function foo() {
      try {
        // 查找 DOM 节点
        const p = document.querySelector('.p')
        p.style.color = 'red'
      } catch (error) {
        // try 代码段中执行有错误时，会执行 catch 代码段
        // 查看错误信息
        console.log(error.message)
        // 终止代码继续执行
        return
​
      }
      finally {
          alert('执行')
      }
      console.log('如果出现错误，我的语句不会执行')
    }
    foo()
</script>总结：

• try...catch 用于捕获错误信息
  
• 将预估可能发生错误的代码写在 try 代码段中
  
• 如果 try 代码段中出现错误后，会执行 catch 代码段，并截获到错误信息
  

三、this

了解函数中 this 在不同场景下的默认值，知道动态指定函数 this 值的方法。

1.1 默认值

this 是 JavaScript 最具“魅惑”的知识点，不同的应用场合 this 的取值可能会有意想不到的结果，在此我们对以往学习过的关于【 this 默认的取值】情况进行归纳和总结。
普通函数
普通函数的调用方式决定了 this 的值，即【谁调用 this 的值指向谁】，如下代码所示：
<script>
  // 普通函数
  function sayHi() {
    console.log(this)  
  }
  // 函数表达式
  const sayHello = function () {
    console.log(this)
  }
  // 函数的调用方式决定了 this 的值
  sayHi() // window
  window.sayHi()
   
​
// 普通对象
  const user = {
    name: '小明',
    walk: function () {
      console.log(this)
    }
  }
  // 动态为 user 添加方法
  user.sayHi = sayHi
  uesr.sayHello = sayHello
  // 函数调用方式，决定了 this 的值
  user.sayHi()
  user.sayHello()
</script>注： 普通函数没有明确调用者时 this 值为 window，严格模式下没有调用者时 this 的值为 undefined。
箭头函数
箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上箭头函数中并不存在 this ！箭头函数中访问的 this 不过是箭头函数所在作用域的 this 变量。
<script>
   
  console.log(this) // 此处为 window
  // 箭头函数
  const sayHi = function() {
    console.log(this) // 该箭头函数中的 this 为函数声明环境中 this 一致
  }
  // 普通对象
  const user = {
    name: '小明',
    // 该箭头函数中的 this 为函数声明环境中 this 一致
    walk: () => {
      console.log(this)
    },
   
    sleep: function () {
      let str = 'hello'
      console.log(this)
      let fn = () => {
        console.log(str)
        console.log(this) // 该箭头函数中的 this 与 sleep 中的 this 一致
      }
      // 调用箭头函数
      fn();
    }
  }
​
  // 动态添加方法
  user.sayHi = sayHi
  
  // 函数调用
  user.sayHi()
  user.sleep()
  user.walk()
</script>在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此DOM事件回调函数不推荐使用箭头函数，如下代码所示：
<script>
  // DOM 节点
  const btn = document.querySelector('.btn')
  // 箭头函数 此时 this 指向了 window
  btn.addEventListener('click', () => {
    console.log(this)
  })
  // 普通函数 此时 this 指向了 DOM 对象
  btn.addEventListener('click', function () {
    console.log(this)
  })
</script>同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数，如下代码所示：
<script>
  function Person() {
  }
  // 原型对像上添加了箭头函数
  Person.prototype.walk = () => {
    console.log('人都要走路...')
    console.log(this); // window
  }
  const p1 = new Person()
  p1.walk()
</script>this指向
以上归纳了普通函数和箭头函数中关于 this 默认值的情形，不仅如此 JavaScript 中还允许指定函数中 this 的指向，有 3 个方法可以动态指定普通函数中 this 的指向：
call
使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：
<script>
  // 普通函数
  function sayHi() {
    console.log(this);
  }
​
  let user = {
    name: '小明',
    age: 18
  }
​
  let student = {
    name: '小红',
    age: 16
  }
​
  // 调用函数并指定 this 的值
  sayHi.call(user); // this 值为 user
  sayHi.call(student); // this 值为 student
​
  // 求和函数
  function counter(x, y) {
    return x + y;
  }
​
  // 调用 counter 函数，并传入参数
  let result = counter.call(null, 5, 10);
  console.log(result);
</script>总结：

• call 方法能够在调用函数的同时指定 this 的值
  
• 使用 call 方法调用函数时，第1个参数为 this 指定的值
  
• call 方法的其余参数会依次自动传入函数做为函数的参数
  

apply
使用 call 方法调用函数，同时指定函数中 this 的值，使用方法如下代码所示：
<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }

  let user = {
    name: '小明',
    age: 18
  }

  let student = {
    name: '小红',
    age: 16
  }

  // 调用函数并指定 this 的值
  sayHi.apply(user) // this 值为 user
  sayHi.apply(student) // this 值为 student

  // 求和函数
  function counter(x, y) {
    return x + y
  }
  // 调用 counter 函数，并传入参数
  let result = counter.apply(null, [5, 10])
  console.log(result)
</script>总结：

• apply 方法能够在调用函数的同时指定 this 的值
  
• 使用 apply 方法调用函数时，第1个参数为 this 指定的值
  
• apply 方法第2个参数为数组，数组的单元值依次自动传入函数做为函数的参数
  

bind
bind 方法并不会调用函数，而是创建一个指定了 this 值的新函数，使用方法如下代码所示：
<script>
  // 普通函数
  function sayHi() {
    console.log(this)
  }
  let user = {
    name: '小明',
    age: 18
  }
  // 调用 bind 指定 this 的值
  let sayHello = sayHi.bind(user);
  // 调用使用 bind 创建的新函数
  sayHello()
</script>注：bind 方法创建新的函数，与原函数的唯一的变化是改变了 this 的值。
四、防抖节流

• 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间
  
• 节流（throttle） 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数
  

<hr/>五、其他优质文章 ：

前端行业发展：

• Web 前端分为哪几个大方向，工资待遇如何，辛苦吗？
  
• 找前端工作会不会很难？
  
• 现在web前端的工资怎样？
  
• 前端开发就业情况如何？
  

前端工作内容：

• 前端工程师主要工作内容是什么？
  
• 前端开发是做什么的？工作职责有哪些？
  

前端学习路线：

• 怎么学习前端开发？求推荐学习路线？
  

前端必读书籍：

• 前端开发工程师必读书籍有哪些值得推荐？
  

面试相关：

• 关于前端Vue框架的面试题，面试官可能会问到哪些？
  
• 【一定要收藏】32000字的前端面试题总结！！！
  
• web前端简历个人技能该怎么写?
  
• 前端简历中项目描述怎么写能够更加的优雅？
  
• 面试前端工程师简历应该怎么写才容易通过？
  
• 自学 web 前端人怎么找工作？
  
• 自学前端简历怎么写啊？
  

HTML教程：

• HTML5入门教程（含新特性），从入门到精通
  
• HTML图文教程（表单域/文本框与密码框/单选按钮与复选框）
  
• HTML图文教程（选按钮与复选框/input标签/提交按钮与重置按钮）
  
• HTML图文教程（通按钮/文件域/label/下拉表单）
  
• HTML零基础入门教程， 零基础学习HTML网页制作（HTML基本结构）
  
• HTML零基础入门教程， 零基础学习HTML网页制作（HTML 标签）
  

JavaScript教程：

• JavaScript 是什么？
  
• JavaScript基础入门教程（引入方式/注释/变量/常量/数据类型/类型转换）
  
• JavaScript基础入门教程（引入方式、注释、变量、数据类型、类型转换）
  
• JavaScript基础入门教程（for循环/数组）
  
• JavaScript基础入门教程（函数/返回值/作用域）
  
• JavaScript基础入门教程（对象/内置对象）
  
• JavaScript进阶教程（作用域/函数/解构赋值）
  
• JavaScript进阶教程（构造函数/内置函数/继承/封装）
  
• JavaScript进阶教程（深浅拷贝/异常/this/防抖节流）
  

Koa2教程：

• Koa2框架是什么？Koa框架教程快速入门Koa中间件
  
• Koa2框架路由应用，Koa2前景、Koa2中间件
  
• Koa2异常处理
  

VUE教程：

• 最全的vue学习教程来了，vue模块化组件超级好用，vue项目推荐，vue项目结构搭建，案例分析
  

其他：

• 13 个有趣且实用的 CSS 框架 / 组件
  
• 有哪些好的前端社区？
  

看完两件事

看完这个篇内容之后，如果对你有帮助，我想请您帮我个小忙
1、点赞，让更多人看到这篇文章（双击屏幕有惊喜哦~）
2、关注我，让我们成为长久的朋友关系，以后精彩回答你都可以第一时间收到
感谢您的支持！！