前端this指向详解

已于 2022-08-19 18:23:53 修改
阅读量1.4k 收藏 8
点赞数 4
分类专栏： 面试题 文章标签： 前端 javascript 开发语言
于 2022-08-12 13:47:45 首次发布
Edited by Boale_H （博哥的二进制世界）
本文链接：https://blog.csdn.net/Boale_H/article/details/126299538
版权

前端this指向详解

什么是this

this 是 JavaScript 中的一个关键字。依赖于函数调用的上下文条件。

函数的this指向谁，其实可以分为两种情况讨论：

  1. 普通函数的this:
    普通函数的this指向函数调用者，如果找不到调用者，默认指向window。普通函数的this指向可以通过call\apply\bind去改变
  2. 箭头函数的this
    箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）。箭头函数的this只和定义时的作用域this有关，和调用者无关，和调用环境无关，也永远不会改变。

this在不同应用场景中的取值

普通函数（非箭头函数）被调用时的this指向

普通函数（非箭头函数）被调用时，this的指向是window
示例：

function fn () {
  console.log(this); // this指向window
}

fn();

在这里插入图片描述

普通函数（非箭头函数）作为对象方法被调用时的this指向

普通函数（非箭头函数）作为对象方法被调用时，this的指向是对象本身
示例：

const obj = {
  name: '张三',
  normal() {
    console.log(this); // this指向对象本身，即obj
  },
}

obj.normal();

在这里插入图片描述
备注：如果对象方法中使用了计时器如setTimeout,setTimeout中回调函数的this会有不同的情况，在后面我们会介绍setTimeout的this指向

普通函数（非箭头函数）作为class方法被调用时的this指向

普通函数（非箭头函数）作为class方法被调用时，this的指向是class实例本身
示例：

class Person {
  constructor(name, age) {
    this.name = name; // this指向class实例本身
    this.age = age; // this指向class实例本身
  }
  logInfo() {
    console.log(this); // this指向class实例本身
  }
}

const zhangsan = new Person('张三', 20);
zhangsan.logInfo();

在这里插入图片描述

普通函数（非箭头函数）被call\apply\bind转化之后被调用时的this指向

call\apply\bind可以改变普通函数（非箭头函数）的this指向，因此普通函数（非箭头函数）被call\apply\bind转化之后，this指向变成指定的对象
示例：
我们定义一个普通函数fn，
当fn作为普通函数正常调用时，this指向window；
当使用call\apply\bind将fn的this指向修改成一个对象obj时，此时this指向obj。

function fn(params1, params2) {
  console.log(this, params1, params2);
}

const obj = {
  name: '张三',
  age: 20,
}

fn('参数1', '参数2'); // 当fn作为普通函数正常调用时，this指向window；
fn.call(obj, '参数1', '参数2'); // 当使用call将fn的this指向修改成一个对象obj时，此时this指向obj。
fn.apply(obj, ['参数1', '参数2']); // 当使用apply将fn的this指向修改成一个对象obj时，此时this指向obj。
fn.bind(obj, '参数1', '参数2')(); // 当使用bind将fn的this指向修改成一个对象obj时，此时this指向obj。

在这里插入图片描述

箭头函数中的this指向

之前我们讲过，箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）。箭头函数的this只和定义时的作用域this有关，和调用者无关，和调用环境无关，也永远不会改变。接下来我们用以下示例来说明：

  1. 普通函数fn1作为对象obj的方法，并return一个普通函数

    const obj = {
  name: '张三',
  age: 20,
  fn1() {
    console.log(this); // 打印obj，普通函数（非箭头函数）作为对象方法被调用时，this的指向是对象本身
    return function () {
      console.log(this); // 打印window，因为fn1 return出去的函数，调用者并不是obj，实际上是相当于普通函数（非箭头函数）的调用方式，所以此时this指向window
    }
  },
}

obj.fn1()();

    在这里插入图片描述

  2. 普通函数fn2作为对象obj的方法，并return一个箭头函数

    const obj = {
  name: '张三',
  age: 20,
  fn2() {
    console.log(this); // 打印obj，普通函数（非箭头函数）作为对象方法被调用时，this的指向是对象本身
    return () => {
      console.log(this); // 打印obj，箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）
    }
  },
}

