美文网首页JavaScript 基础与提高
JavaScript 坑与技巧:this

JavaScript 坑与技巧:this

作者: soojade | 来源:发表于2017-02-06 16:45 被阅读12次

    this

    在方法内部的函数中使用this

    'use strict';
    
    var xiaoming = {
        name: '小明',
        birth: 1990,
        age: function () {
            function getAgeFromBirth() {
                var y = new Date().getFullYear();
                return y - this.birth;
            }
            return getAgeFromBirth();
        }
    };
    
    xiaoming.age(); // Uncaught TypeError: Cannot read property 'birth' of undefined
    

    由于this指针只在age方法的函数内指向xiaoming,在函数内部定义的函数,this又指向undefined了!(在非strict模式下,它重新指向全局对象window!)

    修复的方法可以声明一个that变量来捕获this

    var xiaoming = {
        name: '小明',
        birth: 1990,
        age: function () {
            var that = this; // 在方法内部一开始就捕获this
            function getAgeFromBirth() {
                var y = new Date().getFullYear();
                return y - that.birth; // 用that而不是this
            }
            return getAgeFromBirth();
        }
    };
    
    xiaoming.age(); // 25
    

    也可以使用箭头函数:

    var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        }
    };
    obj.getAge(); // 25
    

    由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

    var obj = {
        birth: 1990,
        getAge: function (year) {
            var b = this.birth; // 1990
            var fn = (y) => y - this.birth; // this.birth仍是1990
            return fn.call({birth:2000}, year);
        }
    };
    obj.getAge(2015); // 25
    

    注意在对象中使用箭头函数定义属性时,this的指向,例如:

    let a = 10;
    let obj = {
      a: 2,
      func: () => console.log(this.a) // 或者console.log(a)  调用结果都是指向全局的 a
    }
    

    所以要this指向对象就不要使用箭头函数定义属性方法:

    let obj = {
      a: 2,
    func: function(){
      console.log(this.a); // 2
    }
    }
    

    相关文章

      网友评论

        本文标题:JavaScript 坑与技巧:this

        本文链接:https://www.haomeiwen.com/subject/pxduittx.html