箭头函数和普通函数的区别,this的指向问题

本文深入探讨了JavaScript中箭头函数的独特性质,包括其作为匿名函数的限制、this绑定行为、无法作为构造函数使用、不绑定arguments及无原型属性等关键特性。

1.箭头函数作为匿名函数,不能作为构造函数,不能使用new

var B = ()=>{
  value:1;
}

var b = new B(); //TypeError: B is not a constructor

2.箭头函数不绑定arguments,取而代之用rest参数…解决

function A(a){
  console.log(arguments); //[object Arguments] {0: 1}
}

var B = (b)=>{
  console.log(arguments); //ReferenceError: arguments is not defined
}

var C = (...c)=>{ //...c即为rest参数
  console.log(c); //[3]
}
A(1);
B(2);
C(3);

3.箭头函数会捕获上下文this作为自己的this,this继承自外围作用域。在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用。
4.箭头函数没有原型属性。
5.箭头函数无法换行。

### JavaScript 中箭头函数普通函数 `this` 指向差异 #### 普通函数中的 `this` 在普通函数中,`this` 的值取决于函数如何被调用。当一个函数作为对象的方法被调用时,该方法内的 `this` 将指向调用它的那个对象[^1]。 如果是在全局环境中执行,则 `this` 会指向全局对象,在浏览器环境下通常是 `window` 对象;而在严格模式下则为 `undefined`[^4]。 ```javascript function greet() { console.log(this); } greet(); // 如果不在严格模式下, 输出 Window {...} ``` #### 箭头函数中的 `this` 相比之下,箭头函数并没有自己的 `this` 绑定。相反,它们继承自外部最近一层非箭头函数的作用域链上的 `this` 值,即所谓的词法作用域行为。 这意味着即使在一个对象内部定义了一个箭头函数并尝试通过该对象访问属性或方法,箭头函数里的 `this` 还是指向外层作用域而非当前对象实例: ```javascript const obj = { name: 'Object', regularFunc: function () { console.log('Regular:', this.name); const arrowFunc = () => { console.log('Arrow:', this.name); }; arrowFunc(); } }; obj.regularFunc(); // Regular: Object // Arrow: Object ``` 上述例子展示了两种类型的函数对于相同上下文的不同表现形式——普通函数能够正确获取到所属对象的信息,而箭头函数则是基于其创建位置所处的环境来决定 `this` 的具体含义。 #### 实际应用场景对比 考虑到这一点,在某些情况下选择合适的函数类型非常重要。例如,在事件监听器或者定时器回调里使用普通函数可以确保每次触发都能获得最新的 DOM 节点状态;而对于那些不需要独立 `this` 上下文的任务来说,采用更简洁明了的箭头表达式可能是更好的选择。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值