obj.fn2()();

    在这里插入图片描述

  3. 对象obj的对象字面量fn3赋值一个箭头函数，并return一个箭头函数

    const obj = {
  name: '张三',
  age: 20,
  fn3: () => {
    console.log(this); // 打印window
                       // 箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）
                       // 在字面量中直接定义的箭头函数无法继承该对象的this，而是往外再找一层，就找到了window，因为字面量对象无法形成自己的一层作用域，但是构造函数可以哦
    return () => {
      console.log(this); // 打印window，箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）
    }
  },
}

obj.fn3()();

    在这里插入图片描述

  4. 对象obj的对象字面量fn4赋值一个普通函数，并return一个普通函数，再return一个箭头函数

    const obj = {
  name: '张三',
  age: 20,
  fn4: function () { 
    console.log(this) // 打印obj，普通函数（非箭头函数）作为对象方法被调用时，this的指向是对象本身
    
    return function () {
      console.log(this); // 打印window，因为fn4 return出去的函数，调用者并不是obj，实际上是相当于普通函数（非箭头函数）的调用方式，所以此时this指向window
      
      return () => {
        console.log(this); // 打印window，箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）
      }
    }
  },
}

obj.fn4()()();

    在这里插入图片描述

  5. 普通函数fn，return一个箭头函数

    function fn() {
  console.log(this); // 打印window，普通函数（非箭头函数）被调用时，this的指向是window
  return () => {
    console.log(this); // 打印window，箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）
  }
}

fn()();

    在这里插入图片描述

  6. 普通函数fn，return一个箭头函数，并且fn通过call修改this指向为obj

    const obj = {
  name: '张三',
  age: 20,
}

function fn() {
  console.log(this); // 打印obj，普通函数可以被call修改this指向
  return () => {
    console.log(this); // 打印obj，箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）
  }
}

fn.call(obj)(); // 使用call修改fn的this指向

    在这里插入图片描述

  7. 普通函数fn，return一个普通函数

    function fn() {
  console.log(this); // 打印window，普通函数（非箭头函数）被调用时，this的指向是window

  return function() {
    console.log(this); // 打印window，普通函数（非箭头函数）被调用时，this的指向是window
  }
}

fn()();

    在这里插入图片描述

  8. 普通函数fn，return一个普通函数，并且fn通过call修改this指向为obj

    function fn() {
  console.log(this); // 打印obj，普通函数可以被call修改this指向

  return function() {
    console.log(this); // 打印window，因为fn return出去的普通函数，调用者并不是obj，实际上是相当于普通函数（非箭头函数）的调用方式，所以此时this指向window
  }
}

fn.call(obj)()

    在这里插入图片描述

回调函数的this指向

计时器setTimeout\setInterval的回调函数，包括各种方法的回调函数，实际上都比较特殊，关于这类回调函数的this指向，首先我们要关注两个点，第一是回调函数的类型是属于普通函数还是箭头函数；第二是回调函数的调用者是谁，是window还是对象本身。

const obj = {
  name: '张三',
  fn1() {
    console.log(this); // 打印obj，普通函数（非箭头函数）作为对象方法被调用时，this的指向是对象本身
  },
  fn2() {
    setTimeout(function() {
      console.log(this); // 打印window，因为fn2中的setTimeout的回调函数，调用者并不是obj
    })
  },
  fn3() {
    setTimeout(() => {
      console.log(this); // 打印obj，因为fn23中的setTimeout的回调函数是一个箭头函数，箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）
    })
  }
}

obj.fn1();
obj.fn2();
obj.fn3();

在这里插入图片描述

call\apply\bind

call，apply，bind都是可以改变普通函数的this指向（不能改变箭头函数的this指向）的方法，这三个函数实际上都是绑定在Function构造函数的prototype上，而每一个函数都是Function的实例，因此每一个函数都可以直接调用call\apply\bind

