精华内容
下载资源
问答
  • 箭头函数 this

    2021-03-09 01:48:20
    为了与后面说到的箭头函数相区别,我们先把这样的函数叫做常规函数,常规函数既可以用声明式写法也可以用赋值式写法。例子:function test(name) { //声明式写法console.log(name)}test('Jerry')let test2= f...

    一、JS中函数的写法

    1.常规函数的写法

    在ES6语法之前,JS中的函数由function关键字、params参数和被花括号包裹的函数体组成。为了与后面说到的箭头函数相区别,我们先把这样的函数叫做常规函数,常规函数既可以用声明式写法也可以用赋值式写法。例子:

    function test(name) { //声明式写法

    console.log(name)

    }

    test('Jerry')

    let test2= function(name) { //赋值式写法

    console.log(name)

    }

    test2('Tom')

    2. 箭头函数的写法

    ES6箭头函数的引入,使函数的写法变的更加简洁,但在书写上要遵循一定的规则。

    规则一:箭头函数只能用赋值式写法,不能用声明式写法

    const test = (name) =>{

    console.log(name)

    }

    test('Jerry')

    规则二:如果参数只有一个,可以不加括号,如果没有参数或者参数多于一个就需要加括号

    const test = name =>{

    console.log(name)

    }

    test('Jerry')

    const test2= (name1, name2) =>{

    console.log(name1+ ' and ' +name2)

    }

    test2('Tom', 'Jerry')

    规则三:如果函数体只有一句话,可以不加花括号

    const test = name => console.log(name)

    规则四:如果函数体没有括号,可以不写return,箭头函数会帮你return

    const add = (p1, p2) => p1 +p2

    add(10, 25)

    记住:函数体的花括号与return关键字同在。

    从以上的例子我们可以看出,箭头函数对常规函数的圆括号和花括号都进行了简化。除了这些简化,箭头函数对于常规函数最大的优化之处在于this。

    二、理解常规函数中this

    在探讨箭头函数对于this的优化之前,我们先得明白this究竟是什么,以及它是如何使用的。this是使用call方法调用函数时传递的第一个参数,它可以在函数调用时修改,在函数没有调用的时候,this的值是无法确定。

    如果没有使用过call方法来调用函数的话,上面的对于this的定义可能不太明白。那么我们需要先理解函数调用的两种方法。

    1. 纯粹的函数调用

    第一种方法最常见,例子如下:

    functiontest(name) {

    console.log(name)

    console.log(this)

    }

    test('Jerry') //调用函数

    这种方法我们使用最多,但是这种函数调用方法只是一种简写,它完整的写法是下面这样的:

    functiontest(name) {

    console.log(name)

    console.log(this)

    }

    test.call(undefined,'Tom')

    注意到上面调用函数的call方法了吗?call方法接收的第一个参数就是this,这里我们传了一个undefined。那么,依据定义,函数执行了之后打出来的this会是undefined吗?也不是。

    如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)。

    所以这里我们打出来的this是Window对象。

    2. 对象中函数的调用

    直接看例子:

    const obj ={

    name:'Jerry',

    greet:function() {

    console.log(this.name)

    }

    }

    obj.greet()//第一种调用方法

    obj.greet.call(obj) //第二种调用方法

    例子里第一种调用方法只是第二种调用方法的语法糖,第二种才是完整的调用方法,而且第二种方法厉害的地方在于它可以手动指定this。

    手动指定this的例子:

    const obj ={

    name:'Jerry',

    greet:function() {

    console.log(this.name)

    }

    }

    obj.greet.call({name:'Spike'}) //打出来的是 Spike

    3. 构造函数中this

    构造函数里的this稍微有点特殊,每个构造函数在new之后都会返回一个对象,这个对象就是this,也就是context上下文。

    functionTest() {this.name = 'Tom'}

    let p= newTest()

    console.log(typeof p) //object

    console.log(p.name) //Tom

    4. window.setTimeout()和window.setInterval()中函数的调用

    window.setTimeout()和window.setInterval()的函数中的this有些特殊,里面的this默认是window对象。

    简单总结一下:函数完整的调用方法是使用call方法,包括

    test.call(context, name)和

    obj.greet.call(context,name),这里的context就是函数调用时的上下文,也就是this,只不过这个this是可以通过call方法来修改的;构造函数稍微特殊一点,它的this直接指向new之后返回的对象;

    window.setTimeout()和

    window.setInterval()默认的是this是window对象。

    三、理解箭头函数中的this

    上面关于this讲了很多,this是函数用call方法调用时传递的第一个参数,而且它还可以手动更改,这样要确定this的值就太麻烦了。不过,箭头函数的出现给我们确定this帮了一些忙。

    1. 箭头函数的特性一:默认绑定外层this

    上面提到:this的值是可以用call方法修改的,而且只有在调用的时候我们才能确定this的值。而当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的。

    不使用箭头函数例子:

    const obj ={

    a:function() { console.log(this) }

    }

    obj.a()//打出的是obj对象

    使用箭头函数的例子:

    const obj ={

    a: ()=>{

    console.log(this)

    }

    }

    obj.a()//打出来的是window

    在使用箭头函数的例子里,因为箭头函数默认不会使用自己的this,而是会和外层的this保持一致,最外层的this就是window对象。

    2. 箭头函数的特性二:不能用call方法修改里面的this

    这个也很好理解,我们之前一直在说,函数的this可以用call方法来手动指定,而为了减少this的复杂性,箭头函数无法用call方法来指定this。

    const obj ={

    a: ()=>{

    console.log(this)

    }

    }

    obj.a.call('123') //打出来的结果依然是window对象

    因为上文我们说到window.setTimeout()中函数里的this默认是window,我们也可以通过箭头函数使它的this和外层的this保持一致:

    window.setTimeout()的例子:

    const obj ={

    a:function() {

    console.log(this)

    window.setTimeout(()=>{

    console.log(this)

    },1000)

    }

    }

    obj.a.call(obj)//第一个this是obj对象,第二个this还是obj对象

    想必大家明白了,函数obj.a没有使用箭头函数,因为它的this还是obj,而setTimeout里的函数使用了箭头函数,所以它会和外层的this保持一致,也是obj;如果setTimeout里的函数没有使用箭头函数,那么它打出来的应该是window对象。

    四、多层对象嵌套里函数的this

    箭头函数里的this是和外层保持一致的,但是如果这个外层有好多层,那它是和哪层保持一致呢?

    直接上例子:

    const obj ={

    a:function() { console.log(this) },

    b: {

    c:function() {console.log(this)}

    }

    }

    obj.a()//打出的是obj对象, 相当于obj.a.call(obj)

    obj.b.c() //打出的是obj.b对象, 相当于obj.b.c.call(obj.b)

    上面的代码都符合直觉,接下来把obj.b.c对应的函数换成箭头函数,结果如下:

    const obj ={

    a:function() { console.log(this) },

    b: {

    c: ()=> {console.log(this)}

    }

    }

    obj.a()//没有使用箭头函数打出的是obj

    obj.b.c() //打出的是window对象!!

    MDN官方文档里面描述箭头函数this定义的时候,描述的是“箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。",所以最后一个例子,打出window对象的原因,是window对象就是它的上一层this,而多层嵌套只是对象嵌套,这时候没有作用域链的嵌套。

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

    2021-04-11 13:29:50
    箭头函数this指向最近作用域中的this 普通函数this指向调用他的对象, 箭头函数this指向最近作用域中的this(如果最近作用域没有this再向外一层一层的找直到找到最近的this) let obj = { aaa(){ console.log...

    箭头函数this指向最近作用域中的this

    普通函数this指向调用他的对象,
    箭头函数this指向最近作用域中的this(如果最近作用域没有this再向外一层一层的找直到找到最近的this)

    let obj = {
    	aaa(){
    		console.log(this)//flag1:obj.aaa()所以this->obj
    		setTimeout(function(){
    			console.log(this)//flag2:this->window
    			setTimeout(function(){
    				console.log(this);//this->window
    			})
    			setTimeout(()=>{
    				console.log(this)//箭头函数this指向最近的flag2处的所以this->window
    			})
    		})
    		setTimeout(()=>{
    			console.log(this)//箭头函数this指向最近的flag1处的所以this->obj
    			setTimeout(()=>{
    				console.log(this);//箭头函数this指向最近的flag1处的所以this->obj
    			})
    		})
    	}
    }
    obj.aaa()
    

    如果 obj.aaa() 改成 let fn = obj.aaa; fn(),此时所有的this都指向window

    展开全文
  • js中this指向的四种规则+ 箭头函数this指向 四种规则分别是:默认、隐式、显式(call、apply、bind)、new 对象

    无论项目开发还是应付面试,this指向问题你都没办法回避,花几分钟搞定它!我尽可能的用简单的语言来描述。


    1. 默认this绑定window

    当在全局的上下文中调用this,此时this指向是默认的window。

    <body>
        <script>
            let name = '哈哈'
            console.log(this)  //这里的this 处于全局上下文 指向的便是window
            console.log(this.name) // 此时this.name 相当于window.name, 即全局作用域下的name ‘哈哈’
        </script>
    </body>
    

    输出结果为:
    this默认绑定window

    2. 隐式绑定this

    隐式绑定是指,谁调用就指向谁!
    (其实与第一种默认绑定原理相同,第一种就是在window对象中调用的this)

    <body>
        
        <script>
            let name = '哈哈'
            let obj = {
                name:"嘿嘿",
                getName: function(){
                    console.log(this.name)  // 此时的this便是obj , 因此输出是嘿嘿
                }
            }
            obj.getName()  
        </script>
    </body>
    

    注意:
    如果再getName中再加一个函数,test()

    <body>
        <script>
            let name = '哈哈'
            let obj = {
                name:"嘿嘿",
                getName: function(){
                    console.log(this)
                    console.log(this.name)
    
                    function test(){
                        console.log(this)
                        console.log(this.name)      
                    }
                    test()
                }
            }
            obj.getName()
        </script>
    </body>
    

    输出结果如下:
    在这里插入图片描述
    这表明,getName中的this指向的是obj,但test()中的this指向的是window! 也就是说虽然test()在getNmae内部,但两个this没关系,仍然是谁调用指向谁,test()没有指明调用者相当于默认为window。

    另外补充几个特例:

        <script>
            // 一些api可以指定this指向
            var obj2 = {name:"嘻嘻"}
            var arr=[1,2,12]
            // 对于arr.forEach 函数 ,当不传第二个参数时,默认this指向window
            arr.forEach(function(item,index,arr){
                console.log(this)
            })
            // 当有第二个参数时,指向指定的obj2
            arr.forEach(function(item,index,arr){
                console.log(this)
            },obj2)
            // sort 也是指向window
            arr.sort(function(){
                console.log(this)
            })
        </script>
    

    结果:
    在这里插入图片描述

    3. 显式绑定 call、apply、bind

    三者都是用来显式指定this的指向,主要区别在于传参方式不同

       <script>
           console.log('88888')
           var obj3 = {
               name:'吼吼'
           }
           function f3(a,b,c){
               console.log(a,b,c)
               console.log("我的this是",this)
           }
    
           f3(1,2,3)
    
           f3.call(obj3,4,5,"call")
           f3.apply(obj3,[4,5,"apply"])
           f3.bind(obj3)(4,5,"bind")  // bind特殊点是,其返回的是个函数
       </script>
    

    执行结果:
    在这里插入图片描述
    注:当指定的对象不存在时,this仍指向默认的window
    比如:call(undefind)

    4. new绑定

    指使用构造函数创建对象时,this指向新创建的对象
    var obj = new foo() 这时this指向新创建的对象obj

    5. 优先级 new>显式>隐式>默认

    6. 箭头函数

    箭头函数是ES6新增的创建函数方法。但箭头函数和普通函数不同,箭头函数内部是没有this的指向的,箭头函数中的this实际上是向外层一级一级的查找作用域中的this(直到this有定义)
    看代码比较好理解:

        <script>
            console.log("箭头函数")
    
            function foo(){
                console.log(this)   // 因被obj4调用,所以this指的是obj4
    
                var test2 = function(){
                    console.log(this)   // 上面以及分析过了,此处指的是 window
                }
                var test = ()=> {
                    console.log(this)   // 但是这里的this 指向的仍是 obj4 与父级作用域的this是相同的
                }
    
    
                test()
                test2()
            }
    
            var obj4 = {
                a:"哦哦",
                foo:foo
            }
    
            obj4.foo()
    
        </script>
    
    展开全文
  • 微信小程序使用箭头函数this为undefined,取不到this 现象:在自定义函数中使用箭头函数,此时this为undefined 原因:箭头函数没有自己的this和arguments。如果在page下定义的方法箭头函数里面的this会指向...

    微信小程序使用箭头函数this为undefined,取不到this

     

    现象:在自定义函数中使用箭头函数,此时this为undefined

    原因:箭头函数没有自己的this和arguments。如果在page下定义的方法箭头函数里面的this会指向page外,这个this是undefined的。

    处理:使用普通函数

    箭头函数详情参考 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

    展开全文
  • 箭头函数:本身没有this,是从直接调用者(主要是向上找上级函数作用域)上面继承下来的,如果没有,就指向全局作用域window 举几个例子 //sayA函数没有宿主对象,this就是指向window,window.name = un
  • 箭头函数没有this的指向的 在es5中 this指向可能会引起以下的问题: let pagg={ id:123, init:function(){ document.addEventListener('click',function(event){ this.dos(event.type) })
  • Vue 箭头函数 this 问题

    2021-08-26 10:21:10
    在一个普通函数中,this归属于函数的“拥有者”。由于我们是在vue组件里定义的,那么this归属于vue组件。接下来我将解释this的作用域。 大多数情况下你在vue里最好使用普通函数,...首先我们要明白在箭头函数中,this.
  • 众所周知,ES6的箭头函数能解决this指向的问题。能解决this内外指向不一致的问题。 箭头函数体内的this对象,就是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象。 箭头函数this取决于...
  • vue箭头函数 this

    2021-12-10 21:38:22
    vue箭头函数 this 指向的是最靠近自己的外层this
  • 箭头函数外函数的this在其执行时才被确定,指向其调用者。 1. 当函数作为方法被调用时指向它的调用者 例如 let obj = { a: 2, b: function() { console.log(this); console.log(this.a); } } let fn = obj.b;...
  • 箭头函数详讲(箭头函数中的this) ...箭头函数this的几种解释说法 1.当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的。 2.箭头函数中的this引
  • js中普通函数和箭头函数this指向问题js中普通函数和箭头函数this指向问题1.普通函数中的this指向2.箭头函数this指向 js中普通函数和箭头函数this指向问题 this指向问题,一直是困扰大家的难题,也是面试中常...
  • 前言this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,遂有此文在非箭头函数下, this 指向调用其所在函数的对象,而且是离谁近就是指向谁(此...
  • 1.箭头函数中的this是在定义函数的时候绑定的,而不是执行函数的时候绑定。函数内部没有绑定this的机制,this是继承自父执行上下文中的this。即外层代码块的this。 2.剪头函数写在属性里面和写在属性的function里面...
  • 首先来一道题目 var go =console; var langue ={ name: '', php(){ var t = this; go.info(t.name); }, python: () =>{ let t = this; go.info(t.name);...很好理解这种函数声明,this指向langu
  • 一、函数this指向 this是每一个函数都 一定有的关键词 this本质上是一个对象数据结构 用于指向数据 通过this关键词,可以调用操作这个 数据 1、this指向window 声明式函数 匿名函数 定时器 延时器 forEach...
  • 关于箭头函数改变this指向

    千次阅读 2021-01-04 16:27:53
    函数this指向只与其 申明函数的作用域和调用路径有关系 函数this与调用路径的关系 正常情况下this指向调用其的对象 let c = {a:123} c.b = function(){ console.log(this.a) } c.b() //123 哪怕不是在该...
  • ECMAScript6-ES6箭头函数箭头函数语法、箭头函数里的this指向
  • ES6箭头函数this 首先看普通函数 const person = { name: 'tom', sayHi: function () { console.log(`hi, my name is ${this.name}`); } } person.sayHi(); 输出结果: hi, my name is tom 普通函数中,...
  • VUE - 箭头函数this

    2021-12-17 06:22:37
    对于正常函数,谁调用的它,this就指向谁,而箭头函数没有this,它的this指向一般就是上下文中,与谁调用它没关系。 但是在Vue实例中,methods中如果用的是正常函数,那么它的this就指向Vue实例;如果是箭头函数,...
  • 箭头函树相当于在函数作用域内锁定上下文this; class A { public name: string; constructor() { this.name = 'a'; } public a() { console.log(this.name); } } class B { public name: string; ...
  • 箭头函数this的指向

    2021-06-11 15:20:17
    var cat={ func1:()=>{ console.log("arrow1",this); }, func2:function(){ console.log("average",this); var func3=()=>{ console.log("arrowIn",this); } func3(); } }
  • 箭头函数中,this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。 箭头...
  • vue中的箭头函数this

    2021-07-05 14:34:38
    在vue中箭头函数没有自己的this,所以,当箭头函数中有this的时候他会往外找,从而确定它的this的值 vm.$watch('firstName',{ immediate:true, //若immediate为true则handler在初始化时,就会调用一次,以后就看...
  • setInterval第一次不执行与setInterval内函数为普通函数与箭头函数 this指向问题 setInterval第一次不执行 setInterval第一次不执行只要调用setInterval前执行以下函数就行(就这样就行,不用想什么骚操作), 千万...
  • 情形1:方法中返回箭头函数 x = 11 obj = { x:22, dbl:function(){ return ()=>{return this.x} } } console.log(obj.dbl()()) //答案为22 情形2:方法中返回匿名函数 x = 11 obj = { x:22, dbl:function(){ ...
  • <ul> <li>第一个li</li>...1.普通函数 当用function(){}时点击对应的li标签,浏览器控制台中返回的this为对应的li对象。 js示例代码: <!--js--> <script type
  • ES6箭头函数this指向问题 今天依旧给大家带来的是一道前端的面试题,有关的是ES6中箭头函数this指向问题,以及它能否被call,apply或者bind方法来改变。 箭头函数this特性 正式解决问题前,我们需要先来了解下...
  • [ES6] 箭头函数 this

    2021-09-14 20:46:29
    箭头函数含义 使用 ()=>{} 替换 匿名函数的语法形式 也就是 使用 ()=>{} 替换 function(){} 箭头函数的简写语法形式 1, 如果只有一个形参 可以 不写 ( ) 小括号 2, 只有一行执行程序 可以 不写 { } 大括号 ...
  • 在网上见到了很多对箭头函数this下定义的 有个很离谱:定义箭头函数时所在的作用域指向的对象。 咱对这种就着结果下定义的阮一峰式教学嗤之以鼻 今天用微信阅读重温红书的时候也碰到了个离谱的评论 这个评论说:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,950
精华内容 31,180
关键字:

箭头函数this