zoukankan      html  css  js  c++  java
  • this指向

    javascript中 this指向大概分为五种情况

    判断函数中this的指向(绑定),看this的调用位置

    以下1-4优先级依次递减:

    1.通过new初始化对象: 过程中会绑定this到这个新创建的对象,this指向new后面跟的对象。

    2.专门做的显示绑定:(由call() ,apply(),bind()等方法调用,会绑定到作为参数指定的对象。

    3.最常见的情况:没有1 ,2的情况出现,直接绑定到上下文对象,好比哪个对象调用this所在的方法,this就指向这个对象。ps:若存在对象引用链,则只有上一层或者说最后一层在调用位置中有作用。

    function f(){
        console.log(this.a);
    }
    
    var o1 = {
        a:1,
        o2:o2
    };
    
    var o2 ={
        a:2,
        f:f
    }
    
    o1.o2.f()  //2       this指向引用链最后一层或者说this所在函数f中的上一层对象即o2,故输出为2

    4.默认调用即独立函数调用:这里我初步以为同3 ,独立函数调用即在全局对象windows中调用,则绑定到(指向)windows对象,前提是非严格模式下;

    若是在严格模式下则绑定到undefined,然而与this指向谁取决于其调用位置不同,严格模式必须作用于包括定义this时的位置,若仅仅在调用位置使用严格模式,并不能让this指向undefined,这种情况下this将仍然指向全局对象。

    function f(){
        console.log(this.a);
    }
    var a = 100;
    
    (function(){
        "user strict";
        f();  //100   只在调用位置使用严格模式,并不能影响this仍然指向全局对象。
    
    })()
    
    、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
    
    function f(){
         "user strict";         //this定义位置使用严格模式,这与this绑定取决于调用位置是不同的。
        console.log(this.a);
    }
    var a = 100;
    
    
       
     f();  //this is undefined
    
    }

    5.es6中的箭头函数内的this:

    An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules.

    根据文档所说,箭头函数中没有设置绑定this,不使用以上四种绑定规则,它的取值遵循普通变量一样的规则,根据外层函数作用域或者全局作用域来决定this。

    function f(){
          return (a)=>{
            console.log(this.a); 
          }
        }
        var o1={
          a:1
        }
        var o2={
          a:2
        }
    
        var bar = f.call(o1) //this调用时被绑定到o1上,即便后面再bar.call(o2),输出的this仍然指向o1,箭头函数的this绑定无法修改。
        bar.call(o2)  // 1   
     

    按理,箭头函数适用于各类回调函数中如事件处理器和定时器等。(setTimeout()调用的代码会在完全分离的执行环境上,这会导致这些代码中包含的 this 关键字会指向全局对象

    对于需要使用object.method()方式调用的函数,不使用箭头函数,因为对象方法中所使用的this值有确定的含义,指的就是object本身。

    vue中的this:Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options,是因为Vue在钩子函数执行时使用call和apply更改了this的指向,使得我们在Vue的各个钩子函数,created,mounted等函数中取到的this指向Vue的实例,包括methods中的函数,也直接动态绑定到了vue实例上。由此可得知methods中函数不适合使用箭头函数。

  • 相关阅读:
    PIE-Basic 频率域滤波
    使用CefSharp前端后台交换
    CefSharp F12打开DevTools查看console js和c#方法互相调用
    js和C#互相调用
    C# 矢量图EMF 总结
    key
    关于IdentityServer4不使用MVC页面进行登录(跨域发送验证请求)的一些问题(前后端分离的验证)
    C#版的省份编码字典
    EFCore显示加载模式下,自动包含导航属性(只包含第一层的导航属性)的方法
    EFCore批量实现全局查询筛选器
  • 原文地址:https://www.cnblogs.com/zxf906/p/14975041.html
Copyright © 2011-2022 走看看