call\apply\bind区别

  1. call的第一个参数是this要指向的对象，并且第二个参数开始，可以接收多个参数作为改造后的函数参数，使用call方法，改造后的函数会立即执行。call的返回值是使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

    const obj = {
	name: '张三',
	age: 20，
}
function fn(params1, params2) {
	console.log(this.name, this.age, params1, params2);
}
const result = fn.call(obj, '参数1', '参数2'); // 打印：张三, 20, 参数1, 参数2
console.log(result); // 打印undefined

  2. apply接收两个参数，第一个参数是this要指向的对象，第二个参数是一个数组（或一个类数组对象），数组或者类数组对象中包裹的是要传递给改造后的函数的参数，使用apply方法，改造后的函数会立即执行。apply的返回值是使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

    const obj = {
	name: '张三',
	age: 20，
}
function fn(params1, params2) {
	console.log(this.name, this.age, params1, params2);
}
const result = fn.apply(obj, ['参数1', '参数2']); // 打印：张三, 20, 参数1, 参数2
console.log(result); // 打印undefined

  3. bind的第一个参数是this要指向的对象，并且第二个参数开始，可以接收多个参数作为改造后的函数参数，使用bind方法，改造后的函数并不会立即执行，而是作为bind方法的返回值return出来，因此需要额外调用。bind的返回值就是改造后的函数。

    const obj = {
	name: '张三',
	age: 20，
}
function fn(params1, params2) {
	console.log(this.name, this.age, params1, params2);
}
const resultFun = fn.bind(obj, '参数1', '参数2');
resultFun(); // 打印：张三, 20, 参数1, 参数2

手写call\apply\bind

  1. 实现call
    首先我们要分析call的主要特性：
    ①call挂载在Function构造函数的原型链上
    ②call的调用者必须是函数
    ③接收的参数数量不固定，因此我们需要获取传入call的实参，即通过argument实现
    ④argument是类数组对象，我们需要将类数组对象转成数组，有三种方法：Array.prototype.slice.call、Array.from、循环遍历
    ⑤接收的第一个参数是this指定的对象（要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。如果context是简单类型的数据，需要转成对应类型的对象；如果context是复杂类型的数据，则保持不变；如果是undefined、null，则默认指向window；）（判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型）
    ⑥接收的参数，从第二个算起，是传给改造之后的函数的，作为改造之后的函数的参数
    ⑦call是立即执行函数
    ⑧call返回的是改造后的函数所返回的值（原函数返回啥，call就返回啥）

    从上述主要特性，那么我们可以着手实现call：

    // 实现call
Function.prototype.myCall = function () { // call挂载在Function构造函数的原型链上，因此myCall也要挂载在Function的prototype上
  // 先获取调用myCall的函数
  const fn = this;
  
  // myCall的调用者数据类型必须是函数，否则抛出错误
  if(typeof fn !== 'function') {
    throw TypeError('Not a Function');
  }
  const args = []; // 创建一个数组，用于接收myCall的实参
  /*
    arguments是原生js的一个对象，可以获取传入myCall函数的实参，是一个类数组对象，类数组对象拥有数组的特性，即length，但是不能使用Array的方法
    我们需要将arguments类数组对象转成数组：
      1.正常情况下可以通过Array.prototype.slice.call()的方式，即Array.prototype.slice.call(arguments)转成数组，但是我们还没实现call,所以此方法暂时不用
      2.es6中的新方法Array.from()也可以将类数组对象转成数组，即Array.from(arguemtns)
      3.我们使用最原始的方法，以循环的形式，将类数组对象转成数组，获取myCall的实参数组
  */
  for (let i = 0; i < arguments.length; i++) {
    args.push(arguments[i]);
  }
  // 获取指定的this指向，即实参数组中的第一个值，并将指定的this指向从参数数组中剔除
  let context = args.shift() ;
  /*
    容错机制：要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。
    如果context是简单类型的数据，需要转成对应类型的对象；
    如果context是复杂类型的数据，则保持不变；
    如果是undefined、null，则默认指向window；
    备注：其实判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型
  */
  if (typeof context === 'undefined') {
    context = window;
  } else if (typeof context === 'boolean') {
    context = new Boolean(context);
  } else if (typeof context === 'number') {
    context = new Number(context);
  } else if (typeof context === 'string') {
    context = new String(context);
  } else if (typeof context === 'symbol') {
    context = new Symbol(context);
  } else if (typeof context === 'function') {
    context = context;
  } else if (typeof context === 'object') {
    // context = context ? context : window;
    context = context ? context : window;
  }

  let randomAttributeName = Symbol(); // 创建一个随机属性名，Symbol()始终返回唯一值
  context[randomAttributeName] = fn; // 将fn临时作为context这个对象的属性存储起来，去调用fn的时候this也就指向context
  let result = context[randomAttributeName](...args); // 用context这个对象调用函数fn
  delete context[randomAttributeName]; // 删除临时绑定在context上的属性，让context回归原本的样子
  return result; // call返回的是改造后的函数调用后所返回的值（原函数返回啥，call就返回啥）
}



// 测试
function fn(params1, params2) {
  console.log(this, params1, params2)
}

