es6bindthis作用

最新推荐文章于 2023-03-08 19:34:38 发布
最新推荐文章于 2023-03-08 19:34:38 发布
阅读量1k 收藏
点赞数 1
分类专栏： this的指向 文章标签： es6 bind call
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsq1026hsq/article/details/76984727
版权 
<!doctype html>
<html>
  <head>
    <title>标题</title>
    <meta charset="utf-8">
  </head>
  <body>
    <button id="btn1">click me1</button>
    <button id="btn2">click me2</button>
    <button id="btn3">click lilei</button>
    <script>
    
      // function fun(){
      //   console.log(this.name);
      // }
      // var lilei={name:"Li Lei"};
      // lilei.fun=fun;
      // var hmm={name:"Han Meimei"};
      // hmm.fun=fun;
      // lilei.fun();//this->lilei
      // hmm.fun();//this->hmm
      // fun();//this->window
    
    
      // var lilei={
      //   name:"Li Lei",
      //   fun:function(){
      //     console.log(this.name);
      //   }
      // }
      // var fun=lilei.fun;
      // fun();//""
      // lilei.fun();lilei
    
    
      // function fun(){
      //   console.log(this.name);
      // }
      // var lilei={name:"Li Lei"};
      // var hmm={name:"Han Meimei"};
    
      // fun.call(lilei);//this->lilei
      //   //lilei.fun();
      // fun.call(hmm);//this->hmm
      // fun.call();//this->window
    
      // var lilei_fun=fun.bind(lilei);
    
    /*
      function fun(){
        alert(this.id);
      }
      btn1.addEventListener(
        "click",fun
      );//btn1.οnclick=fun;
      //btn1.onclick();//this->btn1
      btn2.addEventListener(
        "click",fun
      );//btn2.onclick();
    */
  
    var lilei={
      name:"lilei",
      init:function(){//this->lilei
        var me=this;//留住this
        btn3.addEventListener(
          "click",function(e){//this->btn3
            alert("我是"+this.name+
                       //lilei
                  "您点的是"+e.target.id);
                            //btn3
            console.log(e.target);
          }.bind(this)
        );
      }
    }
    lilei.init();
  
  
    // setInterval(function(){
    //   console.log(this);
    // }.bind(obj),1000);
  
    </script>
  </body>
</html>










                

        

        

    




    

      

        

            

              
                
                  启宝
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
es6-class-bind-all:自动绑定es6类中所有方法的'this'范围

				
			

			

				

					05-09
				

			

		

		

			
				
