精华内容
下载资源
问答
  • js中箭头函数this的指向
    2021-06-21 09:45:11

    箭头函数(this指向问题)

    this指向问题

    普通函数this指向调用该函数的对象
    箭头函数的this则是指向 该函数所在的作用域指向的对象 ,因为箭头函数会取消当前函数里面的作用域,因此寻找上一个作用域,因此this指向的是父级作用域的this,如下代码所示:

    var name = 'window'; 
    var A = {
       name: 'A',
       sayHello: () => {
          console.log(this.name)
       }
    }
    A.sayHello();//window
    
    更多相关内容
  • js箭头函数/函数this指向

    千次阅读 2021-10-13 21:59:29
    一、函数this指向 this是每一个函数都 一定有的关键词 ... 2、this指向事件源 事件绑定,事件处理函数 this指向默认是事件源,也就是绑定事件的标签对象 3、this指向数组/对象 数组/对象 存...

    一、函数的this指向

            this是每一个函数都 一定有的关键词

            this本质上是一个对象数据结构 用于指向数据

            通过this关键词,可以调用操作这个 数据

            1、this指向window    声明式函数 匿名函数 定时器 延时器 forEach循环

            2、this指向事件源     事件绑定中,事件处理函数 this指向默认是事件源,也就是绑定事件的标签对象

            3、this指向数组/对象 数组/对象 中存储的函数this指向是这个数组/对象

    二、箭头函数的this指向

            箭头函数的this指向 是 父级程序的this指向

            如果没有父级程序 或者 父级程序没有指向 箭头函数的this指向是window

    (1)匿名函数绑定的事件处理函数 this指向默认是事件源 也就是div标签对象

     oDiv.addEventListener('click' , function(){

             console.log(this);

      })

     (2)箭头函数的this指向,是父级程序的this指向,下面的箭头函数没有父级程序,所以this指向是window

    oDiv.addEventListener('click' , ()=>{

                console.log(this);

     })

    (3)对象中定义的函数 和箭头函数

      const obj = {

                name:'张三',

                age:18,

                sex:'男',

            //    对象中定义的函数 this指向是这个对象本身

                 fun1:function(){

                    console.log(this)

                },

            //     箭头函数,this指向是父级程序

            //     当前箭头函数,父级程序是对象

            //     对象是没有this的,箭头函数this指向是window

                fun2:()=>{

                     console.log(this)

                },

                fun3:function(){

            //         定义在对象中的函数fun3,this指向是对象本身

            //         函数fun4是一个箭头函数

            //         存储在 函数fun3 中 父级程序就是函数fun3

            //         函数fun3的this指向是存储fun3的对象obj

            //         箭头函数fun4 的this指向 和 父级程序fun3的this指向相同

            //         也就是 obj对象本身

                   const fun4 = ()=>{

                        console.log(this);

                    }

                    fun4();

                 }  

            };  

    三、改变this指向 ==>通过JavaScript提供的函数方法

           1、调用执行函数时 改变this指向

           call

                    函数调用.call(参数1,参数2,参数3......)

                    参数1:要改变的指向

                    之后的参数2,参数3......是原始函数需要的数据

                 apply

                    函数调用.apply(参数1,[参数2,参数3....])

                    参数1:要改变的this指向

                    之后的所有参数以数组的形式赋值 原始函数需要的数据

            call和apply执行程序的原理、结果都完全一致,只是给原始函数赋值参数的语法形式不同  

            2、【生成新的函数】时 改变this指向

            bind

                    函数.bind(参数1,参数2,参数3....)

                    参数1:新的this指向

                    之后所有的参数 参数2,参数3......都是原始函数需要的参数数据

    展开全文
  • JS中普通函数this的指向,和箭头函数this指向

    普通函数的this指向其调用者,如下,在obj中调用普通函数,那么this指向obj

        <script>
          let obj = {
            name: '冯昕',
            fn: function () {
              console.log(this)
              console.log(this.name)
            },
          }
          obj.fn()//obj,冯昕
        </script>

    如果在window中直接调用obj,就会发生以下的结果,

        <script>
          let obj = {
            a: '冯昕',
            fn: function () {
              console.log(this)
              console.log(this.a)
            },
          }
          obj.fn() //obj,冯昕
          let a = obj.fn
          a() //window,undefined
        </script>

    此时函数的的指向就变成了window,因为window中没有a这个属性所以会得到undefined

    当函数作为函数被直接调用的时候,this指向window

        <script>
          let obj = {
            a: '冯昕',
            fn: function () {
              console.log(this)
              console.log(this.a)
              fn2() 
            },
          }
          function fn2() {
            console.log(this)
            console.log(this.a)
          }
          obj.fn()//obj,冯昕
                  //window,undefined
        </script>

    当一个函数被另一个函数嵌套进行调用的时候,该函数的this指向window对象,箭头函数除外

       <script>
          function fn() {
            let a = 'tc'
            return () => {
              console.log(this)
              console.log(this.a)
            }
          }
          let obj = {
            b: 'ljr',
            c: function () {
              return () => {
                console.log(this)
                console.log(this.b)
              }
            },
          }
          fn()() //window, undefined
          fn.apply(obj)() //obj,undefined
          fn.apply()(obj) //window,undefined
          obj.c()() //obj,ljr
        </script>

    箭头函数的this在被声明的时候就已经确定了,箭头函数本身是没有this指向的,箭头函数中的this根据上层作用域链来进行查找,即使是call,apply,bind等方法也不能改变箭头函数this的指向,而且箭头函数没有arguments参数列表

    最后

    总结一些普通函数函数和箭头函数的区别

    普通函数

     this指向:
           普通函数function:  用()调用, 自动指向运行时所在对象
           普通函数, 用 call/bind/apply : 手动指定this指向的对象
           普通函数搭配new运算符:  this指向空对象 -- let this = {}
           普通函数在严格模式下:  如果this是window 则变为 undefined
           箭头函数: this指向 声明时所在作用域的this

    箭头函数

    1.箭头函数没有prototype(原型),所以箭头函数本身没有this

    2.箭头函数的this指向在定义的时候继承自外层第一个普通函数的this

    3.不能用call,apply,bind等方法改变箭头函数的this指向

    4.如果箭头函数的外层没有一个普通函数,在严格模式和非严格模式的情况下,箭头函数的this都指向window

    5.箭头函数使用arguments会报未声明的错误,如果外层有普通函数,arguments则指向该普通函数

    展开全文
  • JS 箭头函数this指向

    2021-11-08 22:13:36
    箭头函数是ES6的新增特性,他没有自己的this,其this指向从外层代码库继承。 使用箭头函数时要注意一下几点: 箭头函数不能用作构造函数,用的话会抛出一个错误 无法使用arguments参数,如果要用的话就用rest ...

    参考博文:嗨,你真的懂this吗?
    箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。
    使用箭头函数时要注意一下几点:

    • 箭头函数不能用作构造函数,用的话会抛出一个错误
    • 无法使用arguments参数,如果要用的话就用rest
    • 无法使用yield命令,所以箭头函数无法用作Generator函数
    • 因为没有自己的this,所以没法通过bindcallapply来改变this指向
    • 但是这不代表箭头函数的this指向是静态的,我们可以通过改变它外层代码库的this指向来控制
    • 箭头函数的this从外层代码库继承,所以箭头函数的this是在定义的时候就绑定好了的,而普通函数是在调用的时候确定this指向
    • 字面量对象中直接定义的箭头函数的this不绑定该对象,而是往外找一层,最简单的情况是绑定到window

    PS: 实际开发环境中,React可以使用箭头函数解决一个经典问题,这里不细说了。

    给一个例子看一下箭头函数的实际情况:

    const obj = {
      fun1: function () {
        console.log(this);
        return () => {
          console.log(this);
        }
      },
      fun2: function () {
        return function () {
          console.log(this);
          return () => {
            console.log(this);
          }
        }
      },
      fun3: () => {
        console.log(this);
      }
    }
    
    let f1 = obj.fun1(); // obj
    f1() // obj
    
    let f2 = obj.fun2();
    let f2_2 = f2(); // window
    f2_2() // window
    
    obj.fun3(); // window
    

    针对每行输出的分析:

    • let f1 = obj.fun1() // obj
      这里明显进行的是隐式绑定,fun1this指向obj
    • f1() // obj
      这里执行了上一行返回出来的箭头函数,我们分析上一层代码库的this指向obj,所以直接继承,箭头函数this指向obj
    • let f2 = obj.fun2()
      fun2第一层执行的时候没有打印代码,而是返回了一个函数出来,赋值给f2,并且这里发生了绑定丢失,this指向由原来的obj指向了window(发生了赋值)
    • let f2_2 = f2() // window
      f2()执行了,打印出了改绑后的this——window,然后将箭头函数返回出来,赋值给f2_2
    • f2_2() // window
      执行打印出window,刚才的外层代码的this不是指向了window吗,所以这里就继承了window作为this
    • obj.fun3() // window
      在字面量中直接定义的箭头函数无法继承该对象的this,而是往外再找一层,就找到了window,因为字面量对象无法形成自己的一层作用域,但是构造函数可以哦。

    那我们怎么操纵箭头函数的this指向呢:
    答案是修改外层代码库的this指向,在箭头函数定义之前就给this修改方向即可。
    在以上代码的基础上:

    let fun4 = f2.bind(obj)() // obj
    fun4() // obj
    

    我们发现修改的是第二层方法的this指向,并且箭头函数也继承了下来。

      fun2: function () {
        return function () { // 我们修改的是这里的this
          console.log(this);
          return () => { // 然后这里定义的时候就继承啦
            console.log(this);
          }
        }
      },
    

    芜湖

    如果绑定丢失或隐式绑定等不明白可以看上一篇博客。

    展开全文
  • 箭头函数 下面两代码等价: const fun1 = function(x){ return x*x;} const fun = x => x*x; function换成=>,放在参数和函数体中间 注意:如果没有参数,或有多个参数,需要使用()来定义参数列表 如果有一...
  • js中this指向的四种规则+ 箭头函数this指向 四种规则分别是:默认、隐式、显式(call、apply、bind)、new 对象
  • JS-ES6中箭头函数和普通函数this指向问题 一、普通函数的this (1)普通函数的this代表它的直接调用者,如obj.fn(),fn的this指向就是obj (2)默认情况下,没有直接的调用者,this的指向为window (3)严格模式...
  • js箭头函数this指向

    2021-04-11 13:29:50
    箭头函数this指向最近作用域的this 普通函数this指向调用他的对象, 箭头函数this指向最近作用域的this(如果最近作用域没有this再向外一层一层的找直到找到最近的this) let obj = { aaa(){ console.log...
  • ES6 中箭头函数this指向
  • 一:普通函数this指向 *普通函数中this是动态的,当我们调用函数的时候确定的,调用方式的不同决定了this的指向不同,一般指向我们函数的调用者。(谁调用指向谁) 1.普通函数 //1.普通函数 function fn() ...
  • 一、具名函数和赋值式函数 1. 具名函数有预编译 fn() //输出:bye-bye function fn() { console.log('bye-bye'); } 2. 赋值式函数没有预编译 fn() const fn = function() { console.log('hello'); } 此时...
  • js中普通函数和箭头函数this指向问题js中普通函数和箭头函数this指向问题1.普通函数this指向2.箭头函数this指向 js中普通函数和箭头函数this指向问题 this指向问题,一直是困扰大家的难题,也是面试常...
  • 2.箭头函数this: 指向箭头函数定义时所处的对象,而不是箭头函数使用时所在的对象,默认使用父级的this 箭头函数的父级还箭头还是 就从父级开始 向上查找 直到有(实际上箭头函数里并没有 this,如果你在箭头函数...
  • 1、箭头函数,function () { } 箭头前面: 如果没有参数: ( )=> 如果一个参数: (x)=> 或者 x=> 如果多个参数 : (参数1,参数2)=> 必须有括号 箭头后面 如果是某个变量:相当于return 这个变量。 如果...
  • 针对普通函数 this 指向改变 ...普通函数与箭头函数的不同: (1)首先是this指向,普通函数的this 是动态的,谁调用该函数指向谁,普通函数如果前面没有明确的对象调用,非严格情况下 都是指向wind.
  • 箭头函数this指向以及改变this指向的方法 call apply bind 总结 相同点: 都可以改变函数内部的this指向 不同点 : 1.call和apply会调用函数,并且改变函数内部this的指向 2.call和apply传递的参数不一样,call传递...
  • 箭头函数中this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。 正是因为它没有this,所以也就不能用作构造函数。箭头函数...
  • JS箭头函数this指向问题 鄙人简单认为箭头函数的this指向即为包含箭头函数的那个函数的指向 如有错误,望大牛们多多指教 参考以下文章 链接: https://zhuanlan.zhihu.com/p/57204184. ...
  • 箭头函数中this指向

    千次阅读 多人点赞 2021-04-25 11:13:45
    箭头函数中this指向一、this二、普通函数1. 定义2. 实例三、箭头函数1. 定义2. 实例四、两者混用 一、this this作为关键字,它的作用就是引用,并且它通常只写在函数内部就是函数体内,在js中this的引用对象随着...
  • ES6-箭头函数this指向

    2022-07-28 20:15:01
    因为箭头函数是没有this指向的,所以在click事件里面的回调函数就没有this,它会去上一层init里面去找,init也是一个箭头函数也没有this指向又到Page,然后找定义Page对象的作用域链就是window。因为箭头函数是没有...
  • vue中箭头函数this指向
  • 箭头函数及其this指向

    千次阅读 2022-04-05 11:10:22
    箭头函数 ...1、普通函数this指向: 指向它的调用者,如果没有调用者则默认指向window 2、箭头函数指向: 指向箭头函数定义的时候所处的对象,而不是其所使用的时候所处的对象,默认指向父级的this 综上:
  • 箭头函数this指向

    千次阅读 2021-06-03 23:57:11
    箭头函数this指向 箭头函数 箭头函数为以下形式的函数 const func = (paramList) => { // 函数体 } 按照习惯,将箭头函数作为单独一个函数来使用的情况并不多,往往是当要传入的参数是函数时才使用箭头函数 /...
  • 在vs当我们一个函数中嵌套另外一个函数的时候,我们希望调用外面函数
  • ES6中箭头函数this指向

    千次阅读 2019-03-16 16:34:19
    一直以来对于ES6中箭头函数有些疑虑,其中一项就是this指向问题,所以不敢放手去使用。因为跟之前我所熟悉掌握的函数内部this指向是有些地方不同的,但是在箭头函数中this到底指向谁,这块儿模模糊糊的。所以...
  • js箭头函数this指向

    万次阅读 多人点赞 2019-03-01 12:09:56
    var x = 11; var obb = { x: 222, y: { x:333, obc: function f() { console.log(this) var x ...
  • 此文主要分析如何用箭头函数解决匿名函数this指向不清的问题。帮助您更加理解this和熟悉箭头函数的使用场景。
  • 箭头函数以及箭头函数中this指向问题
  • 在文档是这样写的: ...按照我的理解是,当一个对象被创建时,这个对象的this指向谁则函数里的this就指向谁; 下面我举个例子 let fn = { a:()=>{ console.log(1,this); }, b:function(){ console....
  • 箭头函数的5种形式 没有返回值的,没参数的 function a (){ console.log(111) } var a = () => console.log(111); a() 没有返回值的,有参数的 function a (name){ console.log(name) } var a = ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,912
精华内容 12,764
关键字:

js中箭头函数this的指向