const obj = {
  name: '张三',
  age: 20,
}

fn.myCall(obj, '参数1', '参数2'); // 打印obj、参数1、参数2

  2. 实现apply （类似call的实现，只是参数传递不同）
    首先我们要分析apply的主要特性：
    ①apply挂载在Function构造函数的原型链上
    ②apply的调用者必须是函数
    ③接收两个参数，第一个参数是指定的this指向，第二个参数是数组，数组中是要传给改造后的函数作为参数
    ④接收的第一个参数是this指定的对象（要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。如果context是简单类型的数据，需要转成对应类型的对象；如果context是复杂类型的数据，则保持不变；如果是undefined、null，则默认指向window；）（判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型）
    ⑤apply是立即执行函数
    ⑥apply返回的是改造后的函数所返回的值（原函数返回啥，call就返回啥）

    从上述主要特性，那么我们可以着手实现apply：

    // 实现apply
Function.prototype.myApply = function (context, args = []) { // apply挂载在Function构造函数的原型链上，因此myApply也要挂载在Function的prototype上
                                                        // 第一个参数是指定的this指向
                                                        // 第二个参数是一个数组，数组中是要传给改造后的函数作为参数
  // 先获取调用myApply的函数
  const fn = this;
  
  // myApply的调用者数据类型必须是函数，否则抛出错误
  if(typeof fn !== 'function') {
    throw TypeError('Not a Function');
  }

  /*
    容错机制：要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。
    如果context是简单类型的数据，需要转成对应类型的对象；
    如果context是复杂类型的数据，则保持不变；
    如果是undefined、null，则默认指向window；
    备注：其实判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型
  */
  if (typeof context === 'undefined') {
    context = window;
  } else if (typeof context === 'boolean') {
    context = new Boolean(context);
  } else if (typeof context === 'number') {
    context = new Number(context);
  } else if (typeof context === 'string') {
    context = new String(context);
  } else if (typeof context === 'symbol') {
    context = new Symbol(context);
  } else if (typeof context === 'function') {
    context = context;
  } else if (typeof context === 'object') {
    // context = context ? context : window;
    context = context ? context : window;
  }

  let randomAttributeName = Symbol(); // 创建一个随机属性名，Symbol()始终返回唯一值
  context[randomAttributeName] = fn; // 将fn临时作为context这个对象的属性存储起来，去调用fn的时候this也就指向context
  let result = context[randomAttributeName](...args); // 用context这个对象调用函数fn
  delete context[randomAttributeName]; // 删除临时绑定在context上的属性，让context回归原本的样子
  return result; // myApply返回的是改造后的函数调用后所返回的值（原函数返回啥，myApply就返回啥）
}


// 测试
function fn(params1, params2) {
  console.log(this, params1, params2)
}

const obj = {
  name: '张三',
  age: 20,
}

fn.myApply(obj, ['参数1', '参数2']); // 打印obj、参数1、参数2

  3. 实现bind（类似call的实现，只是bind返回的是函数）
    首先我们要分析bind的主要特性：
    ①bind挂载在Function构造函数的原型链上
    ②bind的调用者必须是函数
    ③接收的参数数量不固定，因此我们需要获取传入bind的实参，即通过argument实现
    ④argument是类数组对象，我们需要将类数组对象转成数组，有三种方法：Array.prototype.slice.call、Array.from、循环遍历
    ⑤接收的第一个参数是this指定的对象（要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。如果context是简单类型的数据，需要转成对应类型的对象；如果context是复杂类型的数据，则保持不变；如果是undefined、null，则默认指向window；）（判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型）
    ⑥接收的参数，从第二个算起，是传给改造之后的函数的，作为改造之后的函数的参数
    ⑦bind返回值的是一个函数，即改造之后的函数，不是立即执行的，需要手动调用
    ⑧因为bind返回的是函数，而不是立即执行的，所以我们需要优化这个return出来的函数，让其支持柯里化

    从上述主要特性，那么我们可以着手实现bind：

    // 实现bind
