js中this的理解/this遇上闭包/作用域

相信很多人开始学习js的时候,关于this的理解不是很清晰,并且一般靠直觉…然并卵,直觉这玩意儿不好说…在厌烦了直觉判断后的我,翻阅了很多…好吧,百度了好多文章,下面是我关于this的总结
(1)this的指向在函数定义的时候是确定不了的,只有在执行的时候才能确定this指向;
(2)this最终指向调用它的上一级对象;
(3)一般指向函数的拥有者,特殊的是自执行函数,this指向window
看个栗子就基本明确了

var number = 1;
var obj = {
    number: 2,
    shownum: function() {
        console.log(this.number); 

        (function() {
            console.log(this.number);  

            var obj = {
                number: 3,
                getNum: function() {
                    return this.number;
                }
            }
            console.log(obj.getNum());  
        })();
    }
}
obj.shownum(); //? 

var fun = obj.shownum;
fun(); //?

构造函数的this:

function Engineer() {
    this.skill = "program";
}
var fe = new Engineer();
console.log(fe.skill); //program 调用者是fe  所以this指向了fe

当this碰见return的时候

function Engineer() {
    this.skill = "program";
    return 1;
}
var fe = new Engineer();
console.log(fe.skill); //program
function Engineer() {
    this.skill = "program";
    return {
        skill: 'smile'
    }
}
var fe = new Engineer();
console.log(fe.skill); //smile

是的,构造函数返回一个对象,那么this就会指向返回的对象

function Engineer() {
    this.skill = "program";
    return null;
}
var fe = new Engineer();
console.log(fe.skill); //program

null比较特殊,尽管null也是对象,但这里的this还是会指向函数实例

补充:当this遇上闭包
JavaScript是基于词法(静态)作用域的语言,词法作用域的含义是指在函数定义时就确定了作用域,而不是执行时再确定;而this呢,是运行时的指向,而不是定义时的指向。栗子:

var a = 'win_a';
var scope = 'win_scope';
var obj = {
    a: 'obj_a',
    get: function() {
        var that = this;
        var scope = 'obj_scope';
        return function() {
            return that.a + '&' + scope;
        }
    }
}

alert(obj.get()()); // obj_a&obj_scope
var fun = obj.get;
alert(fun()()); // win_a&obj_scope

这个栗子感觉比较好

var x = 'windows';
    var obj_a = {
        x: 1,
        y: {
            x: 2,
            y: function() {
                return function() {
                    return this.x;
                }
            },
            z: function() {
                return this.x;
            }
        }
    }

    var fun = obj_a.y.y();
    console.log(obj_a.y.z()); // 2
    console.log(obj_a.y.y()()); // windows
    console.log(fun()); // 'windows'
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值