zoukankan      html  css  js  c++  java
  • 转 JS 中的 this

    转载至:https://segmentfault.com/a/1190000009215974

    this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScript》和《JavaScript语言精粹与编程实践》,让我对this的问题豁然开朗。故写下此篇文章,分享一下我的心得。

    隐式绑定

    关于this,一般来说,谁调用了方法,该方法的this就指向谁,如:

    function foo(){
        console.log(this.a)
    }
    
    var a = 3;
    
    var obj = {
        a: 2,
        foo: foo
    };
    
    obj.foo(); // 输出2,因为是obj调用的foo,所以foo的this指向了obj,而obj.a = 2
    

      

     

    如果存在多次调用,对象属性引用链只有上一层或者说最后一层在调用位置中起作用,如:

    function foo() {
        console.log( this.a )
    }
    
    var obj2 = { 
        a: 42,
        foo: foo
    }
    
    var obj1 = {
        a: 2,
        obj2: obj2
    }
    
    obj1.obj2.foo(); // 42
    

      

     

    隐式丢失

    一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象,也就是说他回应用默认绑定,从而把this绑定到全局对象或者undefined上,取决于是否是严格模式。

    function foo() {
        console.log( this.a )
    }
    
    var obj1 = {
        a: 2,
        foo: foo
    }
    
    var bar = obj1.foo; // 函数别名!
    
    var a = "oops, global"; // a是全局对象的属性
    
    bar(); // "oops, global"
    

      

     

    虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar()其实是一个不带任何修饰的函数调用,因此应用了默认绑定

    一个更微妙、更常见并且更出乎意料的情况发生在传入回调函数时

    function foo() {
        console.log( this.a )
    }
    
    function doFoo( fn ){
        // fn 其实引用的是 foo
        fn(); // <-- 调用位置!
    }
    
    var obj = {
        a: 2,
        foo: foo
    }
    
    var a = "oops, global"; // a是全局对象的属性
    
    doFoo( obj.foo ); // "oops, global"
  • 相关阅读:
    SQLSERVER跨库访问
    Mybatis开发的几个主要事项
    jqGrid参数
    WPF 从当前层次遍历查找 子控件及父控件
    c# 获取图像像素
    异步FIFO的FPGA实现
    note5文档流
    note3css 的padding属性
    note3clip:rect('top', 'right', 'bottom', 'left')是什么意思
    怎样查看端口被占用情况
  • 原文地址:https://www.cnblogs.com/sunyaaa/p/6783274.html
Copyright © 2011-2022 走看看