zoukankan      html  css  js  c++  java
  • 【JS】JS中对于this的理解

    一、对this的产生原因分析和了解

    第一:this指的是函数运行时所在的环境(即调用的对象)。
    第二:JavaScript 语言之所以有this的设计,跟内存里面的数据结构有关系(内存存储详细理解参考原文)。

    总结如下:

    对于普通对象的保存:实际对象属性的值就是值;
    对于函数的保存:实际函数属性的值是函数的地址;(而函数本身,可理解为:它不属于任何一个对象,相当于一个全局对象。所以,函数在不同场景下运行,this就是不同的场景了,不过都是执行时的环境)
    同时,函数,可以作为一个参数(值)被调用,被传播。同时,在函数体内部,允许引用当前环境的其他变量(可以引用当前环境的其他变量。但当前环境是不确定的,所以会出现不同的值)

    二、this绑定详解

    this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用。

    2.1 默认绑定(绑定在全局作用域)

    即在调用函数时,函数不带任何修饰,也就是“光秃秃”的调用(即没有任何修饰的调用),就会应用默认绑定规则, 默认绑定指向全局作用域。

    注意:在 javascript 中,如果使用了严格模式,则 this 不能绑定到全局对象。(不是很理解,不过先记录下)

    2.2 隐式绑定

    当函数在调用时,如果函数有所谓的“落脚点”,即有上下文对象(即调用时.前面的对象)时,隐式绑定规则会把函数中的 this 绑定到这个上下文对象。

    function say() {
        console.log(this.name)
    }
    var name = "global"
    var obj = {
        name: "inside",
        say: say
    }
    var alias = obj.say // 设置一个简写   (1)
    alias() // 函数调用 输出"global"  (2)

    注意:隐式绑定时丢失上下文问题。
    这个可以结合函数的存储理解为:obj.say只是一个函数地址,不是函数本身。所以调用时,还是在当前全局环境下调用。

    2.3 显式绑定:apply,call,bind

    javascript中提供三种显式绑定方法:apply,call,bind

    apply call bind
    相同点 applycall的用法基本相似 applycall的用法基本相似
    不同点 apply(obj,[arg1,arg2,arg3,...]被调用函数的参数以数组的形式给出 call(obj,arg1,arg2,arg3,...)被调用函数的参数依次给出
    作用 apply, call 的作用就是给函数绑定一个执行上下文,且是显式绑定的。但传入参数时会有所不同。 同左

    注意:bind返回一个新函数,这个函数已经制定了执行上下文(这表示执行上下文在之后不可改变了),而返回这个新函数可以接受参数(即在绑定的执行上下文中,以参数为入参执行函数)。

    2.4 new 绑定

    new 绑定:指通过 new 操作符调用构造函数时发生的 this 绑定。

    注意:在 javascript 中并没有其他语言那样的类的概念。构造函数也仅仅是普通的函数而已,只不过构造函数的函数名以大写字母开头,也只不过它可以通过 new 操作符调用而已。

    实际上:new 和 bind 应该很类似。只是一个在创建时执行,一个在执行过程中执行。(不过还是很不同的,见下文区别)

    2.5 bind 和 new 的区别

    不过还是有区别的:bind只能被函数调用。而new 返回的是一个对象。即new 之后,函数的执行上下文就不可以被改变了,bind不行,显示绑定的三种形式都不行。所以new 绑定 的优先级最高。

    2.6 四种绑定的优先级和区别:

    默认绑定 < 隐式绑定 < 显式绑定 < new 绑定

    注意:bind只能被函数调用。而new 返回的是一个对象。即new 之后,函数的执行上下文就不可以被改变了,bind不行,显示绑定的三种形式都不行。所以new 绑定 的优先级最高。

    三、当 this 碰到 return :

    注:主要参考:https://www.cnblogs.com/pssp/p/5216085.html

    具体代码见原文,主要总结就是:
    如果返回值是一个对象,那么 this 指向的就是那个返回的对象,如果返回值不是一个对象那么 this 还是指向函数的实例。(null是特例,虽然null是对象,但是返回时指向的还是函数的实例。)
    即:函数返回对象时,那么this指向的是这个返回对象的运行环境;
    函数返回不是对象时,那么this指向的就是这个函数本身。

    四、参考

    1. JavaScript 的 this 原理 - 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
    2. JavaScript中this绑定详解 - 想到什么写什么 - SegmentFault 思否 https://segmentfault.com/a/1190000007101339
    3. 彻底理解 js 中 this 的指向,不必硬背。 - 追梦子 - 博客园 https://www.cnblogs.com/pssp/p/5216085.html
      注:另一篇比较详细的说明,和上面几篇的模式不同,不过讲解的也很清楚
  • 相关阅读:
    (BFS 二叉树) leetcode 515. Find Largest Value in Each Tree Row
    (二叉树 BFS) leetcode513. Find Bottom Left Tree Value
    (二叉树 BFS DFS) leetcode 104. Maximum Depth of Binary Tree
    (二叉树 BFS DFS) leetcode 111. Minimum Depth of Binary Tree
    (BFS) leetcode 690. Employee Importance
    (BFS/DFS) leetcode 200. Number of Islands
    (最长回文子串 线性DP) 51nod 1088 最长回文子串
    (链表 importance) leetcode 2. Add Two Numbers
    (链表 set) leetcode 817. Linked List Components
    (链表 双指针) leetcode 142. Linked List Cycle II
  • 原文地址:https://www.cnblogs.com/buwuliao/p/9583651.html
Copyright © 2011-2022 走看看