JavaScript进阶2-学习笔记

蔚落 2022-10-12 12:19 215阅读 0赞

### 文章目录 ###

*   *  JavaScript进阶2-学习笔记
     *   *  this指针
         *  如何改变this指向
         *  事件委托、事件冒泡

## JavaScript进阶2-学习笔记 ##

### this指针 ###

This是什么？  
this是Javascript语言的一个关键字。 它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化，指向是不确定的，也就是说是可以动态改变的；但是有一个总的原则，那就是this指的是，调用函数的那个对象。 （**this 一般情况下，都是指向函数的拥有者**）

//this指针
    //1）简单函数
        function test(){ 
            console.log(this) //它代表函数运行时，自动生成一个内部对象
        };
        test();  //指向的是调用者window.test();
        
    //严格模式
        function test(){ 
    		"use strict";      //严格模式 
    		console.log(this)  //undefined
    　　};
        test();
        
    //2) 数组
        function f1(){ 
            console.log(this)
        };
        var arr = [f1,2,3];
        arr[0]();  // this= arr arr是调用者 obj.name obj[name]
        var f2 = arr[0];  //数组赋值处理后
        f2();  //指向的是调用者window window.f2();
    
    //3）内置函数 setTimeout 
        function f1(){ 
            console.log(this)
        };
        //延迟执行
        setTimeout(f1,1000);    //window
    
    //4)回调函数
        var a = [1,2,3,5].filter(function(item,index){ 
            console.log(this)   //window
        });
        a();
    
    //5)对象中
        var obj = { };
        obj.name = 123;
        obj.action = function(){ 
            console.log(this);   // // this指向obj
        };
    
        function f1(){ 
            console.log(this)  //this指向obj
        };
    
        obj.action();  // this指向obj
        obj.f2 = f1;
        obj.f2(); 
    
    //5-1) 字面量
        var obj3 = { 
            name:'amy',
            action:function(){ 
                console.log(this)
            }
        };
        obj3.action();
    
    //6)构造函数
        function F5(name,age){ 
            this.name = name;
            this.age = age;
            this.action = function(){ 
                console.log(this)
            }
        };
        var f5 = new F5('a',2);
        f5.action();  //this 指向的是新创建的对象, 而不是构造函数本身。

### 如何改变this指向 ###

//如何改变this指向 apply call
        var a = 10;
        function f6(name,age){ 
            return this.a +" " +name +" "+age;
        };
        f6('a',10);  // 10 a 10
        
        var obj6 ={ 
            a:100,
            action:f6
        };
        obj6.action('a',10); // 100 a 10
    
    //修改this指向
    //1) obj6.action 指向window
        console.log(obj6.action.call(window,'w',10)); // 10 w 10
        console.log(obj6.action.apply(this,['w',10])); // 10 w 10
        console.log(obj6.action.apply(obj6,['w',10])); // 100 w 10
    
    //bind() 绑定this
        var a = 10;
        function f1(name,age){ 
            return this.a +" " +name +" "+age;
        };
        var obj1 ={ 
            a:11111,
            action1:f1
        };
        var obj2 ={ 
            a:22222,
            action2:f1
        };
        var a1 = f1.bind(obj1,'a',10);
        a1()  // f1()无调用者 但是绑定obj1, this指向就是obj1
        console.log(a1.call(obj2,'a',10));   //11111 a 10 绑定后不能改变this
        console.log(a1.apply(obj2,['a',10])); 
    
    //面试题
    //在函数自执行里，this 指向的是 window 对象
        var number = 1;
        var obj = { 
            number:2,
            showNumber:function(){ 
                this.number = 3;
                (function(){ 
                    console.log(this.number);
                })();
                console.log(this.number);
            }
        };
        obj.showNumber();   //1 3

### 事件委托、事件冒泡 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210705202159591.png]

//事件委托 冒泡
    //e.target e.currentTarget this
    //event 对象代表事件的状态
    //e.target 触发事件
    //e.currentTarget 绑定事件
    //target是真正发生事件的DOM元素，而currentTarget是当前事件发生在哪个DOM元素上
    //this 绑定事件
    
    	document.querySelector(".div1").onclick = function(e){ 
           // e.target.style.color = "red";
          // e.currentTarget.style.color = "red";
           this.style.color = "red";
        }

![在这里插入图片描述][20210705203505432.png]

//事件冒泡和捕获 
        document.querySelector(".d1").onclick = function(e){ 
            console.log('d1');
         };
         document.querySelector(".d2").onclick = function(e){ 
            console.log('d2');
         };
         document.querySelector(".d3").onclick = function(e){ 
            console.log('d3');
            e.stopPropagation();   //阻止事件冒泡
         };

![在这里插入图片描述][20210705203955250.png]

//事件委托
    //委托给别人来处理
        // var ul = document.querySelector(".ul");
        // var _li = ul.getElementsByTagName("li");
        // for(var i=0;i<_li.length;i++){ 
        // _li[i].onclick = function(){ 
        // console.log(this.innerHTML);
        // }
        // };
    
    //委托 将事件绑定在父对象上 点击子节点通过事件冒泡到父来处理
         var ul = document.querySelector(".ul");
         ul.onclick = function(e){ 
             if(e.target.nodeName=='LI'){     //针对LI元素来处理
                console.log(e.target.innerHTML);
             }
        }

【可参考】[https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html][https_www.cnblogs.com_Chen-XiaoJun_p_6210987.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/cfeb2c42df7845279909e3e8e1e76c73.png
[20210705202159591.png]: /images/20221005/59e27c2789f448e1984e9033d58a96cd.png
[20210705203505432.png]: /images/20221005/5bfcfe7ec40541f5a7602a68901f3e46.png
[20210705203955250.png]: /images/20221005/f0163bebd481471bbb80d46f7e8502a3.png
[https_www.cnblogs.com_Chen-XiaoJun_p_6210987.html]: https://www.cnblogs.com/Chen-XiaoJun/p/6210987.html