this —JavaScript面向对象高级

Posted 2020-08-22 唐小青

# this的用法 #

  重点： 谁调用就指向谁  

           //ES6新特性中，定义箭头函数  var fn = () =>{...} 这里面如果有this，是固化的，跟bind情形基本相似  

1，取值：在函数真正被调用的时候确定，因为每次调用会有一个不同的上下文 
     
       var per1 = new Person(‘zhangsan‘,18)
       per1.sayHello()
       var per2 = new Person(‘lis‘,20)
       per2.sayHello()
    per1一调用就指向per1，per2一调用就指向per2

2.**谁调用就指向谁**   全局调用——>window     对象调用——>当前对象
     
    function Person(name,age){
         this.name =name;
         this.age= age;
         this.sayHello = function() {
                 console.log(‘hello,i m ‘+this.name+‘i m ‘+ this.age)
               }
     }
    
       var per1 = new Person(‘zhangsan‘,18)
       per1.sayHello()
       var per2 = new Person(‘lis‘,20)
       per2.sayHello()

      谁调用这个this ，this就指向谁
     

3.函数如果是作为对象的一个**属性**，则指向的是当前对象
  如果是一个**普通函数**，则是一个window属性

     a.var obj = {
       name:‘zhangsan‘,
       age:10,
       sayHello:function(){
                 console.log(this.name)
                   }
       }
       
     obj.sayHello()  //zhangsan
   

    b.var obj = {
       name:‘zhangsan‘,
       age:10,
       sayHello:function(){
                   function inner(){
                       console.log(this.name)
                                 }
                         }
        }
       
     obj.sayHello()  //打印不出东西
     因为这个this指向window
   
4.普通函数内部怎么获取当前对象内部的属性
       法1：当参数     2.this保存    3.call方法，会马上调用   4.bind(this)  没有被立即执行
      p1.sayName = p1.sayName.bind(p1) (固化this)，传值非常有用,模块之间
  例： 
      1.当参数传递
        
        var obj = {
           name:‘zhangsan‘,
           age:10,
           sayHello:function(){
              function inner(name){
                console.log(name)
                }
              inner(this.name) //当做参数传递
           }
         }
   
       obj.sayHello()  //zhangsan


    // 2.将对象的this保存下来
       var obj = {
           name:‘zhangsan‘,
           age:10,
           sayHello:function(){
              var that = this //保存this，也相当于固化
              function inner(){
                console.log(that.name)  //以后调用的that都是对象的this
                }
              inner()
           }
       }
   
     obj.sayHello()  //zhangsan


     3.采用call或apply方法手动修改this
       var obj = {
           name:‘zhangsan‘,
           age:10,
           sayHello:function(){
              function inner(){
                console.log(this.name)
                }
             inner.call(this) //将inner的this指向当前对象
           }
       }
   
         obj.sayHello()  //zhangsan
     var obj1 = {};
         obj1.sayHello = obj.sayHello;
         obj1.name = ‘lis‘
         obj1.sayHello() //lis         

     4.bind(this)将this固化下来
      var obj = {
           name:‘zhangsan‘,
           age:10,
           sayHello:function(){
              function inner(){
                console.log(this.name)
                }
             inner.bind(this)() //添加绑定，注意：bind基本与call类似，但是不会立即执行，需要加()立即执行。
           }
       }
   
         obj.sayHello() //zhangsan

          var obj1 = {
              name:‘lis‘
          }
          var obj2 = {
              name:‘wang5‘
          }
          
         obj1.sayHello = obj.sayHello.bind(obj2)  //调用obj里的sayhello方法，绑定obj2的name，也可以绑定其他obj的，如果没有name属性，则返回undefined

         obj1.sayHello()  //wang5

    

5.如果a:this.x   obj.a——> this指向window

       这里注意分清属性里的this和方法里的this的区别

       例：         
         var age = 15;
         var obj = {
              name: ‘zhangsan‘,
              age:5,
              x:this.age,  //这里的this指向window,注意理解一个思想，谁调用this才指向谁
              sayAge:function(){
                console.log(this.age)
              }
         } 

       console.log(obj)   //x = 15 ，指向window
       obj.sayAge()   //5