• 理解js中的函数调用和this


    概述

    这是我看typescript的时候看引用资源看到的,原文在这里:Understanding JavaScript Function Invocation and "this",我简单地总结一下记下来供以后开发时参考,相信对其他人也有用。

    机制

    js中的函数调用机制是这样的:

    1. 建立一个表argList,从索引1开始塞入函数的参数。
    2. 表的索引0的值是thisValue。
    3. 把this赋给thisValue,然后调用func.call(argList)。

    说这么多,其实就是想说明,函数调用f(x,y)其实就是f.call(this, x, y)的语法糖。内部是通过f.call(this, x, y)来调用的。

    可以看到,虽然f(x,y)里面没有this,但是f.call(this, x, y)里面有this,所以非常好理解为什么函数调用中会有this了。

    那么this是从哪里来的呢?当f(x,y)没有调用者的时候,this自动被赋值为window;当f(x,y)有调用者的时候,this被赋值为指向调用者。

    例子

    举几个实例感受一下:

    //例子1
    function hello(thing) {
      console.log(this + " says hello " + thing);
    }
    hello.call("Yehuda", "world"); //输出Yehuda says hello world
    
    //例子2
    function hello(thing) {
      console.log(this + " says hello " + thing);
    }
    //相当于hello.call(window, "world");
    hello("world"); // 输出[object Window] says hello world
    
    //例子3
    function hello(thing) {
      console.log(this + " says hello " + thing);
    }
    let person = { name: "Brendan Eich" };
    person.hello = hello;
    //相当于hello.call(person, "world");
    person.hello("world"); //输出[object Object] says hello world
    

    注意:我们这里不是strict mode。

    更优雅的写法

    有时候,我们希望函数没有调用者,但是this却不指向window对象。有以下2种优雅的解决方案:

    箭头函数

    es6里面定义了箭头函数,不只是为了简化函数的写法,而且还有这么一条有用的规定:箭头函数的this不会随调用者的不同而变化,它的this永远是被定义的函数域中的this。

    //不用箭头函数
    let person = {
        hello: function(thing) {
            return function() {
                console.log(this + " says hello " + thing);
            }
        }
    }
    let helloTest = person.hello('world');
    helloTest(); //输出[object Window] says hello world
    
    
    //使用箭头函数
    let person = {
        hello: function(thing) {
            return () => {
                console.log(this + " says hello " + thing);
            }
        }
    }
    let helloTest = person.hello('world');
    helloTest(); //输出[object Object] says hello world
    

    需要注意的是,需要用一个function()把箭头函数包裹起来,因为如果不这样的话,它被定义的函数域是window。

    bind

    用箭头函数有点麻烦,我们可以这么写一个bind函数达到效果。

    let person = {
        hello: function(thing) {
            console.log(this + " says hello " + thing);
        }
    }
    
    let bind = function(func, thisValue) {
        return function() {
            return func.apply(thisValue, arguments)
        }
    }
    
    let boundHello = bind(person.hello, person);
    boundHello('world'); //输出[object Object] says hello world
    

    es5给所有Function封装了上面的bind方法,所以我们只需要这么写:

    let person = {
        hello: function(thing) {
            console.log(this + " says hello " + thing);
        }
    }
    
    let boundHello = person.hello.bind(person);
    boundHello('world'); //输出[object Object] says hello world
    

    这就是bing()方法的来历0.0

  • 相关阅读:
    我的第一个JAVA程序
    根据分辨率改变宽度 demo
    CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8
    学习lofter 让图片适应各个分辨率的方法
    浮点数剖析
    day03<Java语言基础+>
    ASCII码表完整版
    day02<Java语言基础+>
    day01<计算机基础知识&Java语言基础>
    Java集合----概述、Collection接口、Iterator接口
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/8655100.html
Copyright © 2020-2023  润新知