前端必须理解this的相关知识

一、对this的产生原因分析和了解

1.this指的是函数运行时所在的环境（即调用的对象）。
2.JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系

二、this绑定详解

this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。

1.默认绑定

    function foo(){
        var a = 1 ; //局部变量
        console.log(this.a);   
    }
    var a = 10;  //全局变量
    foo(); //window.foo()

2.隐性绑定

var a = 10;  //全局变量
function foo(){
    var a = 1 ; //局部变量
    console.log(this.a);   
}
var obj = {
    a : 20,
    foo : foo
}
obj.foo(); //window.obj.foo()

3.显示绑定apply,call,bind 这个三个函数都是改变this指向

    (1)call
    var box=document.getElementById('box')
    box.onclick = function(){
        console.log(this)  //指向box元素
    　　function boxFn(params1,params2,params3){
          console.log(this) 
    　　}
        boxFn() 
        boxFn.call(this,1,2,3) //call改变this指向，将this指向box元素
    }

    (2)apply
    var applayObj1={
        name:'张三'
    }
    var applayObj={
        name:'李四',
        applayFun(param1,param2,param3){
          console.log(this.name)
        }
    }
    var applayfun2=applayObj.applayFun
    applayObj.applayFun() //window.applayObj.applayFun()
    applayfun2.apply(this,[1,2,3]) //window.applayfun2.apply(this,[1,2,3])
    applayfun2.apply(applayObj1,[1,2,3]) //window.applayfun2.apply(applayObj1,[1,2,3])

    (3)bind
    var title='全局title'
    var applayObj1={
      name:'张三'
    }
    var bindObj={
      title:'改变this',
      bindFun(){
        console.log(this)
      }
    }
    bindObj.bindFun()
    var aa=bindObj.bindFun
    aa()
    aa.bind(applayObj1)()

4.new 绑定

new出来的对象有以下新特性：

(1)创建一个新对象。
(2)把这个新对象的__proto__属性指向 原函数的prototype属性。(即继承原函数的原型)
(3)将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
(4)返回新对象。(底层运行机制return返回一个新对象)

   var blogA='123'
   function blog(){
       this.blogA='456'
       this.blogFn=function(){
           console.log(this.blogA)
       }
   }
   var newblogObj=new blog() 
   newblogObj.blogFn()
   console.log(newblogObj)

三、箭头函数的this绑定

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

    var a=12
    function foo(){    
        this.a=13
        return ()=>{
          console.log(this.a)
        }
    }
    let newFoo=new foo()   
    newFoo() 
    var b='666'    
    function foo2(){
        console.log(this)
        return ()=>{
            console.log(this.b)
        }
    }    
    var baz=foo2()
    baz();

（2）箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域

  function Timer() {
      this.s1 = 0;
      this.s2 = 0;
      console.log(this)
      // 箭头函数
      setInterval(() => this.s1++, 1000); //箭头函数没有this，它的this来自绑定时所在的作用域 即外部代码块的this
      // 普通函数
      setInterval(function () { 
        this.s2++; //this为window
      }, 1000);
    }
    var timer = new Timer();
    setTimeout(() => console.log('s1: ', timer.s1), 3100)
    setTimeout(() => console.log('s2: ', timer.s2), 3100)

(3). 箭头函数this不可修改

    var obj = {
      b : 999
   }
  var b='666'    
  function foo2(){
      console.log(this)
      return ()=>{
        console.log(this.b)
      }
  }    
  var baz=foo2()
  baz();  
  baz.call(obj)

四、this指向与继承

//示例
        function Parent (name,sex){
            this.name = name;
            this.sex  = sex;
        }
        //添加原型方法
        Parent.prototype.show = function(){
            console.log("姓名:" + this.name + "性别" + this.sex)
        }
        //声明函数继承 Parent的函数 并添加自己的函数
         function Worker(name,sex,job){
            //通过call方法改变Parent的this指向
            console.log(this)
            Parent.call(this,name,sex)
            this.job = job;
         }
        //此时wk里既有Parent的函数属性 又有了Worker函数的属性
         Worker.prototype=Parent.prototype
         var wk = new Worker("小明","男","程序员")
         console.log(wk.name);
         console.log(wk.sex);
         console.log(wk.job);
         wk.show()