关于JavaScript中this的问题

mgckid 发布于2019-08-22 15:53 / 2460人阅读

摘要：本文主要是自己学习时记录的，仅供参考，如有错误可帮忙提出，谢谢。

本文主要是自己学习时记录的，仅供参考，如有错误可帮忙提出，谢谢。

对象方法的调用：（当一个函数作为一个对象的属性时，我们称它为方法）

var name = "window";
var obj = {
    name: "obj",
    //箭头函数
    sayName: () => {
        console.log(this); // window对象
        console.log(this.name);  // "window"
    },
    // 普通函数
    getName: function(){
        console.log(this); // obj对象
        console.log(this.name); // "obj"
    }
}
obj.sayName();
obj.getName();
var obj_1 = {name: "obj_1"}
obj.sayName.apply(obj_1) // window对象，"window"

正常的函数调用：

// 当函数被当做函数调用时，this是绑定在window对象上面的，这是javaScript语言上设计的错误
// 在ES6的箭头函数，纠正的以上的错误，但是并没有完全纠正错误，
//【箭头函数中的this的绑定在执行上下文的整个封闭函数的this，如果没有封闭的函数将绑定到window上面】

//常见的调用
function m(){
    console.log(this); // window对象
}
m();

var n = () => {
    console.log(this); // window对象
}
n();

//对象方法中函数的this
var name = "window";
var obj = {
    name: "obj",
    sayName: function(){
        console.log(this); // 复习一下，此处为obj对象
        f();
        function f(){
            console.log(this); // window对象
            console.log(this.name); // "window"
        }
        return function(){
            console.log(this); // window对象
            console.log(this.name); // "window"
        }
     }
}
obj.sayName()();

// 用箭头函数看看this
var name = "window";
var obj = {
    name: "obj",
    sayName: function(){
        var f = () => {
            console.log(this); // obj对象
            console.log(this.name); // "obj"
        }
        f();
        return () => {
            console.log(this); // obj对象
            console.log(this.name); // "obj"
        }
     }
}
obj.sayName()();
var obj_1 = {name: "kangkang"};
obj.sayName().apply(obj_1); //和上面输出相同

构造函数中的this：（构造函数不能使用箭头函数，所以不考虑箭头函数）

// 构造函数中的this指向新创建的对象本身

var Person = function(name){
    this.name = name;
}
Person.prototype.getName = fucntion() {
    return this.name;
}
var obj = new Person("kangkang");
obj.getName(); // kangkang

bind/call/apply 改变this的指向这里不想详细介绍

// 由于箭头函数没有自己的this，所以bind、call、apply方法对箭头函数失效

待后续完善......

GPU云服务器云服务器关于javascript的问题 javascript中this详解 javascript的this 关于php的问题

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

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

JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
关于javascript 中的高级定时器的若干问题

摘要：闭包闭包是指有权访问另一个函数作用域中的变量的函数当某个函数被调用时，会创建一个执行环境及相应的作用域链。要注意通过第句声明的这个方法属于构造函数生成的对象，而不属于构造函数的变量对象，也就是说，并不存在于作用域链中。看到评论里有仁兄建议我试试箭头函数，真是受宠若惊，本来写这篇文章也只是想记录写要点给自己日后看的。今天早上看到一篇总结javascript中this的文章JavaScr...

zr_hebo 2019-08-21 11:22 评论0 收藏0
[译] 你想知道的关于 JavaScript 作用域的一切

摘要：原文链接原文作者你想知道的关于作用域的一切译中有许多章节是关于的但是对于初学者来说甚至是一些有经验的开发者这些有关作用域的章节既不直接也不容易理解这篇文章的目的就是为了帮助那些想更深一步学习了解作用域的开发者尤其是当他们听到一些关于作用域的原文链接: Everything you wanted to know about JavaScript scope原文作者: Todd Mott...

Flands 2019-08-19 18:38 评论0 收藏0
JavaScript之关于this对象

摘要：不过匿名函数的执行环境具有全局性，因此其对象通常指向。在闭包中使用对象可能会导致一些问题。这个对象还包含一个方法它返回一个匿名函数，而匿名函数又返回，这个匿名函数就是闭包。伪代码过程在定义匿名函数之前，把对象赋值给了一个名叫的变量。 this对象前言：最近在细读Javascript高级程序设计，对于我而言，中文版，书中很多地方翻译的差强人意，所以用自己所理解的，尝试解读下。如有纰漏...

happyfish 2019-08-23 12:35 评论0 收藏0
【译】javascript的this关键词理解

摘要：在中，当使用关键字调用函数构造函数时，函数构造函数中也有这个概念，但是它不是惟一的规则，而且常常可以引用来自不同执行上下文的不同对象。因此，我们使用调用函数，可以看到这是对象，并且的属性是正常的。一直以来，javascript里边的this都是一个很难理解的东西，之前看的最多的就是阮一峰老师关于this的理解： http://www.ruanyifeng.com/blo... htt...

tainzhi 2019-08-23 17:06 评论0 收藏0