《ES6标准入门（第3版）》学习笔记21：chapter_7 函数的扩展之name属性和绑定this

最新推荐文章于 2022-07-02 09:39:12 发布

壹小楷

最新推荐文章于 2022-07-02 09:39:12 发布

阅读量105

点赞数

分类专栏： ES6标准入门（第3版）学习笔记文章标签：函数的扩展 name属性绑定this 学习笔记

本文链接：https://blog.csdn.net/weixin_44582681/article/details/102180731

版权

ES6标准入门（第3版）学习笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

这是该系列的第21篇笔记！
1，name属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>name属性</title>
</head>
<body>
    
    <script>
    // 函数的name属性返回该函数的函数名
    function foo(){}
    console.log(foo.name);
    
    // 如果将一个匿名函数赋值给一个变量，ES5的name属性会返回空字符串，但ES6的name属性会返回实际的函数名
    var f = function(){};

    console.log(f.name);  // f

    // 如果将一个“具名函数”赋值给一个变量，则ES5和ES6的name属性都返回这个具名函数原本的名字
    const bar = function baz(){};
    console.log(bar.name);  // baz
    
    // Function构造函数返回的函数实例，name属性的值为“anonymous”
    console.log((new Function).name);
    
    // bind返回的函数，name属性值会加上bound前缀
    function foo(){};
    console.log(foo.bind({}).name);
    console.log((function(){}).bind({}).name);



    </script>
</body>
</html>

2，绑定this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绑定this</title>
</head>

<body>

    <script>
        // 【注意】该节的知识大部分只是一个提案！！！

        // 箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call, apply, bind）
        // 但是，箭头函数并非适用于所有场合

        // ES7提出“函数绑定”运算符，用来取代call, apply and bind调用【只是个提案】，但Babel转码器已经支持
        // 函数绑定运算符是并排的双冒号（::），双冒号左边是一个对象，右边是一个函数
        // 该运算符会自动将左边的对象作为上下文环境（即this对象）绑定到右边的函数上

        // foo::bar;
        // 等价于bar.bind(foo);

        // foo::bar(...arguments);
        // 等价于bar.apply(foo, arguments);

        // (1) 如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上
        // var method = obj:: obj.foo;
        
        // var method = ::obj.foo;

        // let log = ::console.log;
        // var log = console.log.bind(console);





        // (2) 由于双冒号运算符返回的还是原对象，因此可以采用“链式写法”
        // 例1
        // import {
        //     map,
        //     takeWhile,
        //     forEach
        // } from 'iterlib';
        // getPlayers()
        // ::map(x => x.character())
        // ::takeWhile(x => x.strength > 100)
        // ::takeWhile(x => x.strength > 100)

        // 例2

        // let {
        //     find,
        //     html
        // } = jake;
        // document.querySelectorAll('div.myClass')
        // :: find('p')
        // :: html('hahaha');
    </script>
</body>

</html>