问题 如您所见，构造函数中... bind ( this )  this . setAge = this . setAge . bind ( this )  this . setGender = this . setGender . bind ( this )  }  setName ( name ) {  this . name = name  }  setAge ( age

			
		

	



                

              
                



	

		

			

				
					
深入理解React中es6创建组件this的方法

				
			

			

				

					09-01
				

			

		

		

			
				
另一种方法是使用ES6的箭头函数，箭头函数不会创建自己的`this`，而是捕获其所在（即定义时）的作用域的`this`值：  ```jsx () => this.handleClick()}>   You {text} this. Click to toggle.   ```  这样，`this`就...

			
		

	



                


  
              

                


	

		

			

				
					
函数名调用bind(this)的作用

				
			

			

				

					兰星_thk&try的博客
				

				

					04-24
					
					1412
					
				

			

		

		

			
				
文章目录1 问题2 bind(this)的作用3 总结
1 问题
看不太明白bind(this)的写法
    Router.prototype.refresh = function () {
        console.log('触发一次 hashchange，hash 值为', location.hash);
        this.currentUrl = location.hash.slice(1) || '/';
        this.routes[this.currentUrl]();

			
		

	





	

		

			

				
					
.bind(this)作用

				
			

			

				

					普通人一枚
				

				

					04-08
					
					2055
					
				

			

		

		

			
				
<script>
    let vue = new Vue({
        el: "#app",
        data: {
            img: ''
        },
        methods: {
            upload(e) {
                let file = e.target.files[0];
                // let s = URL.createObjectURL(file);
      .

			
		

	



		

			
		



	

		

			

				
					
js：bind(this)这是什么写法

				
			

			

				

					分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
				

				

					04-10
					
					9624
					
				

			

		

		

			
				
bind
bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数.
关键词：

bind 是创建了一个新的函数。

例一
<body>
    <button type="button" id="butto...

			
		

	





	

		

			

				
					
ES6中bind(this)用法说明

				
			

			

				

					前端小狮的博客
				

				

					06-11
					
					9348
					
				

			

		

		

			
				
在使用 React 中的 Class extends写法，如果 onClick 绑定一个方法就需要 bind(this)，如果使用React.createClass 方法就不需要
解析：
React.createClass 是ES5 的写法默认绑定了 bind 写法
在 ES6 中新增了class，绑定的方法需要绑定 this，如果是箭头函数就不需要绑定 this
示例：
第一种写法：
_hand...

			
		

	





	

		

			

				
					
JS高级 之 彻底搞懂this指向

				
			

			

				

					玄鱼殇
				

				

					07-10
					
					820
					
				

			

		

		

			
				
JS 之 彻底搞懂this指向

			
		

	





	

		

			

				
					
ES6经典面试题.docx

				
			

			

				

					10-29
				

			

		

		

			
				
因为箭头函数的 this 并不适用于所有场所，所以新增了双冒号运算符，用来取代以往的 bind、call、apply 来改变 this 的指向。  9. Symbol 是什么，有什么作用？  Symbol 是新增的一种基本数据类型，返回一个唯一的值...

			
		

	





	

		

			

				
					
es6函数name属性功能与用法实例分析

				
			

			

				

					10-15
				

			

		

		

			
				
`bind`方法返回一个新的函数，这个新函数的`this`值会被绑定到原函数指定的对象。在ES6中，`bind`返回的函数的`name`属性会加上`bound`前缀：  ```javascript function foo() {} const boundFoo = foo.bind({}); ...

			
		

	





	

		

			

				
					
es6函数之箭头函数用法实例详解

				
			

			

				

					10-15
				

			

		

		

			
				
ES6中的箭头函数是JavaScript语法的一大改进，它提供了一种更加简洁的函数定义方式，同时也改变了函数中`this`的绑定规则。下面我们将详细探讨箭头函数的基本用法、特性以及注意事项。  ### 基本用法  1. **单参数...

			
		

	





	

		

			

				
					
bind(this)绑定this指向的对象、箭头函数和闭包

				
			

			

				

					wangweiscsdn的博客
				

				

					06-27
					
					1213
					
				

			

		

		

			
				
用bind(this），就是绑定this指向这个组件


componentDidMount: function () {
          this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;

			
		

	





	

		

			

				
					
bind(this) 的使用

				
			

			

				

					youyou_LIN的博客
				

				

					03-25
					
					4130
					
				

			

		

		

			
				
为什么使用 bind(this) ?    当点击事件触发的函数里有使用 this 的时候，就需要使用 bind（this）,不然 this 是 null，如果没绑定this应该是全局window。    &lt;div className="save" onClick={this.handleClick.bind(this)}&gt;Save&lt;/div&gt;参考文章：    https:...

			
		

	





	

		

			

				
					
class类 与 react类组件的bind(this)

				
			

			

				

					edwardwzw的博客
				

				

					07-06
					
					688
					
				

			

		

		

			
				
在 react 的类组件中，如果我们需要某个点击事件，通常会这样写： onClick={this.changeWeather}
但为了能够使 changeWeather 方法中能够正确找到 this, 我们通常需要在constructor构造器中这样写：this.study = this.study.bind(this)为了能够比较好地解释清楚这个原理，我们先来回顾一下 es6 的 class:


...............

			
		

	





	

		

			

				
					
2023-03-08 .bind(this)的使用

				
			

			

				

					ZT1090258642的博客
				

				

					03-08
					
					319
					
				

			

		

		

			
				
问题原因是找不到this，再success的方法中，this的内容是发放中的内容。方式一：方法后面加  .bind(this)  将this指向vue的this。方式二：另一种方式就是再方法前定义一个that，使用that就好。问题：下面的ajax请求会报错。

			
		

	





	

		

			

				
					
ES6中this指向（ccall/bind/apply）

				
			

			

				

					qq_34754747的博客
				

				

					07-05
					
					307
					
				

			

		

		

			
				
函数也属于对象。


3、this的指向问题




总结：

			
		

	





	

		

			

				
					
ES6之this关键字和bind方法

				
			

			

				

					weixin_44744234的博客
				

				

					06-27
					
					344
					
				

			

		

		

			
				
this关键字
this可以用在构造函数之中，表示实例对象。除此之外，this还可以用在别的场合。但不管是什么场合，this都有一个共同点：它总是返回一个对象。简单说，this就是属性或方法“当前”所在的对象。
var person = {
    name: '张三',
    describe: function () {
    return '姓名：'+ this.name;
  }};
...

			
		

	





	

		

			

				
					
TS装饰器bindThis优雅实现React类组件中this绑定

				
			

			

				

					不定时分享最优质的网络技术与教程，满满的干货。
				

				

					12-03
					
					948
					
				

			

		

		

			
				
初学React类组件时，最不爽的一点应该就是  指向问题了吧！初识React的时候，肯定写过这样错误的demo。


?  丢失了。编译React类组件时，会将  转成 ，并 事件用对象包裹一层传参给该函数。


 写到这里肯定会让大家觉得是  在埋坑，其实不然，官方文档有澄清：这并不是  自身的行为: 这是因为 函数在 JS 中就是这么工作的。通常情况下，比如，你应该 bind 这个方法。经受过面向对象编程的洗礼，为什么还要在类中手动绑定 ? 我们参考如下代码、


上述代码如期打印了 。就是在  中执行

			
		

	





	

		

			

				
					
关于React中使用bind(this)的理解

				
			

			

				

					想搞全栈的前端
				

				

					09-04
					
					9081
					
				

			

		

		

			
				
前言
在学习React的过程中发现调用函数的时候必须使用bind(this)，之后直接在class中声明函数即可正常使用，但是为什么要使用这个呢？在这里总结一下。
1.JavaScript自身特性说明
如果传递一个函数名给一个变量，之后通过函数名()的方式进行调用，在方法内部如果使用this则this的指向会丢失。 示例代码：
首先我们创建test对象并直接调用方法 ：
const test = ...

			
		

	





	

		

			

				
					
es6 class 中this丢失如何解决

					
最新发布

				
			

			

				

					07-12
				

			

		

		

			
				
1. 使用箭头函数：箭头函数不会创建自己的 this，而是继承外部作用域的 this 值。因此，可以将箭头函数用作回调函数，确保 this 始终指向正确的对象。  ```javascript class MyClass {  constructor() {  this.name ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值