关于JavaScript中this的相关知识点

王伟廷发布于2019-08-19 18:31 / 3266人阅读

摘要：关于提供了一种优雅的方式来隐式传递一个对象引用，因此可以将设计得更加简洁并且易于复用。对于的误解新手会误认为指向函数本身。这时候，可以使用的方法强制使指向函数对象。的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

关于this

this 提供了一种优雅的方式来隐式“传递”一个对象引用，因此可以将API设计得更加简洁并且易于复用。

    /*
     *this 隐式传递上下文对象
     */
    function identify() {
        return this.name.toUpperCase();
    }
    
    function speak() {
        var greeting = "Hello, I am " + identify.call(this);
        console.log(greeting);
    }
    var me = {
        name: "kelly"
    }
    var you = {
        name: "lucy"
    }
    identify.call(me); //KELLY
    identify.call(you); //LUCY
    speak.call(me); //Hello, I am KELLY
    speak.call(you); //Hello, I am LUCY

随着使用模式越来越复杂，显式传递上下文对象会让代码变得越来越乱，使用this则不会这样。

对于this的误解

新手会误认为this指向函数本身。

    /*
     *关于this的误解
     */
    function foo(num) {
        console.log("foo: " + num);
        this.count++;
    }
    foo.count = 0;
    var i;
    for (i = 0; i < 10; i++) {
        if (i > 5) {
            foo(i);
        }
    }
    console.log(foo.count); //0

由此可见，浏览器解析语句产生了4条输出，证明foo(...)确实被调用了4次，但是foo.count仍然是0，显然从字面意思来理解this是错误的。
这时候，可以使用Function.call()的方法强制使this指向foo函数对象。

    /*
     *使用function.call()方法使this指向foo函数对象。
     */
    function foo(num) {
        console.log("foo: " + num);
        this.count++;
    }
    foo.count = 0;
    for (i = 0; i < 10; i++) {
        if (i > 5) {
            foo.call(foo, i)
        }
    }
    console.log(foo.count);

this 到底是什么

this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
当一个函数被调用时，会创建一个活动记录。这个记录会包含函数在哪里被调用、函数的调用方式、传入的参数等信息。this就是这个记录的一个属性，会在函数执行的过程中用到。

小结

学习this的第一步是明白this既不指向函数自身也不指向函数的词法作用域，抛开以前错误的假设和理解。
this实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

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

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

聊聊DOM中很重要的一个知识点：事件

摘要：事件事件就是浏览器告知程序，用户的行为，用户点击了页面中的某个按钮或者用户输入用户名或密码等操作可以称为事件事件的类型事件根据使用的场景不同，可以分为如下几种依赖于设备的输入事件键盘事件和鼠标事件，这些事件都是直接和设备相关的独立于设备的输事件事件就是浏览器告知JavaScript程序，用户的行为，用户点击了HTML页面中的某个按钮或者用户输入用户名或密码等操作可以称为事件事件的...

church 2019-08-23 11:42 评论0 收藏0
理解JavaScript的核心知识点：This

摘要：关键字计算为当前执行上下文的属性的值。毫无疑问它将指向了这个前置的对象。构造函数也是同理。严格模式无论调用位置，只取显式给定的上下文绑定的，通过方法传入的第一参数，否则是。其实并不属于特殊规则，是由于各种事件监听定义方式本身造成的。 this 是 JavaScript 中非常重要且使用最广的一个关键字，它的值指向了一个对象的引用。这个引用的结果非常容易引起开发者的误判，所以必须对这个关...

TerryCai 2019-08-23 17:00 评论0 收藏0
JavaScript系列（四） - 收藏集 - 掘金

摘要：函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。 JavaScript 函数式编程 - 前端 - 掘金引言面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言，然而，近几年，函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此，...

cfanr 2019-08-20 16:33 评论0 收藏0
JavaScript函数（二）

摘要：目录函数的声明函数的属性和方法函数的作用域闭包知识点小结关于函数，可以从以下个方面去理解首先，数据类型上看函数在中是一种数据类型，是对象的一种其次，从功能上看函数本质上是一段反复调用的代码块最后，从地位上看函数在中和其他基本数据类型一样，可目录 1.函数的声明 2.函数的属性和方法 3.函数的作用域 4.闭包知识点 5.小结关于函数，可以从以下3个方面去理解：首先，数据类型上看：...

用户84 2019-08-21 11:20 评论0 收藏0
JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0