【JavaScript高级】01-this的指向

this指向

先对在“this指向”中的三种情况进行回顾，下边在深入了解

this指向分析

如下定义一个函数时，采用三种不同的方式进行调用，产生不同的结果

说明：

1. 说明函数在调用时，JavaScript会默认给this绑定一个值
2. this的绑定和定义的位置（编写的位置）没有关系
3. this的绑定和调用方式及调用位置有关
4. this是在运行时被绑定的

this的绑定规则

默认绑定

1. 普通函数被独立的调用：指向window（独立的函数调用可以理解成函数没有被绑定到某个对象上进行调用）
2. 函数在对象中，但是独立调用：指向window
3. 在严格模式下，独立调用的函数指向undefined
   

隐式绑定

通过某个对象进行调用时，this指向调用它的对象

new绑定

显示绑定

显示绑定call，apply用法示例：

 <script>
        function fn (){
            console.log("fn函数：",this);
        }

        var obj = {
            unmae:'kk'
        }

    // 需求：要求执行函数且this指向obj
    // 1.给对象中添加方法，使用对象进行调用
        // obj.fn = fn;
        // obj.fn();

    // 2.显示绑定
    //执行函数，并且强制this就是obj对象
    // fn.apply(obj);
    fn.call(obj);
    fn.call(123);
    fn.call(undefined);
    fn.call('dwad');
   
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

打印结果：

call和apply区别代码示例：

 <script>
        function fn(name, age, height){
            console.log("fn函数被调用：",this);
            console.log("打印参数：", name, age, height );
        }

        // ()调用
        fn("kkk", 18, 172);
        
        // apply
        // 第一个参数：绑定this
        // 第二个参数：传递额外的实参，以数组的形式
        fn.apply("apply", ["yyy", 19, 185]);

        // call
        // 第一个参数：绑定this
        // 参数列表：后续的参数以多参数的形式进行传递，会作为实参
        fn.call("call","kobe",35,195);
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

打印结果：

bind（少用）

在上述bind用法示例1中，bar（）明显为独立函数调用，但却因为绑定了bind而不指向window了，这就涉及到了this绑定的优先级

this绑定优先级

（显示绑定间，bind优先级高于apply/call）

代码测试：

 <script>
        function fn (){
            console.log("fn:", this);
        }

    // 比较优先级:

    // 1.显式绑定的优先级高于隐式绑定
        // -测试一：apply高于隐式绑定
    // var obj = {
    //     foo:fn
    // }
    // obj.foo.apply("abc");//abc

        // -测试二：bind优先级高于隐式绑定
        // var qbz = fn.bind("aaa");
        // var obj = {
        //     name: "sevgilid",
        //     bar: qbz
        // }
        // obj.bar();//aaa

    // 2.new绑定优先级高于隐式绑定
        // var obj = {
        //     name:"sevgilid",
        //     foo:function(){
        //         console.log("foo:", this);
        //     }
        // }
        // new obj.foo();//foo: foo {}

    // 3. new和显式绑定优先级
        //一: new不能喝apply/call一起使用
        // 二：new优先级高于bind
        // var bindFn = fn.bind("aaa");
        // new bindFn();//fn: fn {}

    // 4.bind和allpy/call的优先级
        // bind高于apply和call
        var bindFn = fn.bind("aaa");
        bindFn.apply("bbb");//fn: String {'aaa'}
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

this规则之外的情况

1. 如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则;（了解）
   
2. 创建一个函数的间接引用，这种情况使用默认绑定规则。（了解）

指向window

3. 箭头函数 arrow function（掌握）

一、 用法示例：

<script>
    // 和常规函数对比示例
        setTimeout(function(){
            console.log(222);
        },3000);

        setTimeout(() => {
            console.log(1);
        }, 3000);
    </script>
1
2
3
4
5
6
7
8
9
10

箭头函数的完整写法和练习：

二、编写优化（简写）

代码示例：

<script>
        // 1.优化一：如果箭头函数只有一个参数，那么()可以省略
        var names = ["dfa","ads","xxx"];
        var nums = [1,333,222];
        // names.forEach(item => {console.log(item)});
        // var newNums = nums.filter(item=>{
        //     return item % 2 ===0
        // })

        // 2.优化二：如果函数体中只有一行代码，则{}可以省略
        names.forEach(item => console.log(item));
        // 一行代码中不能带return关键字。如果胜率需要带return一起省略（下一条规则）
        // var newNums = nums.filter(item => {
        //     return item %2 ===0
        // })

        // // 3.优化三：只有一行代码时，这行代码的表达式结果会作为函数的返回值默认返回的
        // 原写法
        // var newNums = nums.filter(function(item){
        //     return item%2 === 0
        // })

        var newNums = nums.filter(item => item %2 === 0)
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

箭头函数中的this使用（掌握）：

• 箭头函数中没有this，所以没有绑定，使用时按查找规则判断 箭头函数中
• 箭头函数中this的查找规则：