• this、apply、call的指向


    1、关于this

    this它总是返回一个对象,是指调用当前函数的对象,由于对象的属性可以赋给另一个对象,所以属性所在的当前对象是可变的,即this的指向是可变的。

     var person={
            name:"张三",
            getName:function () {
                return "姓名"+this.name
            }
        }
        var person2={
            name:"李四"
        };
        person2.getName=person.getName;
        console.log(person.getName())        //姓名张三    
        console.log(person2.getName())    //姓名李四

    在上面代码中person中的getName属性被赋给person2对象,此时person2.getName()指向的就是person2对象,所以this.name指向的就是person2的name属性。

    this的实质

    JavaScript 语言之所以有 this 的设计,跟内存里面的数据结构有关系。

    var person2={
            name:"李四"
        };

    上面代码将一个对象赋值给一个变量,首先JavaScript 引擎会先在内存里面,生成一个对象{ name: "李四" },然后把这个对象的内存地址赋值给变量person2,也就是说,变量person2是一个地址(reference)。后面如果要读取person2.name,引擎先从person2拿到内存地址,然后再从该地址读出原始的对象,返回它的name属性。

    原始的对象以字典结构保存,每一个属性名都对应一个属性描述对象。举例来说,上面例子的foo属性,实际上是以下面的形式保存的。

    {
            foo: {
                [[value]]: '李四'
                [[writable]]: true
                [[enumerable]]: true
                [[configurable]]: true
            }
        }

    name的值保存在属性描述对象的value属性里面。

    如果属性值是一个函数会是什么样子

    var obj={
            f:function () {
                
            }
        }

    引擎会将函数单独保存在内存中,然后再将函数的地址赋值给f属性的value属性。

    {
      f: {
        [[value]]: 函数的地址
        ...
      }
    }

    重点就是这个,因为函数是单独保存的,所以不同的执行环境会有不同的上下文。由于函数可以在不同的运行环境执行,所以需要有一种机制,能够在函数体内部获得当前的运行环境(context)。所以,this就出现了,它的设计目的就是在函数体内部,指代函数当前的运行环境。

    this使用场景

    1. 全局环境,全局环境游览器环境下使用this,它指的就是顶层对象window,node环境下就是global了
    function test() {
            console.log(this==window)        //true
        }
        test()

      2、构造函数

      构造函数内this指向的是生成的实例对象

      

    function test(name) {
            this.name=name;
        }
        var test2=new test("张三");
        console.log(test2.name)    //张三

      通过new命令生成的test2实例对象,由于this指向实例对象,所以在构造函数内部定义this.name,就相当于定义实例对象有一个name属性。

       3、对象的方法

    ·  如果对象里面方法包括this,this指向的就是该方法运行时所处的对象,该方法赋值给另一个对象,就会改变this的指向。具体代码见第一个实例代码。

    绑定this

    this的动态切换,固然为 JavaScript 创造了巨大的灵活性,但也使得编程变得困难和模糊。有时,需要把this固定下来,避免出现意想不到的情况。JavaScript 提供了callapplybind这三个方法,来切换/固定this的指向。

    Function.prototype.call()

    函数实例的call方法,可以指定函数内部this的指向(即函数执行时所在的作用域),然后在所指定的作用域中,调用该函数。

    var test="tony";

    function doSomething(){

      alert(this.test);//tony

      alert(window.test);//tony

    }

    doSomething();

    doSomething在全局调用,相当于window.doSomething();所以里面的this指向window对象,this.test=window.test="tony";

  • 相关阅读:
    动态规划--数字三角形问题
    C#操作Office.word(一)
    【算法参考】动态规划
    数据结构--图的定义和存储结构
    重定向输入输出流--freopen
    C++内联函数、函数模板之于头文件
    C++静态局部对象
    C++函数模板
    条款05:了解C++默默编写并调用哪些函数
    设计模式 之 装饰器模式
  • 原文地址:https://www.cnblogs.com/yuanzhiguo/p/7118953.html
Copyright © 2020-2023  润新知