Function.prototype.myBind = function () { // bind挂载在Function构造函数的原型链上，因此myBind也要挂载在Function的prototype上
  // 先获取调用myBind的函数
  const fn = this;
  
  // myBind的调用者数据类型必须是函数，否则抛出错误
  if(typeof fn !== 'function') {
    throw TypeError('Not a Function');
  }
  const args = []; // 创建一个数组，用于接收myBind的实参
  /*
    arguments是原生js的一个对象，可以获取传入myBind函数的实参，是一个类数组对象，类数组对象拥有数组的特性，即length，但是不能使用Array的方法
    我们需要将arguments类数组对象转成数组：
      1.正常情况下可以通过Array.prototype.slice.call()的方式，即Array.prototype.slice.call(arguments)转成数组，但是我们还没实现call,所以此方法暂时不用
      2.es6中的新方法Array.from()也可以将类数组对象转成数组，即Array.from(arguemtns)
      3.我们使用最原始的方法，以循环的形式，将类数组对象转成数组，获取myBind的实参数组
  */
  for (let i = 0; i < arguments.length; i++) {
    args.push(arguments[i]);
  }
  // 获取指定的this指向，即实参数组中的第一个值，并将指定的this指向从参数数组中剔除
  let context = args.shift() ;
  /*
    容错机制：要保证指定的this指向（即context）必须是一个复杂类型的数据结构（如object\function），不能是简单类型的数据(如boolean\number\string\symbol)。
    如果context是简单类型的数据，需要转成对应类型的对象；
    如果context是复杂类型的数据，则保持不变；
    如果是undefined、null，则默认指向window；
    备注：其实判断数据类型最推荐的办法是通过Object.prototype.toString.call()来判断，但是我们需要手动实现call\apply\bind，那么这里就不通过这种方式来判断数据类型，而是通过其他的方法来判断数据类型
  */
  if (typeof context === 'undefined') {
    context = window;
  } else if (typeof context === 'boolean') {
    context = new Boolean(context);
  } else if (typeof context === 'number') {
    context = new Number(context);
  } else if (typeof context === 'string') {
    context = new String(context);
  } else if (typeof context === 'symbol') {
    context = new Symbol(context);
  } else if (typeof context === 'function') {
    context = context;
  } else if (typeof context === 'object') {
    // context = context ? context : window;
    context = context ? context : window;
  }

  // bind方法返回的是一个函数，所以myBind也应该返回一个函数，而且这个函数的this得是指定的this指向，即context
  return function F(...rest) { // 除了通过arguments可以获取F的实参外，还能通过剩余参数...rest的形式来获取F的实参。这边是为了区分myBind和F的实参，所以F不用arguments而是...rest
    
    if (this instanceof F) { // 处理myBind return出去的函数被作为构造函数使用的情况，即通过new运算符来调用return出去的函数实例（ 如 new func.bind() ） （很少有这样的用法，一般都是return出去之后直接调用的）
      return new fn(...args, ...rest);
    }

    /*
      以下一段完全可以用
        return fn.apply(context, args.concat(...rest))
      代替。
      只是我们假装没有apply方法，故以下面的写法来实现
    */
    let randomAttributeName = Symbol(); // 创建一个随机属性名，Symbol()始终返回唯一值
    context[randomAttributeName] = fn; // 将fn临时作为context这个对象的属性存储起来，去调用fn的时候this也就指向context
    let paramsArr = args.concat(...rest); // args.concat(...rest)是为了支持函数柯里化
    let result = context[randomAttributeName](...paramsArr); // 用context这个对象调用函数fn
    delete context[randomAttributeName]; // 删除临时绑定在context上的属性，让context回归原本的样子
    return result;
  }
}

// 测试
function fn(params1, params2) {
  console.log(this, params1, params2)
}

const obj = {
  name: '张三',
  age: 20,
}

fn.myBind(obj, '参数1', '参数2')(); // 打印obj、参数1、参数2

如何选用call\apply\bind

如果不需要关心具体有多少参数被传入函数，选用apply()；
如果确定函数可接收多少个参数，并且想一目了然表达形参和实参的对应关系，用call()；
如果我们想要将来再调用方法，不需立即得到函数返回结果，则使用bind();

函数柯里化

手动实现bind函数的底层原理就是函数柯里化的应用，关于函数柯里化，可以参考我的文章函数柯里化详解

箭头函数详解

什么是箭头函数

箭头函数是ES6的新特性，箭头函数本质上也是一个匿名函数。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。
创造箭头函数的初衷就是为了简化函数的定义，以及规避this指向带来的问题。

  1. 写法：
x => x * x

相当于：

function (x) {
    return x * x;
}
  1. 如果使用箭头函数，以前的那种hack写法就不再需要了。
var that = this; // 不再需要这样的写法

