JavaScript：this的指向

sPeng 发布于2019-08-23 13:47 / 888人阅读

摘要：内联函数中的指向事件发生的元素在弹出框中显示事件处理函数中的当一个函数被用作事件处理函数时，它的指向触发事件的元素

理解JS中this的指向

每个函数都有它自己的this值，在绝大多数情况下，this指向调用了函数的那个对象。
为了自己更加清楚地认识this的指向，我总结出了以下几种情况：

全局环境中的this

无论是否处于严格模式，在全局环境中（或者理解为在任何函数体的外部）this 都指代全局对象:

console.log(this); //全局对象

var num = 100;
console.log(this.num); // 100

函数内部中的this

在全局环境中调用函数，函数内部的this指向有以下两种情况：

在非严格模式下，this的值等于全局对象：

function temp(){
    return this;
};
console.log(temp()); //全局对象

在严格模式下，由于this并没有被提前定义，所以，this的值等于undefined：

function temp(){
    "use strict";
    return this;
};
console.log(temp()); //undefined

用apply和call方法可以指定this的值：

var obj = {
    name: "Tom"
};

function temp(){
    "use strict";
    return this;
};

console.log(temp.call(obj)); //{name: "Tom"}

补充知识点：在严格模式下，通过this传递给一个函数的值不会被强制转换为一个对象:

function temp(){
    "use strict"; 
    return this
}
console.log(temp.call(true)); // true
console.log(temp.call(56)); // 56
console.log(temp.apply(null)); //

ES6箭头函数中的this

箭头函数不会创建自己的this,它只会从自己所处的作用域链的上一层继承this。

例1：箭头函数没有自己的this指针，通过call或apply方法调用一个箭头函数时，为this绑定特定的值是无效的：

var name = "window";

var obj = {
    name: "Tom"
};

var temp = () => {
    return this.name;
};

console.log(temp.call(obj)); //window

箭头函数是在全局环境中调用的，它上一层的this指向全局对象，所以，它的this也指向全局对象。

例2：在函数内部创建的箭头函数，其this指向等同于包含函数的this指向：

name = "window";

let obj = {
    name: "Tom",
    test: function(){
        let temp = (()=>{
          return this.name;
        });
        return temp;
    }
};

console.log(obj.test()()); //Tom

包含函数作为对象里面的方法被调用时，它的this指向调用它的对象obj，所以，箭头函数的this也指向obj。

name = "window";

let obj = {
    name: "Tom",
    test: function(){
        let temp = (()=>{
          return this.name;
        });
        return temp;
    }
};

let a = obj.test;
console.log(a()()); //window

包含函数被赋值给一个全局变量，之后再在全局环境中调用，显然，此时它的this指向调用它的全局对象，所以，箭头函数的this也指向全局对象。

例3：明白了箭头函数的this指向原理，在回调函数中就不用写这样的代码了：var that = this，这里以setTimeout的回调函数为例：

不用箭头函数:

var name = "outer";

var obj = {
    name: "Tom"
};

function temp(){
    let that = this;
    setTimeout(function(){
        console.log(that.name);
    },1000);
}

temp.call(obj); //Tom

使用箭头函数:

var name = "outer";

var obj = {
    name: "Tom"
};

function temp(){
    setTimeout(() => {
        console.log(this.name);
    },1000);
}

temp.call(obj); // Tom

作为对象的方法中的this

对象中函数的this指向调用函数的那个对象，并且是离得最近的那个对象：

name = "window";

let obj1 = {
    name: "1",
    test: function(){
        return this.name;
    },
    other: {
        name: "2"
    }
};

obj1.other.test = obj1.test;

console.log(obj1.test()); // 1
console.log(obj1.other.test()); //2

let aa = obj1.test;
console.log(aa()); //全局对象

构造函数中的this

构造函数中的this指向创建的新对象:

function Person(name){
    this.name = name;
};
let child = new Person("Tom");

补充知识点：new的过程到底发生了什么：

创建一个新的对象child;

将构造函数的作用域赋给对象，即构造函数中的this指向child;

执行构造函数中的操作；

返回对象child({name: "Tom"})。

内联函数中的this

指向事件发生的DOM元素:

    
     // 在弹出框中显示：btn

Dom事件处理函数中的this

当一个函数被用作事件处理函数时，它的this指向触发事件的元素:

海外云主机私有云 this的指向 javascript的this 改变this指向 javaScript中的this

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

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

javascript技术难点（三）之this、new、apply和call详解

摘要：第四点也要着重讲下，记住构造函数被操作，要让正常作用最好不能在构造函数里 4) this、new、call和apply的相关问题讲解this指针的原理是个很复杂的问题，如果我们从javascript里this的实现机制来说明this，很多朋友可能会越来越糊涂，因此本篇打算换一个思路从应用的角度来讲解this指针，从这个角度理解this指针更加有现实意义。下面我们看看在ja...

ghnor 2019-08-21 10:27 评论0 收藏0
我对JavaScript中this的一些理解

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

focusj 2019-08-23 15:23 评论0 收藏0
学习JavaScript之this,call,apply

摘要：在全局对象中调用，自然读取的是全局对象的值构造器调用说明作为构造器调用时，指向返回的这个对象。最直观的表现就是，去看一些优秀框架的源代码时，不再是被绕的晕乎乎的。学习起因：在之前的JavaScript学习中，this,call,apply总是让我感到迷惑，但是他们的运用又非常的广泛。遂专门花了一天，来弄懂JavaScript的this,call,apply。中途参考的书籍也很多，以...

wenhai.he 2019-08-19 17:30 评论0 收藏0
JavaScript 中 this 的指向问题

摘要：首发个人博客中的，大家都用过。箭头函数，词法作用域中的简单的说，箭头函数中的，会绑定到函数外也就是上一层作用域中的，函数外的指向哪，箭头函数中的就指向哪。首发个人博客 JavaScript 中的 this ，大家都用过。但是它到底指向哪里呢？今天在阅读《你不知道的JavaScript (上卷)》再结合自己平时看的博客，对它又有了新的认识，在此来做个小结，再碰到 this ,就再也不...

DTeam 2019-08-23 12:19 评论0 收藏0
轻松搞定javascript中this的指向

摘要：调用在中，通过的形式调用一个构造函数，会创建这个构造函数实例，而这个实例的指向创建的这个实例。如下例所示，在构造函数内部使用并没有改变全局变量的值。显然，箭头函数是不能用来做构造函数。　　关于javascript中this指向的问题，现总结如下，如有不正确，欢迎指正。　　javascript中，this的指向并不是在函数定义的时候确定的，而是在其被调用的时候确定的。也就是说，函数的...

shinezejian 2019-08-23 12:14 评论0 收藏0
理解 JavaScript this

摘要：回调函数在回调函数中的指向也会发生变化。在闭包回调函数赋值等场景下我们都可以利用来改变的指向，以达到我们的预期。文章参考系列文章理解闭包理解执行栈理解作用域理解数据类型与变量原文发布在我的公众号，点击查看。这是本系列的第 5 篇文章。还记得上一篇文章中的闭包吗？点击查看文章理解 JavaScript 闭包。在聊 this 之前，先来复习一下闭包： var name = Nei...

zombieda 2019-08-23 14:10 评论0 收藏0