• this —JavaScript面向对象高级


    # 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

  • 相关阅读:
    解决 Windows Server 2008 R2 上 Windows Update 无法失败,提示 8024402F
    【UWP】实现 FindAncestor 绑定
    实现在 .net 中使用 HttpClient 下载文件时显示进度
    【UWP】手动实现 WebAuthenticationBroker
    记录使用 Cake 进行构建并制作 nuget 包
    w筛选系数=(1+错次)/(1+总次)
    WZP身份溯源策略(World Zero Protection),宜分宜合、自主可控的实名认证体系
    WZP报文封装协议(Web Zip Protocol),安全可嵌套的传输协议
    WZP安全配置方案,针对通讯技术的安全措施
    WZP网络结构模型,对OSI参考模型和TCP/IP模型的改进
  • 原文地址:https://www.cnblogs.com/luowen075/p/6135865.html
Copyright © 2020-2023  润新知