深入理解JavaScript：函数中的this指什么？

fuyi501 发布于2019-08-22 15:21 / 1462人阅读

摘要：到底是什么函数被调用时的位置是动态的箭头函数不在此范围，因为它的是函数定义时的上下文，是静态的判断规则如果是在中调用，则为新创建的对象通过，调用，是之前定的对象第一个参数注意若第一个参数是，则执行第四条判断规则在么某个上下文中调用，是该上下

this到底是什么？

函数被调用时的位置（是动态的！）
(箭头函数不在此范围，因为它的this是函数定义时的上下文，是静态的！)

判断规则

1.如果是在new中调用，this则为新创建的对象
2.通过call，apply调用，this是之前定的对象（第一个参数）
（注意若第一个参数是null，undefined则执行第四条判断规则）
3.在么某个上下文中调用，this是该上下文对象
4.上面3个都不是的话，this是全局对象（严格模式是undefined）

速记

1.new（该函数使用new构造调用了）
2.显式（该函数显示使用call，apply调用）
3.隐式（该函数为某个对象的属性值，作为对象的属性方法调用）
4.默认（无特征，直接调用了）

加深理解

看代码吧～

new绑定

function foo(a){
    this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2

显式绑定

function foo(a){
    this.a = a;
}
var obj = {a:2};
foo.call(obj); // 2

隐式绑定

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

// trap 2or22???
function foo(){
    console.log(this.a);
}
var obj1 = {
    a: 2,
    foo: foo
};
var obj2 = {
    a: 22,
    obj1: obj1
};
obj2.obj1.foo(); // tip 函数foo是谁的属性值呢？

绑定默认

function foo(){
    console.log(this.a);
}
var a = 2;
foo(); // 2

常规考点～

// trap 0or1??? why? 如何打印另外一个值～
function foo(){
    setTimeout(function(){
        console.log(this.a);
    },1000);
}
var obj = {a:1};
var a = 0;
foo.call(obj); // tip 包含this的函数究竟是在哪里被执行的呢？0和1的区别在于？

私有云 GPU服务器深入理解javascript javaScript中的this javascript是指什么 javascript中的函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93398.html

由ES规范学JavaScript(三)：深入理解this

摘要：有三个重要组成部分和。参考小结函数中的是由调用函数的方式决定的。构造函数中的当构造函数通过操作符来调用时，表示正在创建的对象。情况没有明确作用对象的情况下，通常为全局对象例如函数的回调函数，它的就是全局对象。一. this的来源 this是JavaScript的关键字，它最初应该是从Java、C++等面向对象的语言中借鉴来的。比如，在Java中没有函数只有方法，this只能用在类的...

wthee 2019-08-19 17:23 评论0 收藏0
我对JavaScript中this的一些理解

摘要：匿名函数的执行环境具有全局性，因此它的对象通常指向。如果对此有疑惑，可以看知乎上的答案知乎匿名函数的指向为什么是作为对象方法的调用，指向该对象当函数作为某个对象的方法调用时，就指这个函数所在的对象。因为日常工作中经常使用到this，而且在JavaScript中this的指向问题也很容易让人混淆一部分知识。这段时间翻阅了一些书籍也查阅了网上一些资料然后结合自己的经验，为了能让自...

focusj 2019-08-23 15:23 评论0 收藏0
【进阶2-2期】JavaScript深入之从作用域链理解闭包

摘要：使用上一篇文章的例子来说明下自由变量进阶期深入浅出图解作用域链和闭包访问外部的今天是今天是其中既不是参数，也不是局部变量，所以是自由变量。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第二期，本周的主题是作用域闭包，今天是第7天。本计划一共28期，每期重点攻克一个面试重难点，如果你还不了解本进阶计...

simpleapples 2019-08-23 13:47 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
《深入理解ES6》笔记—— JavaScript中的类class（9）

摘要：新建一个类该函数返回一个类的实例给函数传入通过立即调用类构造函数可以创建单例。派生类是指继承自其它类的新类。在构造函数中访问之前要调用，负责初始化。在构造函数中使用通常表示当前的构造函数名。 ES5中的近类结构 ES5以及之前的版本，没有类的概念，但是聪明的JavaScript开发者，为了实现面向对象，创建了特殊的近类结构。 ES5中创建类的方法：新建一个构造函数，定义一个方法并且赋值...

gggggggbong 2019-08-20 18:23 评论0 收藏0