箭头函数的原理

实现原理还没找到，后续补充

箭头函数的特点（和普通函数的区别）

  1. this指向：

    • 普通函数this指向：
      指向它的调用者，如果没有调用者则默认指向window
    • 箭头函数指向：
      箭头函数本身并无this，箭头函数的this由定义箭头函数时所处的作用域决定，即箭头函数的this永远指向定义箭头函数时所在的作用域的this（也可以说是上层作用域，强调的是作用域！）。箭头函数的this只和定义时的作用域this有关，和调用者无关，和调用环境无关，也永远不会改变（因此不能使用call\apply\bind改变箭头函数的this指向）。
      MDN的解释：箭头函数不会创建自己的this，所以它没有自己的this，它只会从自己的作用域链的上一层继承this。

  2. 箭头函数不能当构造函数，用的话会抛出一个错误（因此也不能使用new关键字）

    var Fun = (name, age) => { this.name = name; this.age = age; };
var foo = new Foo('张三', 20); // TypeError: Foo is not a constructor

    我们先了解一下构造函数的new都做了些什么？简单来说，分为四步：

    ① JS内部首先会先生成一个对象；

    ② 再把函数中的this指向该对象；

    ③ 然后执行构造函数中的语句；

    ④ 最终返回该对象实例。

    但是！！因为箭头函数没有自己的this，它的this其实是继承了外层执行环境中的this，且this指向永远不会随在哪里调用、被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用new调用时会报错！

  3. 箭头函数没有 prototype 属性

    var Foo = () => {};
console.log(Foo.prototype); // undefined

  4. 箭头函数没有自己的arguments对象。在箭头函数中访问arguments实际上获得的是外层局部（函数）执行环境中的值。

    // 例子一
let fun = (val) => {
    console.log(val);   // 111
    // 下面一行会报错
    // Uncaught ReferenceError: arguments is not defined
    // 因为外层全局环境没有arguments对象
    console.log(arguments); 
};
fun(111);

// 例子二
function outer(val1, val2) {
    let argOut = arguments;
    console.log(argOut);    // ①
    let fun = () => {
        let argIn = arguments;
        console.log(argIn);     // ②
        console.log(argOut === argIn);  // ③
    };
    fun();
}
outer(111, 222);

    依据上面的输出结果，
    很明显，普通函数outer内部的箭头函数fun中的arguments对象，其实是沿作用域链向上访问的外层outer函数的arguments对象。

    但是，我们可以在箭头函数中使用rest参数（也叫剩余参数）代替arguments对象，即通过（形式为： …rest）来访问箭头函数的参数列表！！

    function foo(...arg) { 
  return arg; 
}
  foo(1, 2, 3, 4); // 1

    function foo(...numbers) { 
  numbers.forEach((number)=>{
	console.log(number);
  })
} 
foo(1, 2, 3, 4);  // 1 2 3 4

  5. 无法使用yield命令，yield 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内），所以箭头函数无法用作Generator函数

  6. 因为没有自己的this，所以没法通过bind、call、apply来改变this指向

  7. 但是这不代表箭头函数的this指向是静态的，我们可以通过改变它外层代码库的this指向来控制

  8. 箭头函数的this从外层代码库继承，所以箭头函数的this是在定义的时候就绑定好了的，而普通函数是在调用的时候确定this指向

  9. 字面量对象中直接定义的箭头函数的this不绑定该对象，而是往外找一层，最简单的情况是绑定到window（因为对象字面量形成不了作用域）

  10. 只有一个参数的时候，参数可以不加小括号，没有参数或2个及以上参数的，必须加上小括号

  11. 返回语句只有一条的时候可以不写{}和return，会自动加上return的，返回多条语句时必须加上{}和return

  12. 箭头函数在返回对象的时候必须在对象外面加上小括号
    记住用params => {object:literal}这种简单的语法返回对象字面量是行不通的。

    var func = () => { foo: 1 };
// Calling func() returns undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

    这是因为花括号（{} ）里面的代码被解析为一系列语句（即 foo 被认为是一个标签，而非对象字面量的组成部分）。

    所以，记得用圆括号把对象字面量包起来：

    var func = () => ({foo: 1});

  13. 箭头函数位于构造函数内部，它的定义生效的时候，是在构造函数执行的时候。这时，箭头函数所在的运行环境，肯定是实例对象，所以this会总是指向实例对象。

  14. 箭头函数是匿名函数，普通函数可以是匿名函数也可以是具名函数

