JavaScript进阶2-学习笔记

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  

事件委托、事件冒泡

//事件委托 冒泡
//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";
    }

//事件冒泡和捕获 
    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();   //阻止事件冒泡
     };

//事件委托
//委托给别人来处理
    //  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