• 【面试需要】掌握JavaScript中的this,call,apply的原理


    作者 |  Jeskson

    掘金 |  https://juejin.im/user/5a16e1f3f265da43128096cb

    2020年01月10日

    前言,为什么要学习在掌握JavaScript中的this,call,apply,因为面试官会问啊!所以我们 必须掌握才能答啊!那么this是什么,Function.prototype.call和

    Function.prototype.apply这两个方法又是如何使用在JavaScript中的呢。

    学习掌握this是必须的,我们常常在编写JavaScript中的代码时,会常用到它。

    this的指针作用域,在全局环境中执行this,表示Global对象,在浏览器中表示window对象;当通过new运算符来调用函数时,函数被当做为一个构造函数,this的指向构造函数创建出来的对象;当在函数的执行环境中使用this时,情况有些不同,如函数没有作为一个非window对象的属性,那么只是定义了在这个函数,不管这个函数是不是定义在另一个函数中,其函数中的this仍表示为window对象;如果函数表示作为一个非window对象的属性,则表示函数中的this就代表为 这个对象。

    如截图情况下,在全局执行环境中使用this,表示Global对象,在浏览器中表示为window对象。

    function A(){
      //在A函数中定义一个B函数
      function B(){
        console.log(this); //Window
        console.log(typeof this); //object
        console.log(this === window); //true
      }
      //在A函数内部调用B函数
      B();
    }
    //调用A函数
    A();
    

    在函数执行环境中使用this时,如果函数没有明显的作为非window对象的属性,而只是定义了函数,不管这个函数是不是定义在另一个函数中,这个函数中的this仍然表示window对象。

    //定义一个对象obj,添加属性name,添加方法objFun
    var obj = {
      name: 'dada',
      objFun: function(){
        console.log(this); // Object {name: "dada"}
        console.log(typeof this); //object
        console.log(this === window); //false
        console.log(this.name); //dada
      }
    };
     
    //调用obj对象的方法
    obj.objFun(); //this 绑定到当前对象,也就是obj对象
    

    //定义一个对象obj,添加属性name,添加方法objFun
    var obj = {
      name: 'dada',
      objFun: function(){
        console.log(this); //window
        console.log(typeof this); //object
        console.log(this === window); //true
        console.log('dada的,名字'+this.name+'大帅哥'); 
      }
    };
     
    var test = obj.objFun;
    test();
    

    可以看出函数内部中this值不是静态的,是动态的,可以改变的,每次调用一个函数时,它总是在重新求值。函数内部中的this值,实际上是由函数被调用的父作用域提供,依赖实际函数的语法。

    // 第一种情况
    
    
    //调用obj对象的方法
    obj.objFun(); //this 绑定到当前对象,也就是obj对象
    
    
    // 第二种情况
    
    
    var test = obj.objFun;
    test();
    
    var test = obj.objFun
    // 这里没有调用函数
    test()
    // 这里调用了函数
    
    
    // test不是一个对象的引用,所以this值代表全局对象。
    

    当通过new运算符来调用函数时,函数被当做一个构造函数,this指向构造函数创建出来的对象。

    new创建出来了一个构造函数,这个时候this的值,指向构造函数创建出来的对象。

    var name = 'dada';
    function A(){
      console.log(this.name);
    }
     
    A(); // dada
     
    var B = new A(); //undefined (因为B并没有name属性)
    VM162:3 dada
    VM162:3 undefined
    undefined
    

    var name = 'windowdada';
    var obj = {
      name: 'objdada',
      objB: {
        name: 'objBdada',
        bFun: function(){
          console.log(this.name);
        }
      }
    };
    
    
    var test = obj.objB.bFun();
    
    
    var test2 = obj.objB.bFun;
    test2();
    
    
    var test3 = obj.objB;
    
    
    var test4 = test3.bFun;
    test4();
    

    注意()的近邻的左边,如果这个的左边是一个引用,那么传递给调用函数的this值为引用所属的这个对象,否则this指向为全局对象。

    var test = obj.objB.bFun();
    // ()左边是bFun引用,它指向objB这个对象,所有打印出objBdada
    
    var test2 = obj.objB.bFun;
    test2();
    // ()的左边为test2,它不是某个对象的引用,所以是全局对象
    // 打印出 objBdada
    
    var test4 = test3.bFun;
    test4();
    
    
    // 同理这个也是
    

    JavaScript中this的原理

    var name = 'windowDada';
    var obj = {
      name: 'dada',
      foo: function () {
       console.log(this.name);
      }
    };
    
    
    var foo = obj.foo;
    
    
    // 写法一
    obj.foo()
    
    
    // 写法二
    foo()
    VM593:5 dada
    VM593:5 windowDada
    

    这个时候我相信你已经看懂了。this指向的是函数运行时所在的环境,对于obj.foo()来说,foo运行在obj环境中,所以这个时候的this指向为obj这个对象,对于foo()来说,foo运行是全局环境,这个this的指向为全局环境。(你会问为什么呢?一个指向obj这个对象,一个运行环境为全局环境,这里可以运用()左边方法)

    对呀为什么呢?函数的运行环境是怎么决定在哪种情况的?

    为什么obj.foo()的环境就在obj这个环境中,而作为

    var foo = obj.foo,foo()的运行环境就变成了全局的执行环境呢?

    this的指向设计,跟内存的数据结构有关。

    var obj = {
     name: 'dada'
    };
    

    当一个对象赋值给一个变量obj的时候,JavaScript引擎会在内存里,先生成一个对象为 { name: 'dada' },然后才把这个对象的内存地址赋值给这个变量 obj。

    我们说过了很多很多遍了,都知道这个变量obj就是一个地址,这个时候如果要读 obj.foo,那么引擎就会从这个变量 obj中拿内存地址,然后再从这个地址 读取原始对象,返回它的foo属性。

    注意:原始的对象(开始创建的对象 { name: 'dada' })以字典结构保存的,每个属性名都对应一个属性描述对象。foo属性的值保存在属性描述对象的value属性里面。

    this指包含它的函数作为方法被调用时所属的对象。

    this,第一包,含它的函数,第二,作为方法被调用时,第三,所属的对象。

    function da(){
         console.log(this); //window
     }
    da();
    

    会调用我,我就是谁的,谁最后调用我,我就是谁的。

    testFunda()函数是在全局中被window对象所调用的,this的指向为window对象,而nameda变量在testFunda函数中,window对象中没有这个变量,所以打印不出来。

    注意()的左边为testFunda

    testFunda()函数是在全局中被window对象所调用的哦!

    因此this的指向就是window对象哦!

    var namedada = 'dada'
    function testFundada () {
        var namedada="hello dada!";
        console.log(this.namedada);
    }
    testFundada();
    VM717:4 dada
    

    看这个代码当然打印出的是dada啦,因为从全局调用,全局中有这个属性,就打印这个属性。

    this被包含中一个函数中,但是这个函数被另个函数包含的情况下,这个this的指向为顶部的函数。

    var obj={
        a:"da",
        b:function(){
            var a="dada";
            console.log(this.a);
        }
    };
    obj.b();
    VM726:5 da
    

    this被包含在函数b()中,因为是被obj对象所调用的,所以这个this属于这个obj对象,打印出来的就是da这个字符串了。

    谁最后调用我,我就属于谁!

    var obj = {
        a: 1,
        b:{
            fn:function(){
                console.log(this.a); //undefined
            }
        }
    };
    obj.b.fn();
    
    
    VM730:5 undefined
    

    对象obj是在window上定义的,所以如下显示:

    obj.b.fn()=window.obj.b.fn()
    

    谁先调用我不算,谁最后调用我才算,window,那么this不是指向全局的对象了吗,但是最后的是被fn()调用,()左边为b对象,所以this就指向这个b对象了,因为函数中没有这个变量,所以为undefined。

    出一道考题

    结果是啥?我知道为2,你知道吗?那看看执行结果吧!

    var obj = {
        name: 1,
        b:{ 
            name: 2,
            fn:function(){
               var name = 3
                console.log(this.name);
            }
        }
    };
    obj.b.fn();
    

    函数情况,属性的值为一个函数

    var obj = { foo: function () {} };
    

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

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

    var f = function () {};
    var obj = { f: f };
    
    
    // 单独执行
    f()
    
    
    // obj 环境执行
    obj.f()
    

    var fda = function () {
     console.log('da');
    };
    
    
    var objDada = { f: fda };
    
    
    // 单独执行
    fda()
    
    
    // objDada 环境执行
    objDada.fda()
    VM858:2 da
    

    环境的考虑,在JavaScript中运行在函数体内部,引用当前环境的其他变量。在JavaScript中,由于函数可以在不同的运行环境执行,就要一种机制,使能够在函数体内部获取当前的运行环境。

    this的出现,目的在于就是指代函数当前的运行环境。

    this 指代全局对象

    function test(){
        this.x = 1;
        alert(this.x);
    }
    test();    // 1
    

    this 指代上级对象

    function test(){
        alert(this.x);
    }
    var o = {};
    o.x = 1;
    o.m = test;
    o.m();    // 1
    

    this 指代 new 出的对象

    var x = 3;
    
    
    function test(){
        this.x = 1;
    }
    
    
    var o = new test();
    
    
    alert(x);        // 3
    
    
    alert(o.x);        // 1
    

    函数的不同使用场合,this 有不同的值,this是函数运行时所在的环境对象。

    call的用法

    call(thisObj,arg1,arg2,arg...)
    

    调用一个对象的方法,以另一个对象替换当前对象,call方法用来代替另一个对象调用一个方法,该方法可以将一个函数对象的上下文改变为由this obj指定的新对象。

    call方法的参数,如果是不传,或是null,undefined的情况下,函数中的this指向就是指window对象,如果传递的是另一个函数的函数名,函数中的this指向就是这个函数的引用,如果参数传递的是基本类型数据时,函数中的this指向就是其对应的 包装对象了,如果参数传递的是一个对象时,函数中的this就指向这个对象。

    一个函数的函数名,函数名是引用,所以指向是指这个函数的引用

    一个对象,所以this就指向这个对象

    基本类型数据,就指向这个包装对象

    Function.prototype.call(thisArg[,arg1[,arg2, ...]])
    

    当以thisArg和可选择的arg1,arg2等等作为参数在一个func对象上调用call方法。

    var da = {
        name: "da",
        sayHello: function (age) {
             console.log("hello, i am ", this.name + " " + age + " years old");
         }
    };
    
    
    var  jeskson = {
        name: "jeskson",
    };
    
    
    da.sayHello(12);
    VM891:4 hello, i am  da 12 years old
    undefined
    da.sayHello.call(jeskson,13);
    VM891:4 hello, i am  jeskson 13 years old
    undefined
    

    在JavaScript中,call和apply作用是一样的

    为了改变某个函数运行时的上下文(context)而存在的,就是为了改变函数体内部this的指向。

    每个函数都包含两个非继承而来的方法:

    call()和apply()

    apply的用法

    apply(thisObj,argArray)
    

    apply方法应用于某一个对象的一个方法

    用另一个对象替换当前对象。

    区别:参数书写方式不同

    call() 方法分别接受参数。

    apply() 方法接受数组形式的参数。

    Math.max(1,2,3);  // 会返回 3
    
    
    Math.max.apply(null, [1,2,3]); // 也会返回 3
    
    
    Math.max.apply(Math, [1,2,3]); // 也会返回 3
    
    
    Math.max.apply(" ", [1,2,3]); // 也会返回 3
    
    
    Math.max.apply(0, [1,2,3]); // 也会返回 3
    
    call(thisObj, arg1, arg2, arg3, arg4);
    apply(thisObj, [args]);
    
    
    thisObj:
    
    
    call和apply第一个参数是一样的
    该参数将替代Function类里面的this对象
    
    
    arg1,arg2....
    
    
    是一个个的参数
    
    
    args
    一个数组或类数组,是一个参数列表
    

    JavaScript 严格模式

    如果 apply() 方法的第一个参数不是对象,它将成为被调用函数的所有者(对象)。

    在“非严格”模式下,它成为全局对象。

    参考:

    http://www.ruanyifeng.com/blog/2018/06/javascript-this.html

    最后

    • 欢迎加我微信(xiaoda0423),拉你进技术群,长期交流学习...

    • 欢迎关注「达达前端」,认真学前端,做个有专业的技术人...

    在博客平台里,未来的路还很长,也希望自己以后的文章大家能多多支持,多多批评指正,我们一起进步,一起走花路。

    非常感谢读者能看到这里,如果这个文章写得还不错,觉得「达达」我有点东西的话,觉得我能够坚持的学习,觉得此人可以交朋友的话, 求点赞???? 求关注❤️ 求分享???? 对暖男我来说真的

    非常有用!

    2019年的每一天日更只为等待她的出现,好好过余生,庆余年 | 掘金年度征文

    一篇文章带你了解JavaScript中的变量,作用域和内存问题

    一篇文章带你了解JavaScript中的语法,数据类型,流程控制语句以及函数

    一篇常做错的经典JS闭包面试题

    感谢阅读,原创不易,喜欢就点个[在看] or [转发朋友圈],这是我写作最大的动力。

    意见反馈

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    这是一个有质量,有态度的公众号

    点关注,有好运

  • 相关阅读:
    C 语言 静态库和动态库的创建和应用
    C++ 中英文术语对照
    下午
    [转]内核 do_fork 函数源代码浅析
    关于C#反射机制,自己写的
    获取字符串中数字
    关于C#反射机制,来源于网络
    关于 Nhinernate 的one to one(转载)
    鼠标坐标的记录
    关于C#中hibernate.cfg.xml动态加载问题
  • 原文地址:https://www.cnblogs.com/dashucoding/p/12178534.html
Copyright © 2020-2023  润新知