总结

  1. 普通函数的this不看作用域，而是看调用者，即谁调用，this就指向谁（call\apply\bind改造之后除外）
  2. 箭头函数本身无this，其函数内部的this不看函数调用者，而是看定义箭头函数时所处的作用域，即箭头函数的this永远指向定义箭头函数时所处的作用域的this
  3. 对象字面量形成不了作用域，但是构造函数可以形成作用域

参考

https://blog.csdn.net/qinge_Crazy/article/details/120087645
https://blog.csdn.net/weixin_46267040/article/details/125370111
https://blog.csdn.net/fe_watermelon/article/details/125700486
https://blog.csdn.net/XIAO_A_fighting/article/details/116701887

Boale_H
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端this指向问题-分场景分析
m0_46678592的博客
08-02 620
this的指向问题往往和我们使用它的场景相关，在不同的场景下，this会怎么去绑定对象，要绑定哪个对象是本文讨论的关键
JS高级的学习(一)
cxguitu的博客
06-27 124
JS高级
JavaScript中this的指向 详解
Wang Chengchen's Blog
05-13 4813
JavaScript的this的指向详解 this的指向一直是困扰前端小白的难题，作为小白的我用掉了好多头发的能量，稍微总结出来一点经验！！！ 关于this的指向，主要有一下几个版块， ①全局环境下的this指向 ②函数内的this ③对象中的this ④箭头函数中的this ⑤构造函数中的this ⑥原型链中的this 【补充一点】关于this，谁调用就指向谁，箭头函数在下面做单独讨论。 一、全局环境下的this指向 在全局作用域下，this始终指向全局对象window，无论是否是严格模式！ congs
this的指向问题（总结版）
最新发布
shan33__的博客
03-20 1123
在闭包函数中 this 同样取决于函数被调用的方式。否则，this 的指向取决于函数被调用的上下文。否则，this 的指向取决于函数被调用的上下文。当函数以普通函数（包括自执行函数）形式调用时，this指向全局对象window。的值由箭头函数定义时的外层作用域决定，而不是调用时的情况。方法将函数绑定到指定的对象上，则事件处理函数中的。当函数以普通函数（包括自执行函数）形式调用时，将指向触发事件的元素本身，即事件绑定的元素。将指向被绑定的对象，而不是触发事件的元素。当函数作为对象的方法调用时（回调函数），
JS中this的9种指向详解（web前端开发javascript语法基础）
激情人生，美好生活
09-04 706
js中的this其实是函数调用的上下文，在我看来这个定义包括两方面：1、在一个函数中，this是调用这个函数的对象；2、一个函数可能会被以不同的方式调用，不同的调用方式下，this的含义不同。因此，函数中this的含义可以视为是在运行时确定的。
前端开发之彻底搞懂this指向
青梅煮码
05-23 1004
this是JavaScript中的一个关键字，但是有一个相对比较特别的关键字，不像function、var、for、if这些关键字一样，可以很清楚的搞清楚它到底是如何使用的。this会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。这一次，我们一起来彻底搞定this到底是如何绑定的吧！ 一. 理...
前端之this指向
半城烟沙丶的博客
05-25 333
this是JavaScript中的一个关键字，但是又一个相对比较特别的关键字，不像function、var、for、if这些关键字一样，可以很清楚的搞清楚它到底是如何使用的。 this会在执行上下文中绑定一个对象，但是是根据什么条件绑定的呢？在不同的执行条件下会绑定不同的对象，这也是让人捉摸不定的地方。 这一次，我们一起来彻底搞定this到底是如何绑定的吧！ 理解this 1.1.为什么使用this 常见面向对象的编程语言中，比如Java，C++，Swift，Dart等等一系列语言中，this通常只会出现
javascript中this指向详解
10-22
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象，接下来我会深入的探讨这个问题。
JavaScript This指向问题详解
10-15
主要介绍了JavaScript This指向问题详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Angular.JS中的this指向详解
10-19
主要给大家介绍了关于Angular.JS中this指向的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
彻底搞懂前端this指向
qq_37565385的博客
07-21 468
彻底搞懂前端this指向
class箭头函数和普通函数的this
lewxiaolu的博客
12-15 1118
class Animal{ constructor() { this.name = 'cat' } speak() { console.log(this.name) } eat = () => { console.log(this.name) } } const n = new Animal() n.speak() n.eat() const a = n.speak const b = n.eat b() a() n.speak() // cat n
前端this用法的个人总结
suzhiwei_boke的博客
11-17 173
普通函数的this 1.全局环境下以及函数直接调用，this都始终指向window 2.this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj 3.使用call,apply,bind(ES5新增)绑定的,this指的是 绑定的对象 箭头函数中的this 普通函数和ES6的箭头函数除了this指向不同之外还有什么不同？ A.箭头函数作为匿名函数，不能作为构造函数，不能使用new关键字 B.箭头函数不绑定argumen.
前端知识体系（this指向）
qq_39773416的博客
12-06 225
this指向 对于普通函数，this指向全局对象window 对于构造函数，this执行指向新创建的对象 对于方法，this指向调用该方法的对象 另外下面了解一下函数自执行的call，apply，bind 一、call方法 这个方法可以传多个参数， 第二个参数是参数列表，代表传进去的参数 第一个参数是this指向，这个参数可以是四种情况 1不传，或者传null,undefined， 函数中的 th...
this 指向详细解析（箭头函数）
weixin_30568591的博客
06-20 1139
本文地址：http://www.cnblogs.com/dongcanliang/p/7054176.html 前言 this 指向问题是入坑前端必须了解知识点，现在迎来了ES6时代，因为箭头函数的出现，所以感觉有必要对 this 问题梳理一下，遂有此文 在非箭头函数下， this 指向调用其所在函数的对象，而且是离谁近就是指向谁（此对于常规对象，原型链， getter & setter等...
牛客网前端大挑战修改this指向
A__loser的博客
04-18 388
题目描述 封装函数 f，使 f 的 this 指向指定的对象 输入例子:bindThis(function(a, b){return this.test + a + b}, {test: 1})(2, 3)输出例子:6 没什么好说的首先我们第一个返回值应该是一个函数，再然后在调用f是应该修改f的作用域.function bindThis(f, oTarget) { return fun
面试某公司前端关于javascript中this的总结
qaz2821301的博客
04-14 959
JavaScript中this的用法
两年前端却不知this为何许？
摆脱菜鸟，砥砺前行
03-09 641
       说来惭愧，再讲一个故事吧。带着2年前端经验的我去面试，被闭包问住了，尴尬了整个面试气氛。第二次，OK，失败了总要知道为什么吧，于是闭包被我简单的攻略了。面试官问我闭包时，拿起笔就写了一个简易版的闭包。好啊，既然你知道闭包，那你说说在你写的这个闭包的这一段代码里，这里，这里，这里this分别是什么？啊啊啊啊，老天，Are you kidding me？    Q：// (1)这里thi...
前端 原型对象中this的认识
极客神殿
03-12 326
今天我看了一篇博文，博文是关于原型对象介绍的。我把代码粘贴出来如下： function SuperType(){} SuperType.prototype.name = 'Sam';//在SuperType.prototype指向的对象上增加了name属性 //在SuperType.prototype指向的对象上增...
adc前端电路设计详解
07-17
ADC，即模数转换器，是一种将模拟信号转换为数字信号的电路。其前端电路设计需要考虑以下几个方面。 首先，前端电路应包括信号调理电路，用于对输入信号进行放大、滤波和偏置等处理。放大电路可以通过使用运放来实现，滤波可以采用电容和电感组成的滤波电路。偏置电路可以使用稳压源或运放的非反馈输入作为参考电平来实现。 其次，采样电路是ADC前端电路的核心部分。采样电路应当能够准确地获取输入信号，并在采样过程中保持尽可能小的失真。常见的采样电路包括样并保持电路和逐次逼近式ADC。在样并保持电路中，采样保持电容会在一个时钟周期内存储采样值，在下一个周期中将其转换为电压。而逐次逼近式ADC则通过逐步逼近于输入信号的数值以实现模数转换。 另外，参考电压源也是ADC前端电路设计中不可忽视的部分。参考电压应稳定且精确，以确保ADC的准确性。通常可以使用稳压源或带内部参考电压的ADC芯片来提供参考电压。 此外，还需要采取一些保护措施来防止电路受到外部电磁干扰、温度变化等因素的影响。例如，使用屏蔽、地线设计、过压保护等。 总的来说，ADC前端电路设计的目标是实现信号的准确采样和稳定转换。通过合理选择信号调理电路、采样电路、参考电压源和保护措施，可以实现高性能的ADC前端电路设计。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值