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中函数不适合使用箭头函数。

  • 相关阅读:
    Entity SQL 初入
    ObjectQuery查询及方法
    Entity Framework 的事务 DbTransaction
    Construct Binary Tree from Preorder and Inorder Traversal
    Reverse Linked List
    Best Time to Buy and Sell Stock
    Remove Duplicates from Sorted Array II
    Reverse Integer
    Implement Stack using Queues
    C++中const限定符的应用
  • 原文地址:https://www.cnblogs.com/zxf906/p/14975041.html
Copyright © 2011-2022 走看看