精华内容
下载资源
问答
  • 箭头函数的this指向谁
    2022-06-24 11:43:30

    箭头函数的this指向所在对象所处于的环境。

    听起来有点绕,简单理解,箭头函数住哪儿,它里面的this就是指向它住所所处于的地方,而不是指向它的住所。

    比如我住在房子里,房子在某某小区。那么就说我在某某小区,而不能说我在房子里。同理把我理解成箭头函数的this,就很好理解了。

    来看第一个例子:

    let obj={
        init:()=>{
        console.log(this)//window
           }
    }
    

    上面这个例子中,箭头函数住在obj里面,obj就是住所或者房子,那么房子又在哪呢?房子在window环境里,那么箭头函数的this指向window。

    箭头函数->obj->window,箭头函数指向window

    再来看第二个例子:

    var obj = {
    	x:100,
    	show(){
    	setTimeout( ( )=>{console.log(this.x) }
    	, 500 )
          }
     }
    

    这个例子中的箭头函数住在show()里面,而show()方法在obj环境里面,所以箭头函数指向obj

    箭头函数->show()->obj,箭头函数指向obj

    注:父级作用域=所在外部环境

    更多相关内容
  • 箭头函数中的this指向

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

    一、this

    this作为关键字,它的作用就是引用,并且它通常只写在函数内部就是函数体内,在js中this的引用对象随着函数的使用环境变化而变化。这里我们探讨一下普通函数和箭头函数中的this

    二、普通函数

    1. 定义

    个人理解:普通函数的this与其定义位置无关,谁调用这个函数,this就指向谁。

    2. 实例

    在全局中:

    window.name = 'window'
      function demo1() {
        console.log(this.name)
      }
      let a = {}
      a.name = 'a'
      a.speak = demo1
      demo1() // window
      a.speak() // a
    

    直接执行demo1函数,虽然看上去没有其他东西去调用demo,实际上是window在调用,所以this指向window,第二次我们用a去调用,则this指向a
    在对象属性中:

      let demo2 = {
        name: 'demo2',
        speak1:function () {
          console.log(this.name);
        }
      }
      let b = {
        name: 'b',
        speak2: demo2.speak1
      }
      demo2.speak1() // demo2
      b.speak2() // b
    

    同理,demo2调用时this指向demo2,b调用时this指向b

    类中:

      class Person {
        speak1 = function () {
          console.log(this.name);
        }
      }
    
      let c = new Person()
      c.name = 'c'
      let d = {
        name: 'd'
      }
      c.speak1() // c
      d.speak1 = c.speak1
      d.speak1() // d
    

    同理,实例c调用时this指向实例c,对象b调用时this指向对象b

    三、箭头函数

    1. 定义

    个人理解:箭头函数的this跟调用者无关,定义位置所在的作用域的this(函数作用域)是谁,箭头函数的this就指向谁

    2. 实例

    在全局中:

      window.name = 'window'
      let demo1 = () => {
        console.log(this.name);
      }
      demo1() // window
      let a = {
        name: 'a',
        speak: demo1
      }
      a.speak() // window
    

    demo1定义所在的作用域是全局,而全局的this指向window,所以无论是直接调用(使用window调用)还是用对象a调用,最终this都是window

    在对象属性中:

      window.name = 'window'
      let demo2 = {
        name: 'demo2',
        speak1: () => {
          console.log(this.name);
        }
      }
      let b = {
        name: 'b',
        speak2: demo2.speak1
      }
      demo2.speak1() // window
      b.speak2() // window
    

    箭头函数speak1定义在对象demo2中,但是对象demo2的this仍然指向window,所以无论是demo2调用还是b调用,最终this都是指向window

    在类中:

      class Person {
        speak1 = () => {
          console.log(this.name);
        }
      }
    
      let c = new Person()
      c.name = 'c'
      let d = {
        name: 'd'
      }
      c.speak1() // c
      d.speak1 = c.speak1
      d.speak1() // c
    

    箭头函数speak1定义在类Person中,Person的this指向它的实例化对象,即实例对象c。所以无论是使用c调用还是d调用,最终this都指向c

    四、两者混用

    普通函数是谁调用this指向谁,而箭头函数的this指向定义所在作用域的this。所以如果我们将箭头函数定义在普通函数内部,那箭头函数中的this将指向普通的this,即谁调用普通函数就指向谁
    具体案例:

      window.name = 'window'
      let demo = {
        name: 'demo',
        speak1:function () {
          console.log(this.name);
        },
        speak2: ()=> {
          console.log(this.name);
        },
        speak3: function () {
          return (()=> {
            console.log(this.name);
          })()
        }
      }
      demo.speak1() // demo
      demo.speak2() // window
      demo.speak3() // demo
    

    如果理解了这个案例,那么应该就理解了普通函数和箭头函数this指向的区别了

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

    1.箭头函数

    用箭头 => 定义函数

     var fn = function(num){
        return num;
    }
    
    var fn1 = (num)=>num;
    
    var fn3 = ()=>1;
    
    var  fn4 = (num1,num2,num3)=>num
    

    如果箭头函数的代码块部分有多条语句,就要使用大括号将它们括起来,并且使用 return 返回。

            var func = (a,b)=>{
                return a+b;
            }
    

    由于花括号{} 被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外添加上花括号,否则会报错。

    var func = (a,b)=>{name:a,age:b} //报错
    var func4 = (a,b)=>{
        return {
          name: a,
          age :b
       } 
    } // 不报错
    

    箭头函数还有一个更主要的作用: 解决this的指向问题。

    2.this指向

    先说一下普通函数中的this,普通函数中的this表示调用此函数时的对象。而箭头函数是没有自己的this的,箭头函数里面的this会继承自外部的this。或者用代码

    块的概念解释会更加直观:箭头函数中的this就是外层代码块的this。举一个例子:

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 一、函数this指向 this是每一个函数都 一定有的关键词 this本质上是一个对象数据结构 用于指向数据 通过this关键词,可以调用操作这个 数据 1、this指向window 声明式函数 匿名函数 定时器 延时器 forEach...

    一、函数的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......都是原始函数需要的参数数据

    展开全文
  • ES6箭头函数this指向(适合小白理解) 1.箭头函数适用的场景 作为一个值存在: var fn = ()=>{ console.log("HELLO") } fn() //HELLO 作为事件存在: document.onclick = ()=>{ console.log(1) }; //1 ...
  • 箭头函数this指向以及改变this指向的方法 call apply bind 总结 相同点: 都可以改变函数内部的this指向 不同点 : 1.call和apply会调用函数,并且改变函数内部this的指向 2.call和apply传递的参数不一样,call传递...
  • 没有this、super、arguments 和 new.target 绑定 不能通过 new 关键字调用 没有 prototype 不可以绑定this 的绑定 不支持argument 不支持重复命名参数 疑问 // 第一种 用 var 定义 value var value = '小明' ...
  • 目录一、箭头函数1、 基础语法 2、箭头函数简写 二、箭头函数this1、全局函数下的 this2、对象方法里面的 this3、构造函数的this4、 call()、apply()、bind()调用时的 thisES6中引入了箭头函数箭头函数允许我们...
  • 箭头函数及其this指向

    千次阅读 2022-04-05 11:10:22
    箭头函数 ...1、普通函数this指向: 指向它的调用者,如果没有调用者则默认指向window 2、箭头函数指向: 指向箭头函数定义的时候所处的对象,而不是其所使用的时候所处的对象,默认指向父级的this 综上:
  • js中this指向的四种规则+ 箭头函数this指向 四种规则分别是:默认、隐式、显式(call、apply、bind)、new 对象
  • 箭头函数以及箭头函数this指向问题
  • 箭头函数this指向及其改变
  • 箭头函数this指向

    千次阅读 2021-06-03 23:57:11
    箭头函数this指向 箭头函数 箭头函数为以下形式的函数 const func = (paramList) => { // 函数体 } 按照习惯,将箭头函数作为单独一个函数来使用的情况并不多,往往是当要传入的参数是函数时才使用箭头函数 /...
  • 箭头函数的5种形式 没有返回值的,没参数的 function a (){ console.log(111) } var a = () => console.log(111); a() 没有返回值的,有参数的 function a (name){ console.log(name) } var a = ...
  • JS中普通函数this的指向,和箭头函数this指向
  • vue2知识点:箭头函数和普通函数的this指向问题
  • 在这里简单的说一下本身对this指向的浅薄理解 欢迎各位大佬补充!! 1.先简单的铺垫一个非常非常简单的知识点: 声明全局变量或普通函数 本质上其实是在给顶层对象window自定义属性和方法 这一点大家应该没什么...
  • 2.箭头函数this: 指向箭头函数定义时所处的对象,而不是箭头函数使用时所在的对象,默认使用父级的this 箭头函数的父级还箭头还是 就从父级开始 向上查找 直到有(实际上箭头函数里并没有 this,如果你在箭头函数...
  • 箭头函数this指向是静态的,始终指向函数声明时所在作用域下的this值。一篇解决你所有困惑。
  • 箭头函数里的this指向问题

    千次阅读 2022-01-23 18:01:29
    箭头函数的基础指向问题,简单易懂!!!
  • 在网上看到很多关于箭头函数this指向的博客和问题解答,但是基本写的都不准确,有的甚至是错误的,在其他博客网站得到的答案基本就是“箭头函数在定义时this指向谁那么之后就一直指向谁”,这句话虽然不错,但是这不...
  • 为什么在vue中的methods中箭头函数this指向undefined

    千次阅读 多人点赞 2020-04-27 10:29:21
    先声明,本文站在巨人...1.箭头函数的this是在定义函数时继承了其父级作用域的this,不是在执行过程中绑定的。 2.vue默认开启了严格模式。 3.全局作用域下的函数中使用this,在严格模式下this指向undefined 以上...
  • ES6箭头函数的写法: const sum =(num1,num2)=>{ return num1 + num2; } 更简化的写法 const sum = (num1, num2) => num1 + num2; 简单理解的办法就是将function简化为const, sum(num1,num2)简化...
  • 箭头函数没有this,它的this取决于作用域链上的this,它不可以通过 bind 等方法改变this 指向。 const obj = { a: () => { console.log(this) } } obj.a() // 1 .window const obj = { a: function() { ...
  • 关于箭头函数中的this指向

    万次阅读 多人点赞 2018-03-30 10:28:30
    普通函数中的this:1. this总是代表它的直接调用者(js的this是执行上下文), 例如 obj.func ,那么func中的this就是obj2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window ...
  • js箭头函数this指向

    2021-04-11 13:29:50
    箭头函数this指向最近作用域中的this 普通函数this指向调用他的对象, 箭头函数this指向最近作用域中的this(如果最近作用域没有this再向外一层一层的找直到找到最近的this) let obj = { aaa(){ console.log...
  • JS箭头函数this指向问题 鄙人简单认为箭头函数中的this指向即为包含箭头函数的那个函数的指向 如有错误,望大牛们多多指教 参考以下文章 链接: https://zhuanlan.zhihu.com/p/57204184. ...
  • 箭头函数 改变this指向

    千次阅读 2020-04-09 22:55:57
    1.箭头函数 <div>我是div</div> <script> const oDiv = document.querySelector('div'); // 普通函数 oDiv.addEventListener('click' , function(){ cons...
  • 箭头函数this指向:反之箭头函数的this是在定义的时候就确定了 例子1: 因为normalButton的点击事件绑定了normalFunction这个函数,所以函数里面的this动态指向了normalButton 箭头函数的this是函数...
  • JS 箭头函数this指向

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,756
精华内容 18,302
关键字:

箭头函数的this指向谁