JS第十二节 this call和apply

一.this
    this是js的一个关键字
1.函数应用 -- 普通函数调用,this指向window,没有意义
    function f1(){
        this.x=1        //this指向window
        alert(this.x) //1
    }
    f1()

    var x=1
    function f1(){
        alert(this.x) //1
    }

2.对象调用 --- this执行当前的调用对象
    function f1(){
        alert(this.x)
    }
    var o1={}
    o1.x=2
    o1.method1=f1
    o1.method1()

3.window==this (true)   this是指向调用时所在函数所绑定的对象
                        浏览器中,非函数内的this指向的是window
    function f1(){
        x=1
    }
    f1()
    alert(this.x) //1
    alert(window.x) //1

4.
    var x=1
    function f1(){
        console.log(this.x);//this指向obj1对象
    }
    var obj1={}
    obj1.x=2
    obj1.m1=f1
    obj1.m1() //2

5.
    var obj1={x:1,
        m1:function(n){this.x=n},
        m2:function(){return this.x}
        }
    obj1.m1(2)
    console.log(obj1.m2())

6.this与DOM元素
(1)this -- div DOM元素
    <div οnclick="console.log(this)">确定</div>

(2)
    window.οnlοad=function(){

        function f1(){
            console.log(this);          //window
            console.log(this.id);       //undefined
        }
        document.getElementById('id01').οnclick=function(){
            console.log(this);          //div元素
            console.log(this.id);       //id01
            console.log(this.title);    //abc
            f1()    //f1函数内部的this指向window
        }
    }

二.this整理
    this --- 表示指向当前对象
1.如果在全局范围内使用this,this为当前的window对象
    console.log(window==this)
    window.alert(12)
    this.alert(13)

2.如果是纯粹的函数,this指向window
    var x=1
    function f1(){
        console.log(this) //window
        console.log(this.x) //1
    }
    f1()

3.如果函数中使用this,this代表什么是根据运行此函数在什么对象上被调用
    即函数中的this指向是在运行时决定的(而不是在定义时决定的)
    var x=1
    function f1(){
        console.log(this) //object{x: 2, m1: ƒ}
        console.log(this.x) //2
    }
    var obj1={}
    obj1.x=2
    obj1.m1=f1
    obj1.m1()

4.this与DOM元素
(1)this指向dom元素本身
    <div οnclick="alert(this)">hello</div>
    <div οnclick="this.style.color='red'">hello</div>

(2)<div οnclick="f1(event)">hello</div>
    function f1(){
        console.log(this)
        this.style.color='red' //出错
    }

(3)<div οnclick="f1(event)">hello</div>
    function f1(){
        console.log(event.srcElement) //事件源 -- 调用该函数
        event.srcElement.style.color='red' //变色
    }

(4)<div id="id01">hello</div>
    document.getElementById("id01").οnclick=function(){
        console.log(this) //dom 元素
        this.style.color='red'
    }

5.应用
    var x=1
    var obj1={
        x:2,
        m1:function(){
            // console.log(this.x) //2
            function m2(){
                console.log(this.x); //1
            }
            return m2
        }
    }
    console.log(obj1.m1()) //m2
    obj1.m1()()

--->改进

    var x=1
    var obj1={
        x:2,
        m1:function(){
            // console.log(this.x) //2
            var aa=this
            function m2(){
                console.log(aa) //{x:2,m1:f}
                console.log(aa.x); //2
            }
            return m2
        }
    }
    obj1.m1()()

6.改变this指向 --- call  apply
    var x=1
    function f1(){
        console.log(this.x)// 2
    }
    var obj={}
    obj.x=2
    // obj.m=f1
    f1.apply(window) //1
    f1.apply(obj) //2

三.call与apply
1.本质是将特定的函数当作一个方法绑定到对象上进行调用
2.语法
  函数.apply(对象,[参数1,参数2...])
  函数.call(对象,参数1,参数2...)
  
  参数 --- 传递给函数的参数

3.apply call 目的运行函数,用完后马上删除,避免资源浪费
4.apply call 可以改变this的指向
    function f1(x,y){
        return x+y
    }
    var obj={}
    v1=f1.call(obj,3,4)
    console.log(v1)

v1=f1.call(obj,3,4) 等价于  obj.m1=f1
                            obj.m1(3,4)
                            delete obj.m1

举例
1.  var x=1
    function f1(){
      console.log(this.x)//2
    }
    f1() --1

    var obj={}
    obj.x=2
    f1.apply(obj) //obj.m=f1,obj.m()

    function f1(){}
    var obj={}
    f1.call(obj)
    obj.f1()    //报错,call 调用完后已经删除了

2.  function f1(...arg){
        var v1 = sum.apply(this,arg)
        console.log(v1)
    }
    function f1(){
        var v1=sum.apply(this,arguments) //只能用apply
    }
    f1(2,3,4,5,6,7,8)

3.  window.color="red"
    var obj={color:"blue"}
    function saycolor(){console.log(this.color)}

    saycolor.call(this)         //red
    saycolor.call(window)       //red
    saycolor.call(obj)          //blue

4.面向对象
    function Person(name,age){
        this.name1=name
        this.age1=age
    }
    function Student(name,age,grade){
        // Person.apply(this,arguments)
        Person.apply(this,[name,age])
        this.grade1=grade
    }
    var s1=new Student("zs",22,3)
    
    console.log(s1.name1);
    console.log(s1.age1);
    console.log(s1.grade1);

改:
     function Person(name,age){
        this.name1=name
        this.age1=age
    }
    function Student(name,age,grade){
        this.grade1=grade
        return Person.apply(this,arguments)
    }
    var s1=new Student("hyw",22,3)
    console.log(s1)

    

四.bind --就是call和apply的升级版
    返回函数本身,需要再执行
    color="red"
    var obj={color:"blue"}
    function saycolor(){console.log(this.color)}
    var v1=saycolor.bind(obj)
    console.log(v1)
    //v1()

五.ES6 箭头函数(arrow function)和this
    箭头函数定义在哪,this就指向哪
    var obj1={
        "name":"zs",
        "f1":function(){
            [23,34].map((item)=>{
                console.log(this) //object
            })
        // [23,34].map(function(item){console.log(this)}) //window
        }
    }
    obj1.f1()