箭头函数和this的区别、JS中call、bind以及apply的区别

原创

于 2021-11-25 09:49:44 发布 · 645 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #vue.js

本文详细介绍了JavaScript中函数的this指向规则，特别是普通函数与箭头函数的区别。在普通函数中，this由调用方式决定，而箭头函数则捕获其所在上下文的this值。同时，对比了call、apply和bind方法在设置this和传递参数上的差异，call直接传参，apply以数组形式传参，bind返回新函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、普通函数中的this:

this总是代表它的直接调用者, 例如 obj.function ,那么function中的this就是obj;

在默认情况(非严格模式下,未使用 ‘use strict’),没找到直接调用者,则this指的是 window;

在严格模式下,没有直接调用者的函数中的this是 undefined;

使用call,apply,bind(ES5新增)绑定的,this指的是绑定的对象。

二、箭头函数中的this:

1.箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，自己本身并没有this值；

2.箭头函数的this永远指向其上下文的this，任何方法都改变不了其指向，如call(), bind(), apply()。

三、call、bind、apply的区别

        var name = '老王', age = 17
        var obj = {
   
   
            name: "苦主",
            Age: this.age,
            myFun: function () {
   
   
                console.log(`${
     
     this.name}年龄${
     
     this.age}