标签：输出 console log 浅聊 JavaScript ascend jonas calcAge

今天来简单学习一下JavaScript中的this关键字。

(注：所有代码均在"strict mode"环境下运行)

1.全局作用域

console.log(this); //global scope

输出结果为Window对象

2.函数表达式

const calcAge=function (birthYear){
    console.log(2037-birthYear);
    console.log(this);
}

calcAge(2004);

注意到this输出为undefined

3.箭头函数

const calcAgeArrow=(birthYear)=>{
    console.log(2037-birthYear);
    console.log(this);
}

calcAgeArrow(2004);

输出结果：

我们注意到与函数表达式输出的this不同，箭头函数输出的this为Window对象，跟第一点中的this相同，这是怎么回事呢？

其实，箭头函数它没有属于自己的this关键字，这里输出的this其实是父作用域即全局作用域中的this，即为Window对象，所以与第一点中的this相同。

4.对象中的this

const jonas={
    year:1991,
    calcAge:function (){
        console.log(this);
        console.log(2037-this.year);
    }
}

jonas.calcAge();

输出结果：

符合直觉，但是需要注意this是动态的，不是静态、一成不变的。比如我新创建一个对象ascend，并把jonas的calcAge方法赋给ascend，

const ascend={
    year:2017
};

ascend.calcAge=jonas.calcAge;
ascend.calcAge();

输出结果：

显然，这里的this就是指向ascend，而不再是jonas了。

此外，还有Event listener中的this，new、call、apply、bind中的this等等，之后会单独出文章讨论。下面简单总结一下：

最后，需要注意，this不指向函数本身，也不是它的变量环境！

标签：输出,console,log,浅聊,JavaScript,ascend,jonas,calcAge
来源： https://www.cnblogs.com/ascendho/p